Issue with positioning of main menu in IE8 ?

Hey, I'm having an issue with the menu, in IE8. I know the template doent work in IE6, but... the menu on IE8 seems to be too far over to the right, and as a result, i'm losing the last menu option...the screenshots will explain. Theres one of chrome, which it looks ok in, and one of IE8, which is not so good. Any thoughts on how I can fix this? I don't remember changing anything to do with the layout...site is vitaloximeters.co.uk

Thanks in advance anyone that can help
Chrome

IE8


NOTE: Just discovered when clicking the "compatability mode" button, the layout completely fixes itself.. How can I write into the ie8.css file to display with the same rules as is used in compatibility mode? I hope you understand

offtopic: which template are you using for the virtuemart ? looks good.. i tried the standard, looks awful...

heh, yea, well I stole the template from a rockettheme template (mynxx) as I have a membership there too..seems to work...I had to change some css as it was conflicting a bit, so its not a direct plug and play...had to change at least 10 properties / rules with lots of firebug and experimentation

let me know if you try and do it that way too, and I can send you my .css files or whatever to help out

Hi

Please try to add this at the end of template.css file:

Code: Select all

#gk-cssmenu {
position:absolute;
width:820px;
}


I'm guessing, so if it won't work please send me panel access data.

Hi Teit, thanks again...That fixes it a bit (changes menu from 2 lines, to 1...but still out of place)

I'm not sure when compatability mode is on and when it's off....stupid IE. It doesn't make it obvious. I have a feeling it is displaying ok.....unless you click compatability mode...and then it goes wrong? I hope it's this way round anyway.

The other little problem, is that the css drop down menu's don't have the shadow on the right side and the bottom in IE8...so it means the menu is a little hard to see...Is there something I can do about that..or is it IE8 not playing by the rules again? I'll send you panel access, if you don't mind checking it out that would be brilliant, thanks once again.

it still look awful in ie7 also.. the menu is way out of propotions...

when i run it in compatibility mode now in ie8 it's like ie7 (fucked)

but normal ie8 works

hmmm I was about to find a pc to test IE7 on. Damn. Should it not work well on IE7 as default? Do others not have problems in IE7 straight out of the box? Thanks for looking explodedk...do you not have the same problems with your corp2 template? At least IE8 works (sort of).

Hi

Ok. I've worked on fewleh's page and think that the answer is:

Code: Select all

#gk-cssmenu {
position:absolute;
width:820px;
margin:0px;
left:160px;
}


teit, thankyou! this looks better...with compatability on and in IE7. I appreciate the help. I did add z-index: 9999 to it though, as the menu was coming up behind the showcase-a area? Seems to be better like that. Last question regarding this - Is it possible to get the shadow back on the right hand side and bottom of the child menu item...or is it using that moz-shadowkit type commands that IE doesnt read?

Hi

Unfortunately it's using this option:

Ok....I have a work around -

In order to replicate the shadow on the menu in IE8 and IE7 etc, I have used a filter. The code I've used is below, but it pretty much emulates the moz-box-shadow

Code: Select all

#gk-nav #gk-cssmenu ul { font-size:100%; margin-left:0!important; margin-top:0!important; background:#fff; -moz-box-shadow:1px 1px 1px #504a42; -webkit-box-shadow:1px 1px 1px #504a42; padding:0 7px!important; filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=125, Strength=2)}

Hope it helps someone

Hi

Woo hoo Nice