Background image does not display in DIV in Firefox

Posted on 2006-05-24
Last Modified: 2006-11-18
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;}

Question by:mariita
    LVL 30

    Expert Comment

    hard to say...  can you post a link to your page?
    LVL 15

    Expert Comment

    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.

    Author Comment

    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?
    LVL 15

    Expert Comment

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

    display: inline;
    LVL 15

    Expert Comment

    However, I suspect that inline elements do not support the background image style.  GrandSchtroumpf usually knows more about that though.
    LVL 30

    Accepted Solution

    > 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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now