Background image does not display in DIV in Firefox

This is working in IE but not Firefox. What can I do to make it work in Firefox?

Here is the HTML:

<div id="tabRowContainer">
<span id="leftCorner"></span>
<span id="leftOn"></span>
<span id="tabOn"></span>
<span id="rightOn"></span>
<span id="bgBar"></span>
<span id="rightCorner"></span>
</div>

And here is the CSS:

#tabRowContainer {width: 790px; height:40px;}
#leftCorner {background-image:url(../images/leftCorner.gif); width: 4px; height: 40px;}
#leftOn {background-image:url(../images/leftOn.gif);  width: 5px; height: 40px;}
#tabOn {background-image:url(../images/tabOn.gif); width: 115px; height: 40px;}
#rightOn {background-image:url(../images/rightOn.gif);  width: 5px; height: 40px;}
#bgBar {background-image:url(../images/bgBar.gif);  width: 652px; height: 40px;}
#rightCorner {background-image:url(../images/rightCorner.gif);  width: 9px; height: 40px;}


mariitaAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
> GrandSchtroumpf usually knows more about that though.
=)

background images work fine on inline elements.
however, width and height don't.  non-floated inline elements have line-height, margin and padding.
if you want to fix the width of your elements, then you'll need to float them.
0
 
GrandSchtroumpfCommented:
hard to say...  can you post a link to your page?
0
 
mshogrenCommented:
I don't think I can make that work in IE either if I declare a DOCTYPE for my HTML.  I think you need to make the <span> tags <div> tags.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
mariitaAuthor Commented:
If I change the SPAN tags to DIV tags, then the images display in Firefox, but then the DIV elements are no longer on the same line. Is there a way to make the DIV elements appear on the same line, as if they were TD tags within a table row?
0
 
mshogrenCommented:
You can add this to the style of each div if you wish it to appear inline.

display: inline;
0
 
mshogrenCommented:
However, I suspect that inline elements do not support the background image style.  GrandSchtroumpf usually knows more about that though.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.