Errata: HTML Snippets

Horizontal Centering with CSS

The standard way is to set the margin of the box you want centered to:

margin: 0 auto;

However, IE5Win does not respect this, so you need to set the text-align property of its container to:

text-align: center;

Then, if center is not the desired text-align value in the object, override it there.

Centering a Block without a Defined Width

For well-behaved browsers, display: table inside a text-align: center does the trick. For IE, use display: inline; zoom: 1 instead (in conditional comments, of course).

MSIE 6 Win CSS Bug: position: relative and floats

I haven't seen this reported anywhere as such, but here is what happened. When a parent div had position: relative, a floated image inside a child div would not display. Text wrapped around the missing image, so it was taking up space, but the image itself was not visible. Setting an explicit width on the parent div solved the problem.

Serving CSS to IE5/Mac

To serve CSS to IE5/Mac only:

/*\*//*/
p { color: blue; }
/**/

To serve CSS to everything except IE5/Mac:

/* Hides from IE-mac \*/
p { color: red; }
/* End hide from IE-mac */

IE7 Problems

• Repeating background images will not display in containers without an explicitly defined width.

CSS problems in Opera and Safari?

Your HTML and CSS validates, and everything looks great in Firefox, but then you see lots of problems in Opera and Safari, two normally well-behaved browsers. What's up with that?

This happened to me, and the problem turned out to be an attempt to @import a non-existent style-sheet. With that declaration in place, the clearfix rule in another stylesheet simply stopped working, creating chaos in float-world. Removing that import statement solved the problem. Go figure.

Opera v9.01, WinXP; Safari 2.0.4, OS X 10.4.8

Inline Javascript Tag for XHTML

[script type="text/javascript"]
// [![CDATA[
…
// ]]]
[/script]