$10
Thesis Left menu CSS in IE8

Hello

Working on a client site and I'm having trouble with the left menu CSS code acting up in IE8. The main menu links bleeds through the submenu and the menu is almost unuseable in IE8.

I need this fixed.

attachment image View Attachment

René Sejling | 08/30/11 at 3:14pm | Edit

(5) Possible Answers Submitted...

Last edited:
08/30/11
3:19pm
Julio Potier says:
Hello

Can you give us an URL ?

Thank you
- 08/30/11 3:58pm
  
  René Sejling says:
  http://www.renesejling.dk/sites/mhj/
Last edited:
08/30/11
3:53pm
M. Daniel says:
I think you need to change your DOCTYPE to one that will force the browser into "Standards" mode:

If your current DOCTYPE is:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```
changed it to:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
Read more about DOCTYPE here

Also check this 2 links:

http://diythemes.com/thesis/rtfm/conditional-css-for-ie/

http://diythemes.com/thesis/rtfm/conditional-css-for-ie/ (for CSS3)

Or this: : http://www.webmasterworld.com/css/3246787.htm

Previous versions of this answer: 08/30/11 at 3:53pm
- 08/30/11 3:58pm
  
  René Sejling says:
  I just tried this. Adding the code to custom_functions.php listed on the thesis site. No luck, as you can see.
  
  URL of site: http://www.renesejling.dk/sites/mhj/
Last edited:
08/30/11
7:25pm
Reland Pigte says:
try change this line 84 of this file: http://www.renesejling.dk/sites/mhj/wp-content/themes/thesis_18/custom/custom.css?083011-84413

.custom #menu-produktoversigt .sub-menu {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #000000;
margin-top: 0;
position: absolute;
z-index: 999;
}
- 08/31/11 3:14am
  
  René Sejling says:
  Tried this, but no luck. Still the same problem.
Last edited:
08/31/11
9:22am
Andrzej Zglobica says:
Hey,

This seems to be working for me:
```
.custom .menu li {

position:relative;

z-index:600;

}
```
Last edited:
08/31/11
2:50pm
Jermaine Oppong says:
In custom.css line 240 remove the z-index:600; property and in style.css line 275 remove the z-index:600; property.

From line 84 of custom.css you have
```
margin-l;eft: 50px;
```
Change that to
```
margin-left: 50px;
```
Or you can make the menu look better by replacing lines 84-92 with this:
```
.custom #menu-produktoversigt .sub-menu {

background: white;

border: 1px solid black;

margin-top: 0px;

left: 150px;

position: absolute;

z-index: 999;

top: 0;

}
```
- 08/31/11 2:59pm
  
  René Sejling says:
  This works better in IE, but the parent text still goes through the submenu box, and the menu still don't work 100% in IE8. Looks to me the z-index value doesn't move the submenu on top.
- 08/31/11 3:01pm
  
  Jermaine Oppong says:
  Can you post a screenshot?
- 08/31/11 3:05pm
  
  René Sejling says:
  Hmm, they seem to be on top now. Weird :) ok... but check the menu 2nd from the top, you can't click any sub menu links, the box disappears when you move your mouse to click a sub menu link
  http://www.renesejling.dk/sites/mhj/
- 08/31/11 3:10pm
  
  Jermaine Oppong says:
  O yes I see what you mean. Go to
  
  http://www.renesejling.dk/sites/mhj/wp-content/themes/thesis_18/lib/css/ie.css
  
  and remove overflow:hidden from line 27
- 08/31/11 3:14pm
  
  Jermaine Oppong says:
  You had position:static on the main list items that was why the menu were acting funny. Seems you have changed this.
- 08/31/11 3:25pm
  
  René Sejling says:
  Wont that just edit the style for IE6 ? as far as I can see.
  Also all links in the menu are now orange, no idea how :)
  
  Lol
- 08/31/11 3:31pm
  
  Jermaine Oppong says:
  Remove
```
.custom .menu li li {

position:static !important;

}
```
  from lines 279-281. It would not make any difference to the menu
- 08/31/11 3:35pm
  
  Jermaine Oppong says:
  For IE 6 change that line to
```
* html #content, * html .sidebar{overflow:hidden;}
```
  This will therefore only work for IE 6. Ill get back to you on the orange links - Lol
- 08/31/11 3:37pm
  
  René Sejling says:
  Thanks will try that.
  the orange color is from the styles.css as well.
  I have another guy on this as well and he might be trying something out :)
  
  Leave it for a bit, I will let you know how it turns out.
  Thanks for your effort.
- 08/31/11 3:42pm
  
  Jermaine Oppong says:
  Well the orange links should be because the colour of the links have been set that way.