Web Development

PNG Files Do Not Show Transparency in Internet Explorer

w3carpenter — Mon, 18 Jan 2010 00:26:52 +0000

Web developers who work using PNG files can use AlphaImageLoader as the example below

Use the hyphen(-) instead of the underscore(_) in coding

w3carpenter — Wed, 18 Nov 2009 02:57:33 +0000

Use the hyphen(-) instead of the underscore(_) in coding

It is good coding practice to avoid the need for URL escape characters. As a rule of thumb, avoid using the special characters above when formulating a URI string (filename), and I recommend using the hyphen (-) instead of the underscore (_) (as all search engines recognize the hyphen as a space separator, but the same is not true for the underscore; and older browsers do not correctly interpret the underscore in CSS). If you must use the above characters make sure to escape them using the above escape characters so when the browser parses your code it will not misinterpret the link. It’s important to note that these URL escape characters differ from HTML escape characters.

How to center div using CSS both in IE and in FF

w3carpenter — Wed, 18 Nov 2009 02:27:31 +0000

How to center div using CSS both in IE and in FF

In case trying to center a div named ‘container’, we can center the div like below

/* Define default values for the whole site */

body {
    margin: 0;
    padding: 0;
}

/* Define wrapper division for this page */

#container {
    width: 900px;
    margin: 0 auto;
}

/* Style for FF */

:root #container {
    text-align: -moz-center;
}

Cross Browser Inline-block

w3carpenter — Mon, 17 Aug 2009 06:51:57 +0000

Cross Browser Inline-block

Inline-block is a great state to have an element’s display set at. It gives you the best of both inline and block elements: the ability to add padding, margins, while remaining inline with content around it. So why is it so badly supported? Firefox 3+, Safari and Opera have no problem with it, but what about Internet Explorer and Firefox 2?

Here is all you should have to have to use inline-block… if it was supporting by all browsers. Unfortunately, this will only work for Firefox 3+, Safari, and Opera.

#div {
  display:inline-block;
}

In versions of Firefox before 3, elements with inline-block defined as their display state would default back to their naitive state. To counter this, we use a Vendor Specific Extension -moz-inline-box. Yes, you’d think -moz-inline-block would make more sense, but that property doesn’t exist.

#div {
  display:-moz-inline-box;
  display:inline-block;
}

If the browser does not support -moz-inline-box, then it uses inline-block, and vice verca. It’s an annoying thing to have to do, and unexpected that it’s for Firefox, but it get’s the job done.

So now that only leaves Internet Explorer. Ah, Internet Explorer. The browser that likes to give us that extra work we love doing…. Inline-block for Internet Explorer is a little more tricky. If an element is inline natively, then it can be declared using inline-block, simply as that. However, if it’s anything other than inline, then you have make the element’s hasLayout attribute set to true. If you’re confused about what hasLayout is, I suggest reading hasLayout: What is is, and how to use it.

In this case, we’ll use zoom to set hasLayout to true, and then set display as inline.

#div {
  display:-moz-inline-box;
  display:inline-block;
  zoom:1;
  *display:inline;
}

And there you have it. This will work in IE 5+, Firefox, Safari, and Opera.

Beginning CSS Web Development From Novice to Professional

w3carpenter — Mon, 20 Jul 2009 09:06:37 +0000

Beginning CSS Web Development: From Novice to Professional, Simon Collison, Apress (September 18, 2008), 448 pages

About the Author

SIMON COLLISON has been working with web sites for almost six years. the author runs Ersckine Design, a full-service web agency established in late 2006. As the lead web developer at Agenzia from 2002 to 2006, he worked on numerous web projects…

Introduction

“Once you have read this book, you’re going to be a full-fledged web wizard, using CSS to save you and your clients time, money, and stress.”

In this book, the author of this book, Simon Collison, is mentioning like above and I agree with the statement above absolutely. Actually, I have completed a web application after reading this book and I have a confidence to make it well.

What are the benefits of Web standards?

Web standards bring many benefits. Web pages are reduced in size, making download times faster, in turn using much less bandwidth. Compatibility with user agents (browsers, cell phones, PDAs, assistive software) is increased…

In addition, standards also are great because they allow for the separation of content from presentation and do wonders for site accessibility.

How does the author carry out overall purposes of the book?

Like the title of this book the author of this book tries to deal contents from basic to advance.

Every chapters start from the brief introduction about it and treated a lot of examples and why it needs and how to apply it to the contents.

So Beginning CSS Web Development: From Novice to Professional will be helpful to every developers.

This book deals facts regarding CSS from Core Concepts to Layout as below.

Get to know CSS
Core Concepts of CSS
CSS Building Blocks
Text
Color, Backgrounds, and Images
Lists
Links
Tables and Definition Lists
Layout Basics
Classic Layouts
Layout Manipulation
The Journey from Layout to Template
Usability and Accessibility Enhancements
Tips, Tricks, and Troubles
Case Study: The Dead Goods
CSS Reference

I really recommend you read this book Beginning CSS Web Development: From Novice to Professional.