Problem with Internet Explorer

[rainemaida]

Hi,

For some reason my design works fine in Safari and Firefox but doesn’t work in Internet Explorer – please could someone help me to correct this?

http://www.i-web-solutions.org/virgo

It’s the menu area – the rest I think is fine.

Cheers,
Steve

[AshtonSanders]

Your navigation bar has this CSS:

Code:

#nav li {
border-right:1px double gray;
display:inline;
margin:0;
[b]padding-bottom:20px;
padding-top:20px;[/b]
}

#nav li a {
color:#FFFFFF;
font-size:14px;
font-weight:bold;
[b]padding:20px;[/b]
text-transform:uppercase;
}

Notice the bolded paddings. This gives the Nav items a total of 40px of padding on top and bottom, and you only want 20.

Use this code for #nav li a:

Code:

#nav li a {
color:#FFFFFF;
font-size:14px;
font-weight:bold;
[b]padding: 0 20px;[/b]
text-transform:uppercase;
}

Enjoy,

[rainemaida]

Hi,

Thanks for the quick reply. I’ve made the changes but now I’m presented with a new problem.

The hover image for the list items now appear in the middle of the button when I hover over (picture of an arrow). I need this at the bottom of the button – how would I do that, I’ve tried all sorts of background-position stuff…

Cheers,
Steve

[apostrophe]

Ok, I’ve just been playing about with firebug and it should go something like this:

Code:

#nav {
background:#2B80B6 url(images/menubg.jpg) repeat scroll 0 0;
margin: 0 15px 30px;
}

#nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
overflow:hidden;
}

#nav li {
background:transparent url(images/border.jpg) no-repeat scroll right center;
display:inline;
float:left;
height:55px;
margin:0;
}

#nav li a {
color:#FFFFFF;
display:block;
font-size:14px;
font-weight:bold;
margin-top:20px;
padding:0 20px 20px;
text-transform:uppercase;
}

[Author]

Posts