6 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Can anyone tell me how to maintain my background div layer when using nested floating layers inside the background layer? IE 7 renders it as it should but in FF the background dissapears.

Thanks for advise...

Triumph (not verified)
Anonymous's picture
Guru

Some code would be nice but

Some code would be nice but in lieu of that I'll offer a guess and say you should clear your floats.

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

OK - HERE'S THE PROBLEM

PLEASE HELP... HERE'S THE PROBLEM CODE. I DID CLEAR MY FLOATS BEFORE BUT I TOOK THEM OUT AS IT WAS NOT WORKING PROPERLY. ALSO, SEE ATTACHED FOR IMAGES INCLUDED.

SAMPLE

* { margin: 0; padding: 0 }
BODY {
font-family:Tahoma, Geneva, Helvetica;
background:#AD7F0F url(images/bg.jpg) top repeat-x;
font-size:.7em;
margin:0 auto;
color:#6B6B5E;
}
#joinUs { background:url(images/joinus-bg.gif) no-repeat; width:313px; height:139px }
#bodyBg { background:#fff; padding:1px 3px 10px 3px; width:694px; border-left:1px solid #3F1910; border-right:1px solid #3F1910 }
#wrapper {
width:702px;
height:100%;
margin:0 auto;
}
.leftSide { float:left; width:378px; }
.rightSide { float:right; width:313px; }

Welcome
Enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit nisl ut aliquip ex ea consequat. Duis autem vel eum iriure dolor in in vulputate velit nibh euismod tincidunt ut laoreet dolore. more »

Our Mission imperdiet doming id quod mazim placerat sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Esse molestie conseq uat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandtum zzril delenit auge duis dolore te feugait nulla facilisi.

JOIN US

AttachmentSize
joinus-bg.gif 4.51 KB
home-banner.jpg 59.55 KB
Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Hello smk2007

:rolleyes: :rolleyes: :rolleyes:

had study your problem and it's not a big deal.Simply U put some code on

update your code
#bodyBg {overflow:hidden;}

:thumbsup: :thumbsup:

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

THANKS!

That worked perfect! Thank you so much! How did you figure this one out? I've tried for the last 5 days now...

Thanks Again!

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Common Problem of FF

:rolleyes: :rolleyes: :rolleyes:
Because it's the common problem in FF. So it's not the big deal haaaaaa.
Keep on going smk2007

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

smk2007 wrote:That worked

smk2007 wrote:
That worked perfect! Thank you so much! How did you figure this one out? I've tried for the last 5 days now...

As Razer said, this is the top or second to top question asked on the site and no one ever seems to understand how floats are supposed to work before they start using them (including me). Add to that the fact that IE treats floats wrongly and people who use IE to check their results get the impression that this is how floats are supposed to work.

It isn't. Elements are not supposed to expand to contain their floated child elements. That's how CSS was written, and in this case for good reasons.

I suggest a visit to this site, and a careful read through it so you won't be caught by this again.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.