Reply
100% Height problem only in Firefox
Old 09-24-2006, 06:24 AM 100% Height problem only in Firefox
Experienced Talker

Posts: 33
Hello

Well I'm a newbie to CSS and I have an issue with using 100% height when viewed in Firefox.

IE renders the page as I wish, and the blue background holds all the yellow blocks. Firefox does something weird and the yellow boxes overlap the blue background. If I use a pixel measurement, everything works well. That's great, but I don't want to keep changing the px height of the page each time I add new content.

I uploaded it to my site: http://www.realbabyguide.co.uk/test.html

Any ideas? I'm tearing my hair out (what's left of it!).

Maybe I should have stuck with tables...

Last edited by monkey64 : 09-24-2006 at 06:37 AM.
monkey64 is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 09-24-2006, 12:42 PM Re: 100% Height problem only in Firefox
Webmonkey's Avatar
Junior Talker

Posts: 2
Name: Steven Gibbons
Location: United Kingdom
Very weird, Whats your CSS?
__________________
Steven Gibbons
Professional PHP Coder

Webmonkey is offline
Reply With Quote
View Public Profile Visit Webmonkey's homepage!
 
Old 09-24-2006, 02:49 PM Re: 100% Height problem only in Firefox
Experienced Talker

Posts: 33
CSS:

<style>
body
{
text-align: center;
}
.container
{
text-align: left;
height:100%;
width:750px;
padding-bottom:80px;
margin: 0px auto 0px auto; /* top, right, bottom, left */
background-color:#C2C2F0;
border:#000000 1px dotted;
}

.block
{
height:80px;
width:150px;
margin:40px;
background-color:#FFFF33;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
monkey64 is offline
Reply With Quote
View Public Profile
 
Old 09-24-2006, 02:50 PM Re: 100% Height problem only in Firefox
Webmaster Talker

Posts: 559
you need to add a footer to the page which goes across the width of the container. Then add "clear:both;" to the css for the footer and that will bring it down to the size of the page. Get rid of height 100% as it can cause problems in IE.

Here is the HTML so you can see what I mean:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<style>

body 
{
  	text-align: center; 
}

#container 
{
	text-align: left;
	width:750px;
	padding-bottom:80px;
	margin: 0px auto 0px auto; /* top, right, bottom, left */
	background-color:#C2C2F0;
	border:#000000 1px dotted;
}

#footer {
	width:750px;
	border:0px;
	margin:0;
	padding:0;
	clear:both;
}
	
.block
{
	height:80px;
	width:150px;
	margin:40px;
	background-color:#FFFF33;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

</style>

<body>

<div id="container">

	<div class="block">Here is a test floated block</div>

	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>
	
	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>

	<div id="footer"></div>
</div><!--Close COntainer DIV -->

</body>
</html>
zincoxide is offline
Reply With Quote
View Public Profile
 
Old 09-25-2006, 12:34 AM Re: 100% Height problem only in Firefox
LadynRed's Avatar
Super Moderator

Posts: 6,743
Location: Tennessee
Firefox isn't doing anything weird, FF is complying with the standards. In that manner, IE is the one that is getting it WRONG - as always.

You don't need a footer, but you MUST clear your floats and there are several methods for doing that:
http://css-discuss.incutio.com/?page=ClearingSpace
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 09-25-2006, 12:46 PM Re: 100% Height problem only in Firefox
Webmaster Talker

Posts: 559
I'm not a pro but I just figured a footer going across the bottom would be the easiest way to clear the floats. Most people put some kind of Copyright notice at the bottom anyways, so I figure it's perfect.

LadyNRed - Just out of curiousity, without adding some kind of spacer/footer along the bottom, how would you clear your floats??
zincoxide is offline
Reply With Quote
View Public Profile
 
Old 09-25-2006, 04:04 PM Re: 100% Height problem only in Firefox
LadynRed's Avatar
Super Moderator

Posts: 6,743
Location: Tennessee
I do it this way:
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
Then put a <br class="brclear" /> in the HTML following the container holding the floated elements.

100% Height pages - free article:
http://www.communitymx.com/abstract.cfm?cid=BAD95
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 09-25-2006, 04:54 PM Re: 100% Height problem only in Firefox
Webmaster Talker

Posts: 559
Cool... Good to know.

Now, my solution, I did test and it worked fine... The output seemed to be the same as Monkey64 wanted.

Was it correct, incorrect or just a different way of doing it?
zincoxide is offline
Reply With Quote
View Public Profile
 
Old 09-25-2006, 09:48 PM Re: 100% Height problem only in Firefox
LadynRed's Avatar
Super Moderator

Posts: 6,743
Location: Tennessee
There are often several ways to solve the same problem
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to 100% Height problem only in Firefox
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com | Text Link Brokers 


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14849 seconds with 12 queries