Menu not displaying correctly in IE

6 Posts

Bram Sibma Reply #1, 17 years, 6 months ago

I am working on a website for my hobby: http://www.asianserpents.com all looking fine in Google Chrome but when I watch it in IE it stinks... the blocks are not displayed correctly.
This is the following css I use:

#menu { 
float: left; 
width: 125px; 
} 
#menu ul { 
clear: left; 
margin: 0px; 
padding: 0px; 
width: 125px; 
} 
#menu ul li { 
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
list-style-type: none; 
display: block; 
clear: both; 
overflow: auto; 
margin: 0px; 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 1px; 
border-left-width: 0px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #3B4127; 
border-right-color: #3B4127; 
border-bottom-color: #3B4127; 
border-left-color: #3B4127; 
font-size: 16px; 
background-color: #737776; 
} 
#menu ul li a { 
margin: 0; 
color: #000; 
text-decoration: none; 
display: block; 
padding-left: 2px; 
} 
#menu ul li a:hover { 
color: #FFF; 
background-color: #3B4127; 
} 
#menu ul li a:active { 
color: #FFF; 
background-color: #3B4127; 
}

I am no CSS talent. So all advice and corrections are welcome!

Greetings,

Bram

24,544 Posts

BobRay Reply #2, 17 years, 6 months ago

It looks the same for me in IE7 and Chrome except that in IE7 the left border of the collectionmenu div doesn’t go all the way down. If you give collectionmenu a left border, that should help.

If you mean IE6, it probably gets more complicated.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

6 Posts

Bram Sibma Reply #3, 17 years, 6 months ago

are the menublocks not displayed differently? because I use IE7 and some of the blocks show extra space instead of nicely follow the other menublock.

Greetings,

Bram

24,544 Posts

BobRay Reply #4, 17 years, 6 months ago

The look exactly the same to me in IE7 and FF3 under Vista except that in FF3, I see a scroll bar under each menu choice when I click on it (I’ve never seen that before). I think the collectionmenu div needs to be slightly wider. That might solve the problem you see as well.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

☆ A M B ☆
536 Posts

Last Of The Romans Reply #5, 17 years, 6 months ago

#menu ul li { 
border-top-width: 0px; 
border-right-width: 0px; 
border-bottom-width: 1px; 
border-left-width: 0px; 
border-top-style: solid; 
border-right-style: solid; 
border-bottom-style: solid; 
border-left-style: solid; 
border-top-color: #3B4127; 
border-right-color: #3B4127; 
border-bottom-color: #3B4127; 
border-left-color: #3B4127; 
}

little advice for CSS:

border-bottom: [ border-width || border-style || border-color ] | inherit

http://www.elated.com/articles/css-shorthand/

palma non sine pulvere