Welcome to WebmasterWorld Guest from 54.227.83.19

Forum Moderators: not2easy

Message Too Old, No Replies

CSS looks as expected in IE not in Firefox

     

BassTeQ2

2:23 am on Mar 19, 2008 (gmt 0)

5+ Year Member



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

4:24 am on Mar 19, 2008 (gmt 0)

5+ Year Member



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

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

5+ Year Member



Dave75,

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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month