Picking up coding not so long ago I encounter the most weird problems. Most of them turn out to be my own fault. But now I've bumped in to one I can't figure out. In FF it looks fine but in Safari the image I want instead of the text in my horizontal navigation bar becomes completely invisible. In fact the whole link is gone.

Here's the html:

<div id="navbar">
    <ul id="navlist">
        <li id="active"  class="home"><a href="#" id="current"></a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

And here's the css related to this html.

#navbar {
    clear:both;
    width:1250px;
    margin-left:20px;
    height: 30px;
    background-image:url(../images/navbarbkgr.gif);  /*the green background of the whole navbar*/
    background-repeat:repeat-x;

}

#navbar ul
{
padding: .4em 0;
margin-left: -50px;
list-style-type: none;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #136c15;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
#navlist li.home a{
    width:45px;
    height:30px;
    padding-right:20px;
    background-image:url('../images/huisje.png'); /* the image that does't show in Safari*/
    background-repeat:no-repeat;
    color: #fff;
}

Please I'd like to hear from you what I'm missing here

Saskia

  • Can you supply a live URL? It's much easier for getting to the bottom of the problem. John Catterfeld over 8 years ago

3 answers

0
points
This was chosen as the best answer

Safari is probably ignoring the height and width that you manually specified because the element is set to display:inline. You might be able to work around this by setting the <li> elements to float:left and setting the links inside of them to display:block.

Adding text inside the link will also work, as you've found, but setting the color to transparent might not be the best option, because then it will look really funny if anyone visits your site with an old version of Internet Explorer that doesn't support transparent text. If you're going to go with text inside the link, I'd opt for a space (&nbsp;) instead.

[Edit:] Actually, if you want to use an image as a link on your page, the best practice is to put it into the html with an <img /> tag, rather than inserting it as a background with CSS. For text-only browsers (and maybe screen-readers for the visually impaired), a CSS-only image will just be an empty link with no clues about its purpose, while an image in the html with a descriptive alt text will be a usable link for everyone.

Answered over 8 years ago by Michael Martin-Smucker
0
points

I finally found a work around. Seems Safari needs some content in the link tag to show at all. So I entered one character and defined color:transparent in the CSS. I also tried negative text-indent, but that didn't have any effect either.

Site is not live yet, sorry

Answered over 8 years ago by Saskia Frankena
0
points

Thanks, Indeed an would be better. I'm going to try that out too. And experiment with your other suggestions. Didn't think of the &nbsp;. The float option I did try out but didn't work.``

Answered over 8 years ago by Saskia Frankena