CSS Navigation bar problem IN IE6

[danny322]

Hey Everyone

Im having trouble with my navigation bar again. Could somebody please have a look at this site in mozilla and IE6........

http://www.design365.co.uk/sef/ybfuk/default.asp

As you'll see its fine in mozilla but i have big problems in ie6 such as the buttons starting to repeat and a gap between the long orange line and my flash movie.

Any help would be appreciated.

Danny

EDIT: The menu does not centralise in IE either, ive had to make do with padding-left: 30px; but i thought i could use div align center or margin: 0 auto but they didnt work

[Jack Franklin]

It does not align in IE7 either. Works fine, but does not align. Can I see the CSS please?

[danny322]

have u got the web developer toolbar in mozilla? Theres an option to view the css on that

[welshstew]

Is the navigation meant to be to the left? It looks a bit weird, and I think it should line up in the center?

There are two ways you can fix this.

First is to use conditional style sheets for IE6

Code: Select all

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Then you would set the IE 6 specific attributes to make it look pretty within here.

The other way is to use CSS only recognised by mozilla et al to get around this.

i.e for your button heights you can use the following:

Code: Select all

ul#navigationbar li a {
height: 25px /* height for ie6*/
min-height:31px /*adjustment for mozilla & ie7 - not recognised by ie6*/
max-height:31px /*adjustment for mozilla & ie7 - not recognised by ie6*/
}

The first method is the cleaner, and what most people use.

[welshstew]

check here for more on conditional style sheets

[danny322]

hey welshstew, ive now used a different method for my navigation bar if you could take a look. The problem im having now is i cannot put in any padding left, padding top etc to position the text because what happens is any padding affects the position of the image when i roll over it.

Any help would be appreciated, thanks

[welshstew]

on #main-nav ul li a change the padding from 0px to 5px and see what that does (works in FF)

[danny322]

hey again welshstew, i changed that, it looked terrible in IE6 though :-( im not sure about ie7 because i dont have it on this comp. Any other suggestions? Thanks

[welshstew]

ok, change the padding back and try changing margin in #main-nav ul li a to 5px 0px 0px 0px

p.s. you are going to have fun with the 'hardwear loan' link...

[welshstew]

no wait, that seems to muck up your roll over. give me a sec

[danny322]

yea thats my problem, ic an get the text positioning ok but its a problem when i rollover. And yea, i duno how im gonna get past the hardware loan problem lol