Jump to content
  • Advertisement
Sign in to follow this  
Liam M

[web] CSS "height:auto" Problems in Mozilla Firefox

This topic is 4217 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi there, I'm still a bit new to CSS, so sorry if this is an overly simple issue. Im working on a little website, and I am having trouble with the div that contains my page not resizing to fit all the elements it containts in firefox, despite having its height property set to auto. What am I missing here? The code for my stylesheet (style.css):

body
{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	padding-top:30px;
	padding-bottom:30px;
}

#Main
{

	width: 90%;
	height: auto;
	border-style:solid;
	border-width:1px;

	min-height:100%;

	margin-left: auto;
	margin-right: auto;

	background-color: Red;

	position:relative;

	background-color:rgb(255,0,0);

}

.Banner
{
	width: 100%;
	height: 120px;

	margin-left: auto;
	margin-right: auto;

	border-style:solid;
	border-width:1px;

	float:center;

	background-color:rgb(255,255,100);

	margin-top: 0px;

}

.Footer
{
	width: 100%;
	height: 120px;

	margin-left: auto;
	margin-right: auto;
	
	border-style:solid;
	border-width:1px;

	float:center;

	background-color:rgb(255,255,100);

	margin-top: 10px;
	margin-bottom: 0px;

}


.MenuLeft,
.MenuRight,
.PageDiv
{
	padding: 0px 0px 0px 0px;
	margin-top: 10px;

	background-image:url(style/Title.jpg);
	background-repeat: repeat-x;
	background-position: top left;
}

.MenuLeft,
.MenuRight
{
	width: 16%;
	height: auto;

	border-style:solid;
	border-width:1px;

	background-color:rgb(255,255,100);

	min-width: 100px;
}


.MenuLeft
{
	float:left;
}

.MenuRight
{
	float:Right;
}

.PageDiv
{
	width: 60%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;

	border-style:solid;
	border-width:1px;

	background-color:rgb(255,255,100);

}




...And my HTML document(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<htmL>

   <head>

	<title>CSS Playground</title>
	
	<link rel="stylesheet" media="screen" type="text/css" href="Style.css" />

   </head>


   <body>


	<div id ="Main">

		<div class = "Banner">
		
				<h1>M M M M M</h1>

		</div>


		<div class = "MenuLeft">



					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>


		</div>

		<div class = "MenuRight">
		

	
					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>


		</div>

		<div class = "PageDiv">


				
	
					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>

		</div>


		

		<div class = "Footer">
		
				<h1>M M M M M</h1>

		</div>

	</div>


   </body>


</html>


Its difficult to explain, but a comparison between what the page looks like in Firefox(incorrect), to what it looks like in IE6 (what I want), makes it pretty obvious (in Firefox 1.5, the menus are flowing out over the footer, which isn't what I want). All help appreciated, Liam M.

Share this post


Link to post
Share on other sites
Advertisement
(That <htmL> shouldn't be there.)

Opera gives the same output as Firefox, so the difference seems likely to be buggy behaviour in IE. You can force the footer to be below the floating menus by adding .Footer { clear: both; } which makes it look about the same as in IE. And then you just need to fiddle with the margins until the spacing is correct (since IE (at least IE6) seems to do that differently too).

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!