1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Height/background problem i firefox

Discussion in 'CSS' started by RetepSlein, Mar 8, 2005.

0
  1. #1
    Hi.

    I've designed a small page for my hall of residence at http://luxhoej.dk/index2.php, but I've got a problem about correct background showing (or rather; non-showing) in firefox -- it displays properly in ie. My goal is, that - as in msie - the background should be off-white in the text area surrounded my dark blue.

    Is it the height? Or doesn't is seems like the container "storboks" is closed just after heading? (Or is it just me glaring blindly at some fools mistake)

    Please help me,

    Niels Peter

    BTW: I know about the split css -- just a relic from former pages ;)
     
    RetepSlein, Mar 8, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The storboks div is a normal div (non-float, etc) and its height is not affected by the presence of floating children, which is what sidebar and midt are. As a result, the white color that you set for storboks is not visible because its height is too small.

    Once you set sidebar's height to 100%, you will be up for another surprise - FF and IE treat <body> height differently.

    J.D.
     
    J.D., Mar 8, 2005 IP
  3. RetepSlein

    RetepSlein Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I've tried height: 100%; in both sidebar and boks but it doesn't change anything --- I've left them 'on' now.

    Is there a hack - or should I try another positioning scheme?

    Thanks for the fast response.

    Niels Peter
     
    RetepSlein, Mar 8, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Setting storboks's height to 100% should extend this div to the bottom edge of <body>, which in FF will not cover the entire content of your page (this is the surprise I mentioned). Set background storboks's to, say, red to see the effect. If you don't see this happen, the style didn't apply somehow (CSS order, etc). Once you work this out, you might be able (depending on your content) to work things out setting min-height for this div (keep in mind, it doesn't work in IE).

    Use a CSS-formatted table to lay out your page. It's less hassle and you will get your HTML that looks the same in all browsers.

    J.D.
     
    J.D., Mar 8, 2005 IP
  5. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Place an element below all the elements nested in 'storboks' that you want the background to appear behind and set its css with 'clear:both'. This will force the expansion of the storboks <div> under the floated elements.

    Mick
     
    Arnica, Mar 8, 2005 IP
    J.D. likes this.
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Here's a simple version of what he has:

    <div style="border: 1px solid red; height: 10px;">
<div style="float: left; border: 1px solid blue; width: 100px;">1234567890 1234567890 1234567890</div>
</div>
    Code (markup):
    Can you modify this to show how your suggestion will work? Thanks

    J.D.
     
    J.D., Mar 8, 2005 IP
  7. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7 
    <div style="border: 1px solid red; height: 10px;">
<div style="float: left; border: 1px solid blue; width: 100px;">1234567890 1234567890 1234567890</div>
 
[color=red]<div style="clear:both"></div>[/color]
 
</div>
    Code (markup):
    That's effectively it - you can then dispense with height attribute of the containing <div>

    Mick
     
    Arnica, Mar 8, 2005 IP
  8. RetepSlein

    RetepSlein Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks !!!

    <div style="clear:both"></div> worked perfect.

    I appreciate your fast and good help.

    Sinc.

    Niels Peter
     
    RetepSlein, Mar 8, 2005 IP
  9. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #9
    That's a neat trick. I usually avoid adding dummy HTML elements just to stretch outer div's and didn't think of fixing it this way :) It does work nicely for fixed-width layouts with box-style menus.

    J.D.
     
    J.D., Mar 8, 2005 IP
  10. Arnica

    Arnica Peon

    Messages:
    320
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #10
    J.D.

    I agree about using dummy elements. Mostly when using this technique I throw a breadcrumb trail or copyright info into the <div> to give it purpose. But even using the empty <div> the markup is still 'clean' (read good for customers & good for SEs)

    Mick
     
    Arnica, Mar 8, 2005 IP
  11. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I agree... as long as content width is fixed and there's enough content in either the menu or the content div to cover most of the screen.

    Makes no difference for SE's, but as far as customers go, I tend to agree that div's are more in demand :)

    J.D.
     
    J.D., Mar 8, 2005 IP