Putting navigation list on top of background image

[Kurt]

I'm converting my table layout to all CSS, and have run into a problem getting my navigation list to go on top of a background image.

It currently looks like this:

http://img146.imageshack.us/img146/816/nav1xi3.jpg

I need it to look like this:

http://img146.imageshack.us/img146/2690/nav2sh8.jpg

The HTML:

Code: Select all

 
<div id="navigation">
     <img src="images/global/index_03.gif" width="800" height="25" /> 
        <ul>
         <li class="last"><a href="contact.html">Contact</a></li>
         <li><a href="thearts.html">The Arts</a></li>    
         <li><a href="forum.html">Forum</a></li>
         etc.
       </ul>       
    </div>

The CSS:

Code: Select all

 
#navigation {
 margin: 0;
 padding-top: 0;
 padding-right: 49px;
 padding-bottom: 0;
 padding-left: 0;
 background-repeat: no-repeat;
 background-image: url(images/global/index_03.gif); 
 }
 
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0; 
}
 
#navigation ul li {
 margin: 0;
 padding: 0;
 display: inline;
 float: right;
}
 
#navigation ul li a {
 text-transform: uppercase;
 padding: 0 10px;
 border-right: 1px solid #fff;
 color: #fff;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 text-decoration: none;
 font-weight: bold;
}

[MikeHopley]

Er...

Why do you have an <img> with the same image as you are using for a CSS background?

The point of a CSS background is that you don't need the <img>.

[Kurt]

Originally Posted by MikeHopley

Er...

Why do you have an <img> with the same image as you are using for a CSS background?

The point of a CSS background is that you don't need the <img>.

I asked myself that same question, but when I removed the img from the HTML (but kept it in the CSS), it disappeared completely in Design view.

[alexgeek]

Originally Posted by Kurt

I asked myself that same question, but when I removed the img from the HTML (but kept it in the CSS), it disappeared completely in Design view.

Just in design view?
what about in your browser?

[Kurt]

Originally Posted by alexgeek

Just in design view?
what about in your browser?

Got it working - I specified the height and width of the background .gif as part of the CSS rule and it's now showing.

[Marc]

Yes, i was about to say that. When you have a BG in CSS you need to set widths and heights to make it visible.