Releasing CSS

<ul id="attr2">

<li><a href="http://www.ora.com/">A link to O'Reilly's web site</a></li>

<li><a href="csscookbook.com">Link to CSSCookbook.com</a></li>

</ul>

<h2>Attribute Selector [attribute~=val]</h2>

<ul id="attr3">

<li><a href="http://www.ora.com/" title="books conferences reference">A link to

O'Reilly's web site</a></li>

<li><a href="http://www.csscookbook.com/" title="digital book download">Link to

CSSCookbook.com</a></li>

</ul>

<h2>Attribute Selector [attribute|=val]</h2>

<ul id="attr4">

<li><a href="http://www.ora.com/" title="books conferences reference">A link to

O'Reilly's web site</a></li>

<li><a href="http://www.csscookbook.com/" title="digital-book download">Link to

CSSCookbook.com</a></li>

</ul>

Releasing CSS 30

Figure 21. Attribute selectors not working in IE6

Releasing CSS 31

Figure 22. Attribute selectors working in IE7

Keep Away from Quirks Mode

DOCTYPE declarations (DTD for short) define an HTML or XHTML document’s

building blocks and tell the browsers and validators which version of HTML or

XHTML your document is using.

The DOCTYPE declaration must appear at the beginning of every web page

document before the html element to ensure that your markup and CSS are

standards compliant, and that browsers handle the pages based on the appropriate

DTDs.

XHTML requires DOCTYPE; otherwise the pages won’t validate and the browsers

fall back on quirks mode, treating the pages as if they have invalid markup and

therefore need to be improperly rendered in modern browsers even if the code may

be perfect XHTML and CSS.

The W3C provides an HTML validator (see

http://validator.w3.org/) and a CSS

validator (see

http://jigsaw.w3.org/css-validator/) so you can verify the validity

of your documents. If there’s no DOCTYPE, the validator chokes and displays the

appropriate warning messages.

Releasing CSS 32

A web page without DOCTYPE, with an older DOCTYPE, or with an incorrectly

coded DOCTYPE renders in quirks mode, in which a browser treats the page as

buggy. In some cases, depending on the browser, a browser may render some

content according to W3C guidelines.

While IE7 supports new selectors, web designers need to make sure they use

DOCTYPES and stay away from quirks mode. If IE7 triggers quirks mode, the

browser resorts to IE6 behavior, which means it doesn’t handle items such as

adjacent sibling selectors.

IE7’s PNG Support

IE7 comes with native PNG support for alpha transparency, fixing the problem in

IE6 (see Figure 23). There isn’t a need to use a JavaScript workaround to trigger

the filter property within this browser, as shown in Figure 24. An example of

placing a PNG with alpha transparency is as easy as placing any other image in a

web page:

<img src="alpha.png" alt="alpha transparency!" />

Releasing CSS 33

Releasing CSS 34