Remortgages - Meeting Rooms - Repair Bad Credit - Favorite - Facebook Proxy
PDA

View Full Version : Height/background problem i firefox

RetepSlein
Mar 8th 2005, 8:39 am
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 ;)
J.D.
Mar 8th 2005, 9:23 am
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.
RetepSlein
Mar 8th 2005, 10:12 am
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
J.D.
Mar 8th 2005, 10:21 am
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.
Arnica
Mar 8th 2005, 10:28 am
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
J.D.
Mar 8th 2005, 10:41 am
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.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>Can you modify this to show how your suggestion will work? Thanks

J.D.
Arnica
Mar 8th 2005, 11:12 am
<div style="border: 1px solid red; height: 10px;">
<div style="float: left; border: 1px solid blue; width: 100px;">1234567890 1234567890 1234567890</div>

<div style="clear:both"></div>

</div>

That's effectively it - you can then dispense with height attribute of the containing <div>

Mick
RetepSlein
Mar 8th 2005, 11:29 am
Thanks !!!

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

I appreciate your fast and good help.

Sinc.

Niels Peter
J.D.
Mar 8th 2005, 1:18 pm
That's effectively itThat'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.
Arnica
Mar 8th 2005, 3:00 pm
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
J.D.
Mar 8th 2005, 3:50 pm
But even using the empty <div> the markup is still 'clean'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.

(read good for customers & good for SEs)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.