Question

I have a simple css image rollover. I have validated the code, and it works exactly like it is supposed to on Firefox and Chrome, however it was pointed out that it’s not working in Safari, Opera, or any Mac browsers. I have a very similar rollover further down the page that works just fine. I’ve gone over the code several times looking for a typo or anything to explain what’s going on, but I’m at a loss.

The actual site can be found here: (very much under construction)

http://www.printyourpowerpoint.com/dev2/index.php

Here is the HTML:

    <div id='header'>
        <div class='header-first' id='header-logo'>
            <a href='index.php'><img src='images/trans.gif' alt='Print Your PowerPoint Home'/></a>
        </div>
        <div class='header-item' id='header-why'>
            <a href='why-us.php'><img src='images/trans.gif' alt='Why Print Your PowerPoint?'/></a>
        </div>
        <div class='header-item' id='header-products'>
            <a href='products.php'>
                <img src='images/trans.gif' alt='Print Your PowerPoint Products'/>
            </a>
        </div>
        <div class='header-item' id='header-about'>
            <a href='about.php'>
                <img src='images/trans.gif' alt='About Print Your PowerPoint?'/>
            </a>
        </div>
        <div class='header-item' id='header-cart'>
            <a href='cart.php'>
                <img src='images/trans.gif' alt='View Cart'/>
            </a>
        </div>
        <div class='header-right'>
            <div class='header-item' id='header-create'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='Create Account'/>
                </a>
            </div>
            <div class='header-item' id='header-account'>
                <a href='cart.php'>
                    <img src='images/trans.gif' alt='My Account'/>
                </a>
            </div>
        </div>
    </div>

Here is the CSS:

div {
float: left;
}
#header {
width: 900px;
height: 85px;
}
.header-first {
    background: top center no-repeat;
    height: 70px;
    margin: 7px 15px 7px 56px;
    }
.header-item {
    background: top center no-repeat;
    height: 30px;
    width: 101px;
    margin: 45px 15px 7px 15px;
    }
.header-item2 {
    margin: 0px 20px;
    width: 136px;
    height: 132px;
    background: top center no-repeat;
    }
.header-right {
    float: right;
    margin-top: 46px;
    height: 30px;
    }
.header-item img {
    height: 30px;
    width: 101px;
    }
.header-first img {
    height: 70px;
    }
.header-item:hover, .header-first:hover {
    background: bottom center no-repeat;
    }
#header .header-right .header-item {
    margin:0px;
    }

#header-logo {
    background-image: url('images/print-your-powerpoint-logo-top.png');
    }
    #header-logo, #header-logo img {
        width: 82px;
        }

#header-why {
    background-image: url('images/header-why-us.png');
    }
    #header-why, #header-why img {
        width: 101px;
        }

#header-products {
    background-image: url('images/header-products.png');
    }
    #header-products, #header-products img {
        width: 111px;
        }

#header-about {
    background-image: url('images/header-about.png');
    }
    #header-about, #header-about img {
        width: 89px;
        }

#header-cart {
    background-image: url('images/header-cart.png');
    }
    #header-cart, #header-cart img {
        width: 62px;
        }

#header-create {
    background-image: url('images/header-create.png');
    }
    #header-create, #header-create img {
        width: 107px;
        }

#header-account {
    background-image: url('images/header-my-account.png');
    border-left: 1px solid #C2B59B;
    }
    #header-account, #header-account img {
        width: 107px;
        }

Answer 1

For starters, the XHTML doc type you’ve chosen might throw off the Mac browsers…just a hunch, but you might want to research that separately (and then adjust your HTML correspondingly).

The header images aren’t showing up in Chrome on the Mac because the actual image size ends up being 4px x 4px. The images are in an A tag within a DIV, and the A tag by itself doesn’t act as a container, which explains why the images won’t get displayed.

However, unless you’re doing some JavaScript loading of images AFTER or WHILE the page is loading, all that’s currently showing is the 4px x 4px trans.gif (even when I make the A tag a 100px x 100px block container).

Looking at the JavaScript Console and the Resources that get downloaded, none of your header images are actually getting downloaded. You can test that by looking up that information in the Resources or Network tab of the console.

And when I checked your CSS file, there was no reference to any of those images you showed me in the THIS IS WHAT IT SHOULD LOOK LIKE screenshot. I’ll double-check the page from home when I’m on my WIndows box, but as far as I can tell from here, the images simply aren’t available.