SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Anchor images missing in IE8

    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.

    HTML Code:
    <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>
    Code:
    .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. #2
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

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

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This might be a good starting point. In general, getting familiar with "Save for Web..." in Photoshop is a good idea.
    http://sixrevisions.com/web_design/c...mages-for-web/
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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 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

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •