Forum Moderators: not2easy
Couple problems:
1. the back ground color doesn't show at all (IE)
2. the right side doesn't go to the edge of the boarder (you'll see)
3. when resizing the window, the left side is overlapped, not the right side as I would expect
4. the footer doesn't go to the bottom of the page (ff)
Sorry if these are basic questions (hopefully they are).
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
<!--- @import "alumni.css"; --->
body {
background-color: #666;
margin:10px;
padding:0px;
height: 100%;
}
#container {
background-color: transparent;
margin: 5px;
padding: 0px;
}
#left_edge {
clear: left;
background: transparent url(images/left_edge.png) left top repeat-y;
width: 100%
padding-right: 491px;
}
#right_edge {
clear: left;
background: transparent url(images/right_edge.png) right top repeat-y;
width: 100%
padding-right: 491px;
}
#left_header {
position: relative;
float: left;
width: 100%;
margin-right: 20px;
background: transparent url(images/left_header.png) left top no-repeat;
height: 123px;
}
#right_header {
position: relative;
float: right;
width: 100%;
background: transparent url(images/right_header.png) right top no-repeat;
height: 123px;
}
#left_footer {
position: relative;
float: left;
width: 100%;
background: transparent url(images/left_footer.png) left bottom no-repeat;
height: 123px;
}
#right_footer {
clear: both;
position: relative;
float: right;
width: 100%;
background: transparent url(images/right_footer.png) right bottom no-repeat;
height: 123px;
}
#footer_right {
position: relative;
float: left;
width: 495px;
margin-right: -495px;
background: url(images/right_footer.png) right bottom no-repeat;
height: 123px;
}
#leftcontent {
position: absolute;
left:20px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:20px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 179px;
margin-right:179px;
border:1px solid #000;
margin-left: 191px;
margin-right:191px;
}
body #centercontent {
margin-left: 229px;
margin-right:229px;
}
#banner {
margin-top: 40px;
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
height:39px;
margin: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="left_header">
<div id="right_header">
<div id="left_edge">
<div id="right_edge">
<div id="banner">Banner</div>
<div id="leftcontent">this is the left content</div>
<div id="centercontent">
center content<BR>center content<BR>
center content<BR>center content<BR>
center content<BR>center content<BR>
center content<BR>center content<BR>
center content<BR>center content<BR>
</div>
<div id="rightcontent">this is the right content</div>
</div>
</div>
</div>
</div>
<div id="left_footer">
<div id="right_footer">
</div>
</div>
</div>
</body>
</html>
firstly, the Doctype - it should be the very first thing in your HTML document, the <html> and <head> elements should be underneath it.. there should be no whitespace or anything else before it in order to avoid IE Quirks rendering mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
next the comment in the <style> element should be
/* @import...comment in here */then, you should go through your code with the CSS Validator [jigsaw.w3.org], there are a couple of parse errors (missing semi-colons) in there which are affecting the widths of your left/right edge divs..
none of this solves your problem but are just the first things I noticed, and it should make the colors come back - maybe you can try to demonstrate what you're trying to achieve with colors
Suzy
