[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