Frustrating IE 6.0 problem – can anyone help?

[gavinm]

Hey all – I’m new to this forum :)

I’ve launched a website http://barryslaven.com that seems to load up fine in every browser except IE 4, 5 and 6

The problem is with the navigation links at the top of the page – they seem to resize and align really awkwardly.

I don’t have a pc or access to IE 5.5 so I’m trying to update this page using browsershots.org which takes a while to load.

Are there any experienced CSSers out there who can point me in the right direction? Why is this happening?

Thanks

Gavin
[attachment=0]MSIE 5.5.png[/attachment]

[nickstr]

try using a display:inline-block to all a in nav
#navbar_div a { display:inline-block; float:left; }

[gavinm]

Hi Nickstr – thanks for the suggestion but it doesn’t seem to make a difference either way.

:S

It’s weird bacuse IE is also making the images appear much larger than they actually are!?

[apostrophe]

You should really be using an unordered list for your navigation, with plain text links and then using css to replace the text with your images.

That aside, give your images their proper dimensions.
eg.

Code:

#57651

gavinm

Member

Thanks for your reply apostrophe

I’ve tried a couple of techniques here – I had originally used an unordered list but IE 6 doesn’t seem to acknowledge that the list items should be floated – instead they just stack vertically.

Implicityly stating the dimensions of each image as attributes in the HTML has solved the problem of the image sizing.

Anyone have any idea with the list items are not floating left?

CSS
#navbar_div{
width: 912px;
margin: 0 auto;
height: 1.2em;
clear: both;
background: #F9F9F9;
padding: 0.6em 0 0.6em;
}
#navlist>li{
float:left;
margin: 0 1em;
}

html
<div id="navbar_div">
<ul id=’navlist’>
<li id="home_li">
<a href="/">
<img alt="Home" height="16px" src="/images/nav_images/home_hover.png?1242303421" width="72px" />
</a>
</li>
…

…
</ul>
</div>

#57654

AshtonSanders

Participant

Code:

#navlist>li{

That’s your problem.

Don’t use the child designation, as IE doesn’t like them; just use spaces:

Code:

#navlist li{

#57666

apostrophe

Participant

You might also want to add:

Code:

ul#navlist li {
float:left;
margin:0 1em;
display:inline;
}

#57835

gavinm

Member

Awesome!

I didn’t realise IE doesn’t cope with child selectors!

Page seems to look fine in most browsers now

Thank you both for you help!

:)

[gavinm]

Thanks for your reply apostrophe

I’ve tried a couple of techniques here – I had originally used an unordered list but IE 6 doesn’t seem to acknowledge that the list items should be floated – instead they just stack vertically.

Implicityly stating the dimensions of each image as attributes in the HTML has solved the problem of the image sizing.

Anyone have any idea with the list items are not floating left?

CSS
#navbar_div{
width: 912px;
margin: 0 auto;
height: 1.2em;
clear: both;
background: #F9F9F9;
padding: 0.6em 0 0.6em;
}
#navlist>li{
float:left;
margin: 0 1em;
}

html
<div id="navbar_div">
<ul id=’navlist’>
<li id="home_li">
<a href="/">
<img alt="Home" height="16px" src="/images/nav_images/home_hover.png?1242303421" width="72px" />
</a>
</li>
…

…
</ul>
</div>

[AshtonSanders]

Code:

#navlist>li{

That’s your problem.

Don’t use the child designation, as IE doesn’t like them; just use spaces:

Code:

#navlist li{

[apostrophe]

You might also want to add:

Code:

ul#navlist li {
float:left;
margin:0 1em;
display:inline;
}

[gavinm]

Awesome!

I didn’t realise IE doesn’t cope with child selectors!

Page seems to look fine in most browsers now

Thank you both for you help!

:)

[Author]

Posts