- This topic is empty.
-
AuthorPosts
-
May 15, 2009 at 6:33 am #24848gavinmMember
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]May 15, 2009 at 6:46 am #57539nickstrMembertry using a display:inline-block to all a in nav
#navbar_div a { display:inline-block; float:left; }May 16, 2009 at 4:45 am #57601gavinmMemberHi 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!?
May 16, 2009 at 5:22 am #57602apostropheParticipantYou 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:May 17, 2009 at 7:26 pm #57651gavinmMemberThanks 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>May 17, 2009 at 7:59 pm #57654AshtonSandersParticipantCode:#navlist>li{That’s your problem.
Don’t use the child designation, as IE doesn’t like them; just use spaces:
Code:#navlist li{May 17, 2009 at 10:40 pm #57666apostropheParticipantYou might also want to add:
Code:ul#navlist li {
float:left;
margin:0 1em;
display:inline;
}May 20, 2009 at 9:36 am #57835gavinmMemberAwesome!
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!
:)
AuthorPostsViewing 8 posts - 1 through 8 (of 8 total)- The forum ‘CSS’ is closed to new topics and replies.