[thelist] List horizontal navbar IE PC problem

Ian Anderson ian at zstudio.co.uk
Fri Aug 12 05:37:24 CDT 2005


ben morrison wrote:

>
>Its good practice to reset your UL & LI elements to 0 then add however
>much margin/padding is required:
>
Also, something that I saw for similar reasons is this, which you can 
stick at the top of your main screen css:

* {margin: 0; padding: 0;}

...which uses the universal selector to tell every element to use no 
padding or margins. Then as Ben wrote, you set the actual padding and 
margin you want specifically for each element.

Cheers

Ian

PS: a tip because the * reminded me:

<tip type="CSS" author="Ian Anderson">
To supply height values for coloured containers that work cross-browser, 
avoid using "height" property in areas of your CSS that is viewed by 
proper browsers - the container doesn't stretch when content overflows, 
in anything other than IE.

Instead use min-height, and supply an additional height value for IE 
using the star html hack:

/* main rule for most browsers. IE doesn't understand Min-height though */
.whatever {
    min-height: 250px;
}

/* alternate rule for IE only, which has a phantom element outside the 
HTML element */
* html .whatever {
    height: 250px;
}

This is great for supplying different margin values as well, in 
situations where IE gets these wrong also.

Also a life saver - many bizarre display bugs from IE result from the 
internal hasLayout property not being set. This is set when you size an 
element specifically, but it is often not practical to use a real size. 
So, set height to 1%, but only for IE - it will ignore this value and 
set the displayed height to whatever it needs to since it doesn't follow 
CSS spec for height, but the internal hasLayout property will be set and 
your display bug may go away.

* html .whatever {
    height: 1%;
}

This fixes a wide range of problems especially with border or background 
colour not displaying in floated designs.

</tip>



More information about the thelist mailing list