PDA

View Full Version : css horizontal menu shifts down a few pixels in FF, but not IE or OP


umtwademel
11 Feb 2008, 07:42 PM
Hey guys, I finally got the beginning of my website to look good in IE and OP, but I am still have trouble with FF. For some strange reason the horizontal menu shifts down a few pixels. I have tried everything i know and nothing seems to happen. Help would be much appreciated. Be specific in your answer b/c i'm still a newb in the arts of CSS, haha. Thank you!

site: http://people.vanderbilt.edu/~karl.brandt/
Wickham
12 Feb 2008, 02:12 AM
I see the opposite, Firefox is correct showing the text in the middle of the blue buttons but IE shows the text on the buttons too high, so I left all the coding as you had it for Firefox but added a conditional comment that only IE operates.

Put this AFTER the main script and styles:-

<!--[if ie]>
<style type="text/css">
.suckertreemenu ul li { margin-top: 10px; }
.suckertreemenu ul li ul li { margin-top: 0; }
</style>
<![endif]-->

You still have two <html> codes and two head sections, the main ones are after body markup so they ought to be moved up and consolidated. However, I left them as they were and as long as you put the conditional comment afterwards it will still work to lower the text in the buttons in IE. It's always best to get Firefox correct as this is usually OK for most other browsers and then you can put a conditional comment in just to edit IE.

It looks OK in my IE7, Firefox and Opera but Safari still shows the text too high in the buttons. Your code is still a bit of a mess and needs sorting out, possibly starting again.