Got a problem with the primary menu (actually a suckerfish menu) on a site based on the LiteJazz theme that displays fine in Firefox (http://www.lightbeingcreations.co.uk/support/grabs/deep-head-ff.jpg), IE6 and IE7 but when viewed in IE8 the menu is broken over two lines (http://www.lightbeingcreations.co.uk/support/grabs/deep-head-ie8.jpg).

I'm sure it's something to do with margins or padding of some other element but not which. I use Firebug for Firefox to troubleshoot and figure out the CSS for specific items, but it works in Firefox! I don't know how to troubleshoot and identify elements in IE.

Can someone take a look at www.deepliving.com in IE8 and let me know the CSS that needs tweaking?

Comments

rogerpfaff’s picture

I can't access my IE8 right now but Microsoft offers a web developer toolbar for IE that is good enough to identify and see your elements in IE. Just take a search for it.

regards
Roger

twandy’s picture

It seems like the header area is making it shift, or more specifically the "Creating space for a life of unlimited joy" text. As the Home link starts right after.. i would test removing the left margin under the #site-slogan and see if that moves the menu back at all.

Dubber Dan’s picture

Yep, removing the left margin for #site-slogan did the trick, but it's still not below that where it should be.

Got round it by adding a 1px margin to the top of the suckerfishmenu - probably not the best way, but did the trick