CSS Superclub

Dit is wat ik noem, een BUG file. Op deze pagina zal ik van verschillende websites handige tips aan jullie doorgeven over het fixen van bugs die ontstaan door CSS. Zoals jullie weten laat elke browser je pagina’s anders zien en soms is dat verschil zo groot dat je, om hetzelfde visuele effect te bereiken in elke browser, je css file soms moet ombouwen.

dit zijn een aantal tips van deze website http://www.webreference.com/authoring/style/sheets/layout/advanced/
Be fluid
Use relative lengths where possible (em or % for fonts, em for DIV widths)
Nest your DIVs
This is a workaround to solve boxing model differences, so it’s a powerful crossbrowser technique. Padding and borders and widths don’t mix well in IE5. Make sure you separate your style settings of padding and borders from any width settings in DIVs. IE5x for the PC’s box implementation incorrectly puts the padding and border of a box within its stated width.
The W3C says that padding and border are to be added to the width, and IE5 Mac and Gecko-based browsers correctly implement the box model. Instead, if you’ve got to set the width of a box, that also needs padding or borders, separate them into two divs, not one.
The rule is: For the same block element you might set horizontal margins and width or horizontal margins, horizontal borders and horizontal padding. Avoid declaring width and padding or width and borders for the same block element. Use nesting to achieve the desired visual.

Don’t use “nowrap” for DIVs
Netscape and Opera will overflow these at larger font sizes.
IE 5.x has a CSS parsing error that can be used
IN IE5x comments are interpreted as code rather than ignored, so this can be utilized to do crude if/thens to workaround bugs in IE5x. IE 6 eliminates this error. We used this technique to set the right bar’s width etc. before coming up with the above inherit workaround:
#fontChanger {font-size:.8em;//font-size:1em;}

Watch your DIV and table widths
Setting WIDTH:100% in a DIV can cause it to not match the width of DIVs set to auto (the default) in IE and, in IE5.5 when using table width=”100%” IE assumes entire window width, not the DIV width, so you can use //width:100% in a surrounding DIV and width:inherit in a table’s style sheet.
#topBar{background:#FC0;//width:100%;}
#topBar form{display:inline;}
table.c{font:.8em/1em Arial,Geneva,sans-serif;width:100%;//width:inherit;}

IE doesn’t inherit as it should, our guess is that it will inherit the value from the last ancestor that has a declared width value (absolute and relative values or ‘inherited’ keyword, IE doesn’t support ‘auto’ keyword). The percentages are calculated based on the inherited value so the above rules for percentage values also applies.

Floats can cause clearance problems
Especially with forms. Solutions: use a DIV around the enclosing DIV set to clear to avoid this in NS6 or set the form line height to less than the DIV’s height and clear the DIV below. The technique used in the article from A List Apart is also an alternative solution.

Do not use fixed heights
Version 5/6 browsers do not support them. Also min-height is not supported, in v5/6 browsers. IE 5.5 doesn’t support min-width, max-width, min-height, max-height.

In forms, set margin:0 for Opera and Netscape
Especially for floats, to minimize margins like IE.
If you want to use bottom or right properties you have to set either the width or height for the parent and it will work in IE.
Opera conflicts more with the W3C’s CSS specification, so you need to set the width for the child if you want to use the right property, if you want to use the bottom property you have to set the height for both parent and child. This explains some positioning problems we had in the right bar for IE. This works if the parent doesn’t have margins. Opera and IE 5.5 have systematic errors when margins are present on the parent.

How can you tell your divs to look at other divs on the page, figure out which one is the longest, and adjust its height to match?
voor het antwoord kijk hier: http://www.communitymx.com/content/article.cfm?cid=AFC58