Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2029
  • Last Modified:

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>

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;}

  • 3
  • 2
1 Solution
hard to say...  can you post a link to your page?
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.
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?
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

You can add this to the style of each div if you wish it to appear inline.

display: inline;
However, I suspect that inline elements do not support the background image style.  GrandSchtroumpf usually knows more about that though.
> 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.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now