CSS & ems not working correctly partII

programming web dev
1

Guys/girls,

I’m back. Things are working perfectly since my last post about css. But I encountered (written correctly?) another problem

I have:

CSS

body {
height:100%;
font-size:0.75em;}

html { font-size: 100%; /* IE hack */}

#navcontainer {height:285px; margin-top:85px;}

#navcontainer .topimage1 {
background-image:url(images/nav-boven.gif); 
background-repeat:no-repeat;}

#navcontainer .topimage2 {
background-image:url(images/nav-boven-preventies.gif); 
background-repeat:no-repeat;}

#navcontainer p {margin: 0; height:34px;}

#navcontainer h4 {margin: 1px 0 0 0;}

#navcontainer .bottomimage {
background-image:url(images/nav-onder.gif); 
background-repeat:no-repeat;}

#navcontainer ul {
margin: 0;padding: 0;
list-style-type: none;}

#navcontainer li { 
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-variant:small-caps;
color: #CFE8F1;} 

#navcontainer a, #navcontainer a:visited {
display: block;
color: #839A8B;background-color: #205C73;
background-image:url(images/nav-midden.gif); 
background-repeat:repeat-y;
padding: 0 .8em 0 1em;
text-decoration: none;
line-height:150%;
width: 150px;}

#navcontainer a:hover, #navcontainer a:active, #navcontainer a:focus{
color: #CFE8F1;
background-color: #839A8B;
background-image:url(images/nav-midden-active.gif);
background-repeat:repeat-y;}

#navcontainer .active{
color: #CFE8F1;
background-color: #839A8B;
background-image:url(images/nav-midden-active.gif);
background-repeat:repeat-y;
padding: 0 .8em 0 1em;}

Now I want the

#navcontainer li

font size to change to .9em …

This is working perfect in IE but in firefox it isn’t … If I don’t use em but px .9 would be around 11px… 12px gives the same view in IE and firefox and so does 10px … but 11px doesn’t …

How to solve it …
To see the css working:
http://www.brandevoort.org/users/preventerven

tnq for your support

:smirk: