CSS problems in IE

[reverend boltron]

Hi,

I'm designing a website for a client, and the menu system they wanted was a horizontal menu system which renders fine in FF and Safari, but IE doesn't like it.

My Site

Any insight would be great.

 

[stevf]

I am on a machine where I cant view your CSS but I have found that things work best between the browsers when you use a strict doctype (Which I see you are using), always set your margins, even to 0, and then validate your code.

Seems to me to something how the margins for the elements default differently if you dont specify them, but if you do set them for every element it works much better.

Hope this helps you as I need to move to another computer to view your css

 

[drebo]

Try setting your display attribute to "inline-block" on your menu item container.

 

[reverend boltron]

stevf: I actually already set my margins and padding to 0 using * {margin: 0px; padding: 0px; } Thanks for the heads up though.

drebo: I tried that, but no luck. 🙁

 

[drebo]

You set the .menu17 li element's display attribute to be inline-block? It needs to be inline, which it's not currently set to. My only guess as to why it works in Firefox and not IE is that list-style: none; implies an inline display in Firefox, but I know that is not the case in IE. You need to specify that element to be inline explicitly to get them to display on the same lines.

 

[reverend boltron]

Hm, here's the default that works by itself, but not when I put it in with the rest of my stylings...

.preload17a {background: url(/img/pro_seventeen_1a.gif);}
.preload17b {background: url(/img/pro_seventeen_1b.gif);}
.menu17 {padding:5px 0 0 1em; margin:0; list-style:none; height:35px; position:relative; background:transparent url(/img/pro_seventeen_0c.gif) repeat-x left bottom; font-size:10px;}
.menu17 li {float:left; height:35px; margin-right:1px;}
.menu17 li a {display:block; float:left; height:35px; line-height:33px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 4px; cursor😛ointer; background:url(/img/pro_seventeen_0a.gif) no-repeat;}
.menu17 li a b {float:left; display:block; padding:0pt 4px 5px 0px; background:url(/img/pro_seventeen_0b.gif) no-repeat right top;}
.menu17 li.current a {color:#000; background:url(/img/pro_seventeen_2a.gif) no-repeat;}
.menu17 li.current a b {background:url(/img/pro_seventeen_2b.gif) no-repeat right top;}
.menu17 li a:hover {color:#000; background: url(/img/pro_seventeen_1a.gif) no-repeat;}
.menu17 li a:hover b {background:url(/img/pro_seventeen_1b.gif) no-repeat right top;}
.menu17 li.current a:hover {color:#000; background: url(/img/pro_seventeen_2a.gif) no-repeat; cursor😀efault;}
.menu17 li.current a:hover b {background:url(/img/pro_seventeen_2b.gif) no-repeat right top;}

Credits: CSSpplay
URL: http://www.cssplay.co.uk/menus/pro_seventeen
(Gotta give credit to where credit is due)

 

[MrChad]

Have you tried using the Yahoo UI menu library?

 

[911paramedic]

Originally posted by: MrChad
Have you tried using the Yahoo UI menu library?

I would start with that as well, and then style everything yourself in another stylesheet. (Just list the Yahoo one first.)

The second problem I see, right off the bat, is a lot of coding errors. If you want to get the CSS working you need to clean up the XHTML first.

On the subject of MS, yup, they usually butcher perfectly good CSS. In fact, in their upcoming browser they built in backwards compatibility for all the IE hacks embedded in current websites.

 

[reverend boltron]

Originally posted by: 911paramedic

Originally posted by: MrChad
Have you tried using the Yahoo UI menu library?

I would start with that as well, and then style everything yourself in another stylesheet. (Just list the Yahoo one first.)

The second problem I see, right off the bat, is a lot of coding errors. If you want to get the CSS working you need to clean up the XHTML first.

On the subject of MS, yup, they usually butcher perfectly good CSS. In fact, in their upcoming browser they built in backwards compatibility for all the IE hacks embedded in current websites.

Oh wow! Thanks a lot. I looked at the source and I found the error. I am using a function to create the menu for each page to make life a little easier, and I forgot to put the </a> in there. That's what was causing the error.

Thanks for the point in the right direction.