RE: FN-FORUM: CSS - width inconsistencies between browsers

date posted 1st February 2006 16:55

> #nav li a {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 11px;
> width: 12.85em;
> w\idth : 13.85em;
> display : block;
> color : white;
> font-weight : normal;
> text-decoration : none;
> background-color : #3A7986;
> padding : 0 0.5em;
> }
>
>The CSS file is at http://www.mkuseating.co.uk/mainstyle.css
>
>Not sure how the hack works but I assume that 'w\idth' is supposed to be
ignored by certain browsers??

On IE, the width *includes* the padding, but on Safari/FireFox it excludes
it. Go figure!

There are lots of hacks around, but I find that this works OK:

width: 13.35em !important ;
width: 13.85em ;

Basically, IE ignores the !important attribute and Safari/FireFox don't. So,
the net result is that you can apply a smaller "important" width which takes
precedence for Safari etc and excludes the padding, and leave IE to use the
wider width which includes it. The difference between the 2 is usually the
sum of the left/right padding, but you may need to juggle numbers depending
on the rest of your CSS.

Hope that helps
Ed

www.emissary-consulting.co.uk