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?
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]
#navbar_div a { display:inline-block; float:left; }
:S
It's weird bacuse IE is also making the images appear much larger than they actually are!?
That aside, give your images their proper dimensions.
eg.
etc.
I really wouldn't worry about any browser earlier than ie6.
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>
#navlist>li{That's your problem.
Don't use the child designation, as IE doesn't like them; just use spaces:
#navlist li{ul#navlist li {
float:left;
margin:0 1em;
display:inline;
}
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!
:)