Anchor images missing in IE8

HTML & CSS
1

I just finished my first web site, and background-images on some anchors (but not all) are missing in IE8 (I have not checked older versions of IE). Everything is fine in Chrome, Firefox, and Safari.

Check it out at jimkuipers dot com. Code excerpts are at the bottom of the post.

Above the blue-striped image should be four image-replaced anchors. The anchors themselves are there, and the cursor changes to a hand, and clicking leads to the right pages–it’s only the images that don’t show up.

The anchors at the bottom were written the same way, but they work fine in IE8. I have checked every thread that seemed relevant, and tried implementing the recommended fixes, but with no success. Thanks in advance for any assistance.


<body>
	<div class="container">
		<div class="logo">
			<a href="index.html">JIM KUIPERS</a>
		</div>
		<ul class="big_nav">
			<li id="nav_arch"><a href="architecture.html">ARCHITECTURE</a></li>
			<li id="nav_design"><a href="design.html">DESIGN</a></li>
			<li id="nav_photo"><a href="photography.html">PHOTOGRAPHY</a></li>
		</ul>
		<div id="blue_waves">
			<img src="images/blue waves.gif" width="1000px" height="600px" alt="blue waves"/>
		</div>
		<ul class="small_nav">
			<li id="nav_about"><a href="about.html">ABOUT</a></li>
			<li id="nav_contact"><a href="contact.html">CONTACT</a></li>
		</ul>
		<p id="copyright">© 2010 JIM KUIPERS</p>
	</div>
</body>



.logo a {
	float: left;
	width: 475px;
	height: 50px;
	background: url(images/logo.jpg) no-repeat;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
}

.logo a:hover {
	background-position: 0 -50px;
}
...
.big_nav {
	float: right;
	width: 525px;
	height: 25.5px;
	background: url(images/home_menu.jpg) no-repeat;
	margin-top: 24.5px;
	padding: 0;
}

.big_nav li {
	position: absolute;
}

.big_nav li a {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 25.5px;
	background: url(images/home_menu.jpg) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	font-size: 1%;
}

li#nav_arch a {
	left: 0;
	width: 210px;
	background-position: 0 0;
}

li#nav_design a {
	left: 210px;
	width: 105px;
	background-position: -210px 0;
}

li#nav_photo a {
	left: 315px;
	width: 210px;
	background-position: -315px 0;
}

li#nav_arch a:hover {
	background-position: 0 -25.5px;
}

li#nav_design a:hover {
	background-position: -210px -25.5px;
}

li#nav_photo a:hover {
	background-position: -315px -25.5px;
}
2

Yes you can say thanks to the person who provided you the information when it’s your thread and you’ve been given good information :slight_smile: We all like to be thanked.

You can’t say “thanks for sharing” when it’s not your thread and all your other replies are similar one liners or you are just trying to increase post count etc. We’re trying to stop spam not good manners :wink:

3

Thanks, I am pretty familiar with Photoshop, but I’d appreciate links to the appropriate tutorials.

4

It’s not a problem with your code, but the images themselves. You uploaded them in CMYK mode - I am surprised Firefox doesn’t choke on it. You have to convert the images to RGB mode and save them out as web-optimized images (gif or png for your monochromatic images), they shouldn’t be larger than 10-15kB (your logo.jpg currently is 185kB). Do you use Photoshop and do you know how to web-optimize images with Photoshop? If not, I can point you to some tutorials.

5

This might be a good starting point. In general, getting familiar with “Save for Web…” in Photoshop is a good idea.

6

Excellent.
Thanks, melissapbr, everything seems to be working properly now.

Paul O’B: That’s very sensible, thanks for the clarification. :slight_smile: