List style / rollover image navigation disappears in IE on the Mac

[eskymo]

Hi all, I wondered whether anyone could give me a helping hand here. I've created navigation for a site I'm working on from one image that contains all the on and off states for every button. I've then created styles for each button that change the position of the image to show the correct part of the navigation and also move on rollover.

I've tested this in the following browsers and it works fine:

PC - mozilla, opera, firefox, netscape, explorer [latest versions of all]
MAC - safari, opera, firefox, mozilla, netscape, explorer [latest versions of all]

And it works fine in all except explorer on the mac - suprise suprise. In this browser the navigation disappears completely and all you see is a white empty box where it should be.

Here is a link to the site so far:

http://www.heriot-toun.co.uk/studio/index.php

and here is the html code:

Code: Select all

<div id="navcontainer">
                <ul id="navlist">
                    <li><a href="/studio/index.php" class="studio_active" title="The Studio">The Studio</a></li>
                    <li><a href="/projects/index.php" class="projects" title="Current Projects">Current Projects</a></li>
                    <li><a href="/gettinghere/index.php" class="getting" title="Getting Here">Getting Here</a></li>
                    <li><a href="/booking/index.php" class="booking" title="Booking">Booking</a></li>
                    <li><a href="/archive/index.php" class="archive" title="Archive">Archive</a></li>
                </ul>
            </div>

and here is the CSS:

Code: Select all

#navlist {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* STUDIO LINK ################ */
.studio {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) 0px 0px no-repeat;
    display: block;
}
.studio:hover {
    background-position: -170px 0px;
}
.studio_active {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) -170px 0px no-repeat;
    display: block;
}

/* PROJECTS LINK ############## */
.projects {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) 0px -30px no-repeat;
    display: block;
}
.projects:hover {
    background-position: -170px -30px;
}
.projects_active {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) -170px -30px no-repeat;
    display: block;
}

/* GETTING LINK ############### */
.getting {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) 0px -60px no-repeat;
    display: block;
}
.getting:hover {
    background-position: -170px -60px;
}
.getting_active {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) -170px -60px no-repeat;
    display: block;
}

/* BOOKING LINK ############### */
.booking {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) 0px -90px no-repeat;
    display: block;
}
.booking:hover {
    background-position: -170px -90px;
}
.booking_active {
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) -170px -90px no-repeat;
    display: block;
}

/* ARCHIVE LINK ############### */
.archive{
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) 0px -120px no-repeat;
    display: block;
}
.archive:hover{
    background-position: -170px -120px;
}
.archive_active{
    height: 30px;
    width: 170px;
    text-indent: -10000px;
    overflow: hidden;
    background: url(assets/site_nav.gif) -170px -120px no-repeat;
    display: block;
}

Anyone got any ideas why this wouldn't work in Explorer on the Mac?

[herkalees]

I've read about this method and I commend you for doing it; it's so very nice. On the flip side, I've never done it myself. I can only imagine (but I may be wrong) that the text-indent and the overflow properties aren't needed.

Well, overflow maybe, but I would think that the height property is enough to ensure the <li>'s height, regardless of how high the background graphic is?

You already may know more than me about this method, but I'd start by removing both/one of those above mentioned properties.

Otherwise... IE for Mac is one of the few browsers I never really concern myself with. Most Mac users know 'whats up'

[eskymo]

thanks for the comments - I'll give that a go. You're wrong though, I don't know much about this. it's the first time i've tried to implement this type of navigation and had a complete nightmare following tutorials online as I could never get them to work, hence starting from scratch and doing it all myself - my version is so long winded compared to others, but it works for me...well in everything but IE on the Mac.

I agree with you though with your comment on this browser and I normally don't bother myself with it, it's just this time a round I know several folk will be using it out of ignorance for something better - maybe this is the site to educate them to move on and use safari or firefox instead.

[eskymo]

Hi there

I removed the overflow properties and it works in all the browsers now. the only issue I have now is that a line appears to the left of the active button and I guess this is the underline in the rollover text for the link which is hidden by using the text-indent: -10000px;

I added text-decoration: none; to all the styles, but it still appears on the button that is active, so I think I'm stuck with it, but could possibly add a background color and text color that is the same colour as the page background.

Thanks for your help - it's worked wonders!

[eskymo]

Hi there

I've fixed it by creating these additional styles for the link states when they are within #navlist

Code: Select all

#navlist a:link, #navlist a:visited {
    color: #f2f2f2;
    background-color: #f2f2f2;
    text-decoration: none;
}

#navlist a:hover, #navlist a:active {
    text-decoration: none;
    background-color: #f2f2f2;
    color: #f2f2f2;
}

as adding the background colour and text colour to the individual styles for each nav had no effect.

Yippee!

I can go and relax for, mmm, what's left of the evening...

[herkalees]

Hooray, I sorta helped!