SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Threaded View

  1. #1
    SitePoint Enthusiast S.Sameer's Avatar
    Join Date
    Sep 2007
    Location
    UP, India.
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double div height in Firefox (csswiz please look!)

    I have a page where there is content in a div which is floating inside a container which is set to repeat it's background as the content expands vertically. IE displays this fine and ends repeating the background just where the content ends, but Firefox is expanding the background way further down vertically and it seems as if it's giving a "double" height to the container. So if there's content upto 50px in height, it'd expand it's background upto 100px. Here is the code with explanation (comments) and screenshots:

    Code CSS:
    div.content { /* This is the main container with the repeating background */
    background-image: url('images/body_bg_content.jpg');
    background-repeat: repeat-y;
    position: relative;
    top: -31px; 
    #top: -15px; /* FOR IE7 */
    padding: 15px;
    max-width: 910px; display: table;
    background-color: #fff;
    } 
     
    div.thecontent { /* This is the content div floating inside the container. This has a left dashed divider which also repeats along till the height of the content. The black area with a left dashed vertical divider in the screenshots is this. */
    float: left; background-image: url('images/divider.jpg'); background-repeat: repeat-y; margin-left: 10px; position: relative; top: -260px; /* FOR IE7 */ 
    #top: -10px; left: 0px; min-width: 615px; max-width: 615px; background-color: #fff;
    font: 12px verdana,helvetica,arial,sans-serif; color: #333; line-height: 16px;
    }

    The HTML is nothing complex and simply put it would be as follows:

    Code HTML4Strict:
    <div class="content">
    &nbsp;
    Left vertical navigation and some pre-content stuff
          <div class="thecontent">
              Content appears here. This has a background with the dashed divider,
              to separate it from the left navigation. The background of <content> 
              div also runs along till the point where this div ends. But in firefox it 
              ends after leaving a lot of extra space down, as illustrated in the
              screenshots.
          </div>
    </div>

    Screenshots: See attachments. (Appears correct in IE, wrong in Firefox)
    Attached Images Attached Images


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
  •