http://www.webmasterworld.com Welcome to WebmasterWorld Guest from 38.103.63.17
register, login, search, glossary, subscribe, help, library, PubCon, announcements , recent posts, unanswered posts		Subscribe and Support WebmasterWorld
Home / Forums Index / Browser Side World / CSS
Forum Library : Charter : Moderators: DrDoc & Robin reala & SuzyUK

CSS

  
CSS looks as expected in IE not in Firefox
BassTeQ2


#:3604785 		 2:23 am on Mar. 19, 2008 (utc 0)

Hi all, having a small problem with a parent div not expanding to the height of its children.

Now it works ok in IE, the parent element (the outer purple & red divs) dont grow in height when viewed in firefox, have I missed something?

Any help appreciated.

Thanks 


<!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>Test</title> 
<STYLE type="text/css"> 
body { 
 font-family: Verdana, Geneva, Arial, helvetica, sans-serif; 
 background-color:#005ed0; 
 font-size:12px;  
} 
a:link { 
color: #72CEFF; 
text-decoration:none; 
}  
a:visited { 
color: #72CEFF; 
text-decoration:none; 
}  
a:hover { 
color: #FFFFFF; 
text-decoration:none; 
}  
#PageBody { 
width:1000px; 
height:auto; 
background-color:#005ed0; 
 /*border: black solid 2px;*/ 
margin:auto auto; 
text-align:center; 
} 
#centerDiv { 
width:895px; 
height:auto; 
/*border: red solid 2px; */ 
text-align: center; 
margin: auto auto; 
} 
#FooterDiv { 
/*border: red solid 2px;*/ 
width:895px;; 
color:#72CEFF; 
text-align:center; 
margin: auto auto; 
position:relative; 
top:20px; 
} 
#Logo { 
/*text-align:center;*/ 
left:0px; 
width:100%; 
} 
#MenuBar { 
margin-top:10px; 
margin-bottom:4px; 
padding-top:5px; 
padding-bottom:5px; 
border-bottom:#FFFFFF dotted thin; 
border-top:#FFFFFF dotted thin; 
text-align:left; 
color:#FFFFFF 
} 
#WorkArea { 
width:98%; 
height:auto; 
border: red solid 2px; 
text-align:center; 
margin:auto auto; 
} 
#TextHeading { 
font-size:16pt; 
} 
#TextSubHeading { 
font-size:12pt; 
} 
.Stats { 
height:auto; 
border: red solid 2px; 
text-align:left; 
overflow:400px; 
} 
#BodyArea { 
border: purple solid 2px; 
background-image:url(images/BodyBGTemplate.jpg); 
background-repeat:repeat-y; 
width:100%; 
height:auto; 
padding:0px; 
margin:0px; 
top:10px; 
left:0px; 
position:relative; 
color:#FFFFFF; 
} 
#BodyAreaFooter { 
/*border: orange solid 2px;*/ 
height:10px; 
width:100%; 
background-image:url(images/BodyBGTemplateFooter.jpg); 
} 
#BodyTextRight { 
/*background-color:#00FFCC;*/ 
width:280px; 
height:91%; 
top:15px; 
position:absolute; 
left:590px; 
line-height:40px; 
text-align:left; 
 font-size:16px;  
/*border: orange solid 2px;*/ 
border-left:#FFFFFF dotted medium; 
padding-left:15px; 
} 
.StationStatus { 
/*border: orange solid 2px;*/ 
text-align:left; 
} 
div.wrapper {  
width: 860px;  
position: relative;  
position: relative;  
margin: 10px; 
color:#000000; 
}  
div.left {  
width: 200px;  
background-color:#FFFFFF; 
position: relative;  
float: left;  
}  
div.right {  
width: 660px;  
background-color:#FFFFFF; 
position: relative;  
float: right;  
color:#005ed0; 
}  
div.menuitem { 
width:191px; 
background-color:#999999; 
height:20px; 
margin-top: 4px; 
margin-bottom: 4px; 
margin-left: 4px; 
} 
div.rightbody { 
border: orange solid 2px; 
width:640px; 
margin:auto auto; 
text-align:center; 
min-height:200px; 
} 
</STYLE> 
</head> 
<body > 
<div id="PageBody"> 
<div id="centerDiv"> 
<div id="Logo"> 
<img src="images/Logo.jpg" /> 
</div> 
 <div id="MenuBar"> 
 <a href="index.php">Home</a> ¦ Item 2 ¦  
</div>  
<div id="BodyArea"> 
<div id="WorkArea"><span id="TextHeading">User Home</span><br /><br />Welcome <b></b> <br> 
 <div class="wrapper">  
<div class="left"> 
 <div class="menuitem"><a href="userhome.php">Server Status</a></div>  
 <div class="menuitem"><a href="userhome.php?a=TextStats">Text Stats</a></div>  
 <div class="menuitem"><a href="userhome.php?a=GraphicalStats">GraphicalStats</a></div>  
 </div> 
<div class="right"> 
 <br /> 
 <div class="rightbody">  
<div class=Stats> 
  <pre> 
  hsjhjhdjhsdf 
  sdfsdfsdfsdf 
  sdfjsdfjlskdflfjlksdjflsdjkf 
  sdfsdfslflskjflsdfjdklf 
  sflsdfjlsdjflskdf 
  ruwerouoirtuert 
  dfgjdgljdflgkjdfklg 
  dgjldfgjldfgkldfgjdlg 
  gfdjgldfjglkfdgldfkg 
  gjldjgkldklgjdlfkgjfdjkl 
  dgjdflgjdflgkjdflj 
</pre> 
  </div> 
  </div> 
 </div>  
</div> 
 <br /><br /><br /> 
</div><!--body area--> 
  
<div id="BodyAreaFooter">&nbsp;</div> 
</div> 
</div> 
<div id="FooterDiv"> 
Footer ¦ None<br />blah <br /><br /> 
</div> 
</body> 
</html>

[edited by: SuzyUK at 6:38 am (utc) on Mar. 19, 2008]
[edit reason] minimised sidescroll [/edit]

Dave75


#:3604878 		 4:24 am on Mar. 19, 2008 (utc 0)

Hi,

You're mixing up floated and inline elements. The way to think of it is: a floated element is not attached to its parent element. So, to keep everything inside the parent you have to float the parent, and sometimes the parent of the parent, and on...

Your styling worked on IE because IE is a browser botch job. I recommend you develop on FF, then test on IE to hack out M$ bugs.

Anyway, here is the code for styling you are after, I have removed the page breaks(me hates them) I suggest you use padding instead:

<!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>Test</title>

<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
background-color:#005ed0;
font-size:12px;
}

a:link {
color: #72CEFF;
text-decoration:none;
}

a:visited {
color: #72CEFF;
text-decoration:none;
}

a:hover {
color: #FFFFFF;
text-decoration:none;
}

#PageBody {
width:1000px;
height:auto;
background-color:#005ed0;
/*border: black solid 2px;*/
margin:auto auto;
text-align:center;
}

#centerDiv {
width:895px;
height:auto;
/*border: red solid 2px; */
text-align: center;
margin: auto auto;
}

#FooterDiv {
/*border: red solid 2px;*/
width:895px;
color:#72CEFF;
text-align:center;
margin: auto auto;
position:relative;
top:20px;
}

#Logo {
/*text-align:center;*/
left:0px;
width:100%;
}

#MenuBar {
margin-top:10px;
margin-bottom:4px;
padding-top:5px;
padding-bottom:5px;
border-bottom:#FFFFFF dotted thin;
border-top:#FFFFFF dotted thin;
text-align:left;
color:#FFFFFF
}

#WorkArea {
float: left;
width:98%;
height:auto;
border: red solid 2px;
text-align:center;
margin:auto auto;
}

#TextHeading {
font-size:16pt;
}

#TextSubHeading {
font-size:12pt;
}

.Stats {
height:auto;
border: red solid 2px;
text-align:left;
overflow:400px;
}

#BodyArea {
float: left;
border: purple solid 2px;
background-image:url(images/BodyBGTemplate.jpg);
background-repeat:repeat-y;
width:100%;
height:auto;
padding:0px;
margin:0px;
top:10px;
left:0px;
position:relative;
color:#FFFFFF;
}

#BodyAreaFooter {
/*border: orange solid 2px;*/
height:10px;
width:100%;
background-image:url(images/BodyBGTemplateFooter.jpg);

}

#BodyTextRight {
/*background-color:#00FFCC;*/
width:280px;
height:91%;
top:15px;
position:absolute;
left:590px;
line-height:40px;
text-align:left;
font-size:16px;
/*border: orange solid 2px;*/
border-left:#FFFFFF dotted medium;
padding-left:15px;
}

.StationStatus {
/*border: orange solid 2px;*/
text-align:left;
}

div.wrapper {
width: 860px;
position: relative;
position: relative;
margin: 10px;
color:#000000;
}

div.left {
width: 200px;
background-color:#FFFFFF;
position: relative;
float: left;

}

div.right {
width: 660px;
background-color:#FFFFFF;
position: relative;
float: right;
color:#005ed0;
}

div.menuitem {
width:191px;
background-color:#999999;
height:20px;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 4px;
}

div.rightbody {
border: orange solid 2px;
width:640px;
margin:auto auto;
text-align:center;
min-height:200px;

}
</style>

</head>
<body >
<div id="PageBody">
<div id="centerDiv">

<div id="Logo"><img src="images/Logo.jpg" /></div>

<div id="MenuBar"><a href="index.php">Home</a> ? Item 2 ?</div>

<div id="BodyArea">
<div id="WorkArea"><span id="TextHeading">User Home</span>Welcome <b></b>

<div class="wrapper">

<div class="left">
<div class="menuitem"><a href="userhome.php">Server Status</a></div>
<div class="menuitem"><a href="userhome.php?a=TextStats">Text Stats</a></div>
<div class="menuitem"><a href="userhome.php?a=GraphicalStats">GraphicalStats</a></div>
</div>

<div class="right">

<div class="rightbody">
<div class=Stats>
<pre>
hsjhjhdjhsdf
sdfsdfsdfsdf
sdfjsdfjlskdflfjlksdjflsdjkf
sdfsdfslflskjflsdfjdklf
sflsdfjlsdjflskdf
ruwerouoirtuert
dfgjdgljdflgkjdfklg
dgjldfgjldfgkldfgjdlg
gfdjgldfjglkfdgldfkg
gjldjgkldklgjdlfkgjfdjkl
dgjdflgjdflgkjdflj
</pre>
</div>
</div>
</div>

</div>

</div><!--body area-->

<div id="BodyAreaFooter">&nbsp;</div>
</div>
</div>


<div id="FooterDiv">
Footer ? Noneblah
</div>

</body>
</html>

BassTeQ2


#:3604895 		 4:54 am on Mar. 19, 2008 (utc 0)

Dave75,

Thank you very much for your help, this has worked nicely!

 

Home / Forums Index / Browser Side World / CSS
All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of WebmasterWorld Inc.
© WebmasterWorld Inc. / SearchEngineWorld 1996-2008 all rights reserved