Top Encountered CSS Bugs/Issues

Question

Please list CSS bugs/issues you encounter and how to solve them or a link to a site that solves them.

Please vote on what bugs you think people will encounter the most.

Thanks!

Answer 1

The Internet Explorer box model bug.

Answer 2

IE6 doesn't support min-height.

You can use conditional comments to set height, which IE6 treats as a min-height.

Or you can use the child selector in CSS, which IE6 can't read, to reinstate height: auto on everything but IE6.

.myDiv {
height: 100px;
min-height: 100px;
}

.parentElement > .myDiv {
height: auto;
}

Using techniques like this can be problematic, but all popular modern browsers work in such a way that it's a valid technique.

Answer 3

Double Margin Bug (< IE7)

Answer 4

Rumor has it that IE8 will not allow you to center elements with text-align: center;, only the text inside elements themselves. Instead, you must use margin: 0 auto;. If this is in fact the case, nearly all of the interwebs will implode.

Answer 5

Almost every HTML/CSS bug that you will encounter will be in Internet Explorer. IE6 has a lot of them, IE7 a bit fewer and IE8 subtantially fewer.

Having a proper doctype is a must. Without it the page is rendered in quirks mode, and especially for IE that is bad. It renders the page more or less as IE5 would, with the box model bug and everything.

Here are some common IE bugs:

• Making the content of each element at least one character high. (Can be fixed using overflow.)

• Expanding each element to contain it's children even it it's floating elements. (Can be fixed using overflow.)

• Elements that are not positioned but has layout gets a z-index, although they shouldn't. (Can be fixed by making it positioned and give it a specific z-index, and do the same for all elements on the same level that needs it.)

• Margins are not collapsed correctly. (Use padding instead if possible.)

• Vanishing floating elements. (Give them a specific size.)

• lots more... (including suggestions for fixes)

The most stable fix for most of the bugs is to rearrange the layout to avoid them, or to specify stricter styles (e.g. a specific size).

Answer 6

Chalk another one up for IE6: DropDownList and DIV overlapping problem, with screen shots. The iframe fix is mentioned in the article. I'm not sure if there are CSS bugs that have consistent buggy behavior across all browsers.

Answer 7

here a link that list all IE known bugs and how to fix it: PositionsEverything.net