SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Firefox not filling background properly....

    I have 3 blocks next to each other on one page.

    The first block is a fixed size, the second one has a width in em's so will grow with text sizing. The third one I want to fill to the right of the page (whatever the width). It has a background image that is repeated on the x axis.

    It all shows great in IE, but for some reason Firefox repeats the background image all the way, but then stops 12 pixels from the end of the block. Its always 12 pixels, regarldless of window size.

    I have gone through the css coding, and looked for anything with 12px in it, but nothing.

    I have tried removing various aspects of the surrounding code but again nothing.

    Any ideas why its not filling till the end?

    #bluetabs2 is the div with the background image.

    Attached are what it does in Firefox (a the right of the line it stops short) and the other pic is how the blocks are next to each other.

    Code:

    #tableft {
    display: block;
    float: left;
    position: relative;
    top: 0;
    left: -1;
    }

    * html #bluetabtext{left: -3px;}

    #bluetabtext {
    height: 1.5em;
    position: relative;
    top: 3px;
    left: 1px;
    padding-left: 5px;
    color: #3366FF;
    font-weight: bold;
    background: #FFFFFF url(../images/tab_grad_bg.gif) no-repeat;
    }


    #bluetabtext a:link {
    text-decoration: none;
    color: #3366FF;
    }

    #bluetabtext a:visited {
    text-decoration: none;
    color: #3366FF;
    }

    #bluetabtext a:hover {
    text-decoration : underline;
    color : #3366FF;
    }

    #bluetabtext a:active {
    text-decoration: none;
    color: #3366FF;
    }

    * html #bluetabsnews{margin-right:-3px}

    #bluetabsnews {
    display: block;
    float: left;
    display:inline;
    width: 9.3em;
    height: 1.5em;
    color: #3366FF;
    font-weight: bold;
    background: #FFFFFF url(../images/tab_vertical_bg.gif) repeat-x;
    border-left: 1px solid #777777;
    }

    * html #bluetabsnewsside{margin-right:-3px}

    #bluetabsnewsside {
    display: block;
    float: left;
    height: 1.5em;
    width: 1.5em;
    background: #FFFFFF url(../images/tab_side.gif) no-repeat;
    }

    #bluetabs2 {
    display: block;
    height: 1.5em;
    color: #000000;
    font-weight: bold;
    background: #FFFFFF url(../images/tab_bg.gif) repeat-x;
    background-position: 100% 100% 100% 100%;
    width: 100%;

    }

    #greybox2 {
    padding: 5px;
    border-left: 1px solid #777777;
    border-right: 1px solid #777777;
    border-bottom: 1px solid #777777;
    width: 100%;
    background: #FFFFFF url(../images/gradient_bg.gif) repeat-y;
    }

    Any help on this would be greatly appriciated!

    Cheers.
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas?

    Any help would be greatly appriciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •