OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

 

Weird CSS Behavior?

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Weird CSS Behavior?
Page: [1]
 
pcguy

 

Posts: 137
From: None
Status: offline

 
Weird CSS Behavior? - 3/12/2009 20:25:46   
Here's the site:
www.energyauditpeople.com

The XHTML and CSS passes validation.

I'm having a problem with the CSS, in particular, this block of code:

#contentContainer {
width:100%;
background-color:#767243;
padding-bottom:25px;
}

If you look at the site, it looks fine...but using browsershots.org, I've discovered some browsers view the site like this:
www.energyauditpeople.com/problems/bad1.png

If I add "overflow:hidden;" to that same block of code, it looks fine....see below

#contentContainer {
width:100%;
overflow:hidden;
background-color:#767243;
padding-bottom:25px;
}

I just don't understand why? It appears the #footer div is overflowing, but it's not, so the overflow:hidden tag shouldn't do anything in this case.....?

Can someone explain?

Thanks!
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: Weird CSS Behavior? - 3/13/2009 3:19:58   
This is the correct behaviour.

What's happening is that because you haven't cleared the containing div. Floats don't take up much room so as far as the containing div is concerned it's only a few pixels high.

IE gets this wrong and automatically contains floats.

The way around it is to either clear the float (have a non-floated item after the floats within the containing div with clear:both in it's rule) or use overflow:hidden. Most of the time I use overflow to control this. BUT just worth checking in IE6 as just occasionally this has unforseen consequences (rare).

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to pcguy)
pcguy

 

Posts: 137
From: None
Status: offline

 
RE: Weird CSS Behavior? - 3/13/2009 6:50:05   
awesome info - thank you!

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Weird CSS Behavior?
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts