Results 1 to 4 of 4

Thread: background color bug in FF3 with fixed-fluid layout.

  1. #1
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default background color bug in FF3 with fixed-fluid layout.

    1) Script Title: CSS Liquid Layout #2.1- (Fixed-Fluid)

    2) Script URL (on DD): http://www.dynamicdrive.com/style/la...1-fixed-fluid/

    3) Describe problem:

    My problem only exists in FireFox 3. The background color of the left column displays the same as the background color of the main content column. In FF2 and IE7 everything displays alright.

    Site link for example: http://www.unfocused.org/combined

    If you register (free) you can see change layout colors and see that the issue is on all the layout color themes. If I need to provide the code Im using to get help thats fine, just let me know. I dont know what else to try, Ive gone through everything and dont see what is making FF3 act like this.

    Thanks in advance for your help.

    Sarah

  2. #2
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    As an alternative to registering you can log in with the username: test and the password: test to take a look.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Technically speaking, there is often no height:100% style as you have set for #outer in your stylesheet. When this is the case it is because 100% height would mean 100% of the height of the parent element, which itself might not have any height. I'm not sure if this is a bug in this case or just other browsers not following the specification correctly. In any case, Opera 9.5, which is considered a pretty standards compliant browser, shows it the same way as FF 3. Using FF 3's developer tools, I was able to see the #aaaaaa color background if I set an actual height, like 600px instead of 100%. I was also able to see the #aaaaaa background without changing the height by inserting a clear:left division here:

    Code:
     . . . s-blue.png" alt="Valid CSS!" title="Valid CSS!">
    </a>
    </p>
        </div>
      
      </div>
      <div id="clearfooterleft"></div>
      </div>
      </div>
      <div style="clear:left;"></div>
      </div>
      </div>
      </div>
      <div id="footer">
      <div id="subf . . .
    Which is just before the closing </div> tag of the #outer division. What this does is allow the #outer division to assume the natural height of its content, much if not all of which is (presumed to be, since this sort of works) floated left. It is this use of float (if in fact it is used here) that is in part at issue. Technically a floated element has no layout height.

    Now, the best solution though seems to be to just (ignore all of the other suggestions I've made and) add the same % height to the container (#wrapper in this case):

    Code:
    #wrapper {
      display: table-cell; /*** For non-IE browsers ***/
      position: relative; /*** Let's be nice to IE ***/
    height:100%;
    }
    Assuming that is, that this doesn't mess it up in other browsers. It did get it closest to how it looks in IE 7 and FF 2.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help. Ive applied the fix and so far it seems to be working cross browser, at least for the ones I can test. I have a computer with IE 6 and FF2 and then I have another with FF3 and IE7. I checked the newest version of Safari on a co-workers computer and that seems to render alright as well.

    For being completely self taught on CSS I think Im doing ok.

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
  •