9 replies [Last post]
James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

I'm at the end of my tether with this problem. I started browser testing today and this one issue has plagued my whole day.

I'm using an image replaced navigation to control a slider which views perfectly in firefox and Safari but as soon as it comes in contact with IE8< the background images do not appear. When I change the text-indent to 0 the text anchors appear in the correct position so I'm thinking it's just some sort of image referencing issue?! Maybe it's an issue with Adobe Broswerlab as I'm not running IE on my Mac, I'm working off screen grabs.

Any help would be most appreciated.

http://www.zoost.ie/

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

It might help if I also post

It might help if I also post the code for this nav:

<ul class="navigation">
 <li class="welcome"><a href="#welcome">Welcome</a></li>
 <li class="print"><a href="#print">Print</a></li>
 <li class="web"><a href="#web">Web</a></li>
 <li class="branding"><a href="#branding">Branding</a></li>
</ul>

and the CSS:

ul.navigation {
    list-style: none;
    float:left;
    padding: 0;
    width:940px;
    height: 45px;
    margin: 0 0 20px 0;
	/* display: inline; */
}
 
ul.navigation li {
    display: inline;
    overflow: hidden;
 
}
 
ul.navigation li a {
	display: inline-block;
    float: left;
    height: 45px;
    width: 940px;
    text-indent: -9999px;
    background: transparent url(../images/cta-nav.png)top left no-repeat;
}
 
 
ul.navigation li.welcome a { background-position: 0 0; width: 235px;}
ul.navigation li.print a { background-position: -235px 0; width: 235px;}
ul.navigation li.web a { background-position: -470px 0; width: 235px;}
ul.navigation li.branding a { background-position: -705px 0; width: 235px;}
 
ul.navigation li.welcome a:hover, ul.navigation li.welcome a.selected {background-position: 0 -45px;}
ul.navigation li.print a:hover, ul.navigation li.print a.selected {background-position: -235px -45px;}
ul.navigation li.web a:hover, ul.navigation li.web a.selected {background-position: -470px -45px;}
ul.navigation li.branding a:hover, ul.navigation li.branding a.selected {background-position: -705px -45px;}
 
 
ul.navigation a:focus {
    outline: none;
}

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

No help at all guys? I've

No help at all guys? I've tried pretty much every IE fix I've come across. Puzzled

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

James it's hard to help when

James it's hard to help when the code does not validate, you state valid markup in a footer link it's not though, first thing to learn is how to visually scan your browser side code to establish if it's well formed markup, there are however tools which will take the effort away.

Browser labs? not sure if that's an issue other than true testing is only accomplished in real browsers. Might be an idea to get some virtulisation running on your Mac to allow you to run something like the MS developers VM or at least it's virtual disk.

At the moment checking the site in IE6 shows a quite broken layout with a few issues over and above that mentioned in reference to the navigation.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

What the hell, I checked all

What the hell, I checked all pages the other evening and they came back valid. Thanks Hugo, will fix em up and get back on here.

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

I should have known getting

I should have known getting all those lovely green boxes with 'This document was successfully checked as..' the other evening was too good to be true. I've ironed out the homepage mark up errors but the navigation is still not displaying across ALL IE browsers.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would explore a different

I would explore a different approach to your image replacement, personally I don't use text-indent for two reasons, one, it used to cause the very issue your describing but in Opera and second if images are disabled you are left with no text. A better version is the absolute span holding the image which nestles in the anchor and is set to same dimension as the anchor or li item so that effectively masks over the top of the text.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

I think you're right Hugo,

I think you're right Hugo, might be time to try another method. What is that method called? Sounds like a modified Gilder/Levin method?!

I can't understand how my main navigation displays correctly but the slider one magically disappears in IE, damn you IE!

James R
James R's picture
Offline
Enthusiast
Dublin
Last seen: 9 years 20 weeks ago
Dublin
Timezone: GMT+1
Joined: 2007-10-19
Posts: 108
Points: 13

Stumbled across what was

Big smile

Stumbled across what was wrong while looking at another image replacement method:

background: transparent url(../images/cta-nav.png)<strong>top left</strong> no-repeat;

Seemed to be the culprit!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

didn't see that, could well

Big smile didn't see that, could well cause issues Shock

Quote:

Sounds like a modified Gilder/Levin method?!

Never remember the names given to these techniques I was sort of becoming familiar with these slightly before people decided to to give them attribution and names. but Gilder/Levine were the first as I recall to describe the techniques in one form or another.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me