IE problems

W

WebDivvy

New Member
ok, I am building a HTML mock up for a site and the nav doesnt appear at all when viewed in IE but works fine in Firefox, and I cant figure out why.

can anyone shed any light?

I'm new to this web design lark so go easy on me.

Thanks

the site is www.thenetbookstore.com
 
W

WebDivvy

New Member
Hi thanks for the responses. Here is the markup and CSS being used for the nav menu and the hover effect. I am not using a CSS reset as you mentioned, I am still learning hence me making noobie mistakes like not using a CSS reset. Can anyone give a simple explanation of how to implement CSS reset in this instance?



<ul id="menu">
<li class="home">
<a href="default.htm">
<span class="invisible">Home</span>
</a>
</li>
<li class="netbooks">
<a href="asuseee.htm">
<span class="invisible">NetBooks</span>
</a>
</li>
<li class="accessories">
<a href="shop_accessories.html">
<span class="invisible">Accessories</span>
</a>
</li>
<li class="reviews">
<a href="reviews.html">
<span class="invisible">Company</span>
</a>
</li>
<li class="contact">
<a href="contact.html">
<span class="invisible">Contact</span>
</a>
</li>
</ul>:confused:


a {
color:#343434;
text-decoration:none;
}

ul#menu {
float:right;
list-style-type:none;
margin:10px 30px 50px 0;
padding:0;


}


#menu li {
float:left;
height:17px;
line-height:17px;
margin:0;
padding:0;
}
#menu li a {
margin:0;
padding:0;
text-decoration:none;
}
#menu li.home a {
background:transparent url(../images/navigation_bg.png) no-repeat scroll 0 0;
display:block;
height:14px;
margin:0 20px 0 0;
width:50px;
}

#menu li.home a:hover {
background:transparent url(../images/navigation_bg.png) no-repeat scroll 0 -22px;
}

#menu li.netbooks a {
background:transparent url(../images/navigation_bg.png)no-repeat scroll -55px 0;
display:block;
height:14px;
margin:0 20px 0 0;
width:80px;
}

#menu li.netbooks a:hover {
background:transparent url(../images/navigation_bg.png) no-repeat scroll -55px -22px;
}

#menu li.accessories a {
background:transparent url(../images/navigation_bg.png)no-repeat scroll -137px 0;
display:block;
height:14px;
margin:0 20px 0 0;
width:100px;
}

#menu li.accessories a:hover {
background:transparent url(../images/navigation_bg.png) no-repeat scroll -137px -22px;
}

#menu li.reviews a {
background:transparent url(../images/navigation_bg.png)no-repeat scroll -237px 0;
display:block;
height:14px;
margin:0 20px 0 0;
width:70px;
}

#menu li.reviews a:hover {
background:transparent url(../images/navigation_bg.png) no-repeat scroll -237px -22px;
}

#menu li.contact a {
background:transparent url(../images/navigation_bg.png)no-repeat scroll -307px 0;
display:block;
height:14px;
margin:0 20px 0 0;
width:70px;
}

#menu li.contact a:hover {
background:transparent url(../images/navigation_bg.png) no-repeat scroll -307px -22px;
}
 
adamblan

adamblan

New Member
What does your class="invisible" do ? I saw the html, but not the css...
Also, avoid using images for navigation (SEO + accessability issues)
 
W

WebDivvy

New Member
Hi, the invisible class just sets the text in the nav i.e home etc between the <span> tag to hidden as I am using an image for the nav.

visibility:hidden;

From what I have read this method should not have any adverse effect on SEO, I don't know about accessibility however.

Assuming we are not concerned with either of these any idea as to why IE would just refuse to display the image?

It not the CSS class that's causing the image to disappear as I have tested without this class and the image still doesn't show up, it displays fine in FF it's just IE that causes the problems, no surprises there.
 
A

adx

New Member
If the images don't appear or look funny in IE 6 it's because you're using .PNG files.
They look good and all but IE doesn't like transparent PNG files, just found that out
myself actually. Change them all to GIF's! :)

Edit: The Netbook store.. 'cause size matters! Ha, didn't see that :)
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Is there a reason why you are using a list to build the navigation bar? Have you tried either a table or divs? Maybe that might might help.

So you have tried to just insert the images with no CSS and they still do not display in IE? I can only see your "Home" image in IE 7, but in Chrome they show up fine.

I agree with adx, dont use transparent pngs, they have issues in IE. You can get the same result with gifs for that type of image. Ideally text would be best. Trebuchet is a similar font to what you have there?
 
conor

conor

New Member
why use images? i'm sure this effect could be created with CSS.

also the hp_netbook-thm.png is way to big - reduce the size a bit.
 
You must log in or register to reply here.
Top