View Full Version : another css prob, navigation gets pushed up in IE9

07-24-2011, 02:30 PM

I'm working on a website right now, and it's almost finished. It looks just like i want it to in FF and Safari and all other browsers, but in IE 9 it pushes the whole menu up.

Screenshot IE9 (assuming its the same in IE 6/7 and 8):


Screenshot Mozilla FF5:


Here's da CSS:

#navbar {
background: url(site_images/navbar.gif) no-repeat;
width: 475px;
height: 34px;
float: right;
margin-right: 40px; }

#navigation li {
list-style-type: none;
display: inline;
float: left;
margin-top: -11px;
padding-right: 30px; }

#navigation a {
text-decoration: none;
font-size: 11px; }

#navigation a:hover {
background: url(site_images/active.gif) no-repeat;
text-decoration: underline;
color: #079bd4; }
A live view:

Any1 can help?

07-24-2011, 04:20 PM
I also have had a problem, centered elenentur,checked again all the elements.Something somewhere is not specified or is specified multiple times

07-24-2011, 04:23 PM
With no doctype, IE will render in quirks mode - very different from standards mode. Put in a doctype, fix your code errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F79.143.184.10%2Fcss2%2Findex.php), and see if that solves it.


07-24-2011, 07:41 PM
as with a doctype, you need to set a height to your lis.

#navigation li {
height: 34px;
line-height: 34px;

instead of trying to use a negative position relative, using line-height (equal to the height) to center vertically


you can view ie7 & ie8 in ie9. its a useful simulator.
should be tools --> developer tools (or just f12 is you have one).