Sliding Door Background Image misplaced: FireFox

Discussion in 'CSS' started by sydneyk, Mar 26, 2009.

0
  1. #1
    I'm using the sliding doors technique to present a tab, in which the number of lines (and type) of data will vary as will the width.

    I've also adjusted the technique to apply a rounded corner to the left side of the tab by using a negative margin. The right background image presents itself in the wrong position of the div in FireFox. It works well in IE.

    The background-color of the page will change a lot, thus the necessity of the transparent rounded corners on the image.

    Here is the CSS

    #tabandbuttons{
    position: relative;
    padding: 10px 10px 0px 20px;
    width: 100%;
    float: left;
    background-color: inherit;
    }

    #whitetab{
    position: relative;
    top: 1px;
    background-repeat: no-repeat;
    background-position: top right;
    background-image: url(images/rwhitetab.gif);
    white-space: nowrap;
    position: relative;
    float: left;
    }

    #lwhitetab{
    width: 17px;
    background-color: inherit;
    background-repeat: no-repeat;
    background-image: url(images/lwhitetab.gif);
    float: left;
    background-color: inherit;
    display: block;
    padding: 0 2em;
    font-height: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: -10px;
    z-index: 100;
    position: relative;
    }

    Here is the html

    <div id="tabandbuttons" >
    <div id="whitetab" >
    <div id = "lwhitetab">
    textorinputfield<br>
    textorinputfield<br>
    textorinputfield
    </div>
    </div>
    </div>

    The image (rwhitetab) isn't top right as stated but presents itself to just to the right of the left rounded corner image and only about 17px of the image. The left image is 17px. The right round corner is the varying width image depending upon the width of the data.

    It works fine in IE>

    I'm not experiences at asking questions of the forums, so please excuse any thing I may have left out and I'll fill you in as you ask questions. Thanks!
     
    sydneyk, Mar 26, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    That it works in IE means little since you can't trust IE to do anything correctly. It must work in a modern browser first, then we worry about getting IE into line.

    The markup you show isn't enough to judge. Is this online? Can you supply a link? Otherwise, we need the complete markup including the doctype you are using.
     
    drhowarddrfine, Mar 26, 2009 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I believe you have completely overthought your sliding doors... There are only two images, so you only need two tags, not three. You are declaring a width and padding at the same time... 100% width plus 30px side padding == 100% width plus 30px side padding - the only reason that would work in IE is if you either lack a doctype or have an XML prolog or other code before the doctype, throwing IE into quirks mode... on top of which there is no reason to be saying float:left on width:100% unless you are trying to wrap floats, and overflow:hidden will do a better job of that on standards compliant browsers.

    ... and frankly if those are buttons/tabs, that should probably be a list - unless of course they are actually 'inputs' as in the form element, in which case that whole thing should be a form/fieldset.

    The multiple redundant CSS properties aren't helping you much... and that your looking for transparancy while NESTING your elements isn't going to work either.
     
    deathshadow, Mar 28, 2009 IP