homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS looks as expected in IE not in Firefox
BassTeQ2




msg:3604785
 2:23 am on Mar 19, 2008 (gmt 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




msg:3604878
 4:24 am on Mar 19, 2008 (gmt 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




msg:3604895
 4:54 am on Mar 19, 2008 (gmt 0)

Dave75,

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved