CSS Horizontal hover menu : layout dodgy in IE6 & 7

[mannkumar]

1) Script Title:
CSS Horizontal hover menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/hover.htm

3) Describe problem:
This menu seems to work perfectly in IE8 and other browsers, but the layout goes a bit dodgy in IE6 and IE7, the link to the site is as below

http://lotus-architects.com/

i've altered the hover effects etc, so not sure if its my CSS that is causing the problem - any help greatly appreciated.

[azoomer]

hi. IE 6 and 7 have a different "box model" than newer browsers and that will often cause problems. I cant see how you page looks in these browsers right now but i'm guessing that's the problem. Often it is necessary to specify some css rules that are specific to these browsers. A way of doing that could be to paste something like this

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

somewhere in the head section, but below the link to your main stylesheet. Then you make a new stylesheet (Called: ie7-and-down.css) only for these old IE browsers. Here you only need to (over)write the styles that needs changing for everything to look right in old IE. Cumbersome, but that's at least one way to do it. Read more

[mannkumar]

thanks, will create an alternative style sheet for IE6 and IE7, but does anyone know which rules i would need to create for IE6 and IE7 ?

[azoomer]

in your code this:

<img style="border: 0px solid ;" img title="email us now"; alt="Email Lotus Architects Birmingham" src="email.jpg">

looks a little fishy.

Maybe this:

<img style="border:0;" title="email us now" alt="Email Lotus Architects Birmingham" src="email.jpg">

Works better ???
You might want to try and change that before you mess with the alternative stylesheet.

[mannkumar]

thanks all, have managed to resolve the IE6 & IE7 issues with conditional comments and alternative sheetstyle - however in checking screenshots on adobe browserlab the only dodgy browser seems to be FF 2.0 apparently the div container for .hovermenu ul li a fills the full width of my main container, i tried to limit the width using the 'width: 420px' command as well as 'display:inline' but both failed !

any ideas why the layout is fine for all the other browsers except for FF 2.0 ?

[mannkumar]

thnks all - problem solved