PDA

Click to See Complete Forum and Search --> : why doesnt this site look the same in FF / IE?

aaron.martinas
03-25-2008, 10:06 AM
what have i failed to do that makes the attached site look so much different between browsers?
Fang
03-25-2008, 03:26 PM
IE6 won't stretch those images, parent element must also have height.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Eventually..</title>

<style type="text/css">
body, head
{
margin: 0 0 0 0;height:100%;/* changed */
}
#top1
{
background-color: #6B6B6A;
position: absolute;
width: 100%;
height: 47px;
}
#top2
{
background-color: #790106;
position: absolute;
width: 100%;
top: 47px;
height: 41px;
}
#header
{
position: absolute;
}
#lcorner
{
position: absolute;
top: 88px;
width: 175px;
height: 16px;
background-color: red;
}
#lcorner img
{
float: right;
}
#leftdivider
{
top: 0px;height:100%;/* changed */
position: absolute;
left: 175px;
width: 10px;
bottom: 0px;
background-color: #790106;
}
#rcorner
{
position: absolute;
top: 88px;
width: 22px;
left: 185px;
height: 16px;
background-color: red;
}
#lcorner2
{
position: absolute;
top: 88px;
right: 10px;
width: 22px;
height: 16px;
background-color: red;
}
#rightmargin
{
top: 0px;height:100%;/* changed */
position: absolute;
right: 0px;
width: 10px;
bottom: 0px;
background-color: #790106;
}
img {display:block;}/* changed */
</style>

</head>
<body>

<div id="leftdivider"></div> <!-- change div order or add z-index -->
<div id="rightmargin"></div>
<div id="top1"></div>
<div id="top2"></div>
<div id="header">
<img src="preheader.gif" alt="preheader.gif" />
</div>
<div id="lcorner">
<img src="lcorner.gif" alt="lcorner.gif" />
</div>
<div id="rcorner">
<img src="rcorner.gif" alt="rcorner.gif"/>
</div>
<div id="lcorner2">
<img src="lcorner.gif" alt="lcorner.gif" />
</div>

</body>
</html>
A better solution is to have the dividers as a background image on the body element.