Forum Moderators: not2easy
could someone please tale alook at my code and tell me what is wrong? It doesn't work as expected in FF and IE so i know something must just be wrong with my code.
i have a main div that i want the background color to be white, but everything outside that div (i.e. the body tag) i want to be a light grey.
thanks! i really appreciate it!
here's the complete css and valid xhtml:
HTML:
<!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>
<title>Main_Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="layout">
<div id="IC-Logo_"><img id="IC_Logo" src="images/IC_Logo.png" width="250" height="66" alt="" /></div>
<div id="redLine"></div>
<div id="mainText">
<ul>
<li><img class="arrow" src="images/arrow.png" width="25" height="24" alt="Arrow Button" align="right"/>Customer Login<br />
Shop & More</li>
<li><img class="arrow" src="images/arrow.png" width="25" height="24" alt="Arrow Button" align="right"/>Prospective Reseller<br />
Take the Tour</li>
<li><img class="arrow" src="images/arrow.png" width="25" height="24" alt="Arrow Button" align="right"/>End User Customers<br />
Product Support</li>
</ul>
</div>
<div id="intMan_"><img id="intMan_LOGO" src="images/intMan.jpg" width="310" height="42" alt="" /></div>
<div id="greyLine"></div>
<div id="footer">Test1 ¦ Test2 ¦ Test3</div>
<img id="mainImage" src="images/mainImage.png" width="325" height="507" alt=""/>
<div id="blueLine"></div>
</div>
</body>
</html>
CSS:
body{
background-color:#E0E3E4;
color:#000000;
}#layout {
position:absolute;
left:0px;
top:0px;
width:780px;
background-color:#FFFFFF!important;
color:#000000;
visibility:visible;
background-position:top;
}
#mainImage {
position:absolute;
left:455px;
top:0px;
}
#IC-Logo_ {
position:absolute;
left:19px;
top:117px;
width:250px;
height:66px;
}
#redLine {
position:absolute;
left:-2px;
top:191px;
width:100%;
height:5px;
color:#FFFFFF;
background-color:#B62132;
}
.arrow{
padding-right:15px;
padding-left:25px;
}
#mainText {
position:absolute;
left:-3px;
top:224px;
width:100%;
height:170px;
}
#mainText ul{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#mainText li{
background-color:#F8F9FA;
border: 5px solid #FFFFFF;
text-align:right;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
padding-right:350px;
}
#blueLine {
position:absolute;
left:0px;
top:437px;
width:780px;
height:4px;
background-color:#006AB5;
color:#FFFFFF;
}
#intMan_ {
position:absolute;
left:-4px;
top:442px;
width:100%;
height:66px;
background-color: #F3F5F7;
}
#intMan_LOGO {
padding-left:100px;
padding-top:10px
}
#greyLine {
position:absolute;
left:0px;
top:507px;
width:100%;
height:4px;
background-color:#787D81;
}
#footer{
position:absolute;
left:0px;
top:510px;
width:100%;
height:35px;
background-color:#B0B6BB;
padding-top:15px;
text-align:center;
font-style:normal;
color:#FFFFFF;
}
thanks for the tip, it worked...
now maybe you couls explain why it worked...
Thanks again,
-Mark
i need this to be totally cross-browser/cross-platform.
:(
The reasoning: Absolutely positioned elements are taken out of the document flow. They are totally divorced from what goes on in or around them. As such, child elements don't force them to expand to contain them (as would normally be the case). Hence, if you want an absolutely positioned element to have a height, you need to explicitely state what that height should be. Otherwise the height will collapse to zero.
If you're thinking that absolutely positioned layouts aren't much use if you don't know the specific height of your content, you'd be right.
I'm still learning though.
thanks for all the help.
here's a screenshot of the page if you care what it look slike:
[img513.imageshack.us]
