I converted the code to use ol tag and with some css styling (using float and display properties) the images lined up perfectly on standards compliant browsers (chrome, firefox) .
For IE7 and below I used conditional commenting to raise up some of the images.
Note that when using a layout like the one shown below and when the browser's window is resized, the images will move to fit new window's size. To prevent images relocation, I set the display property of the ol tag to table so it will behave like a table. However IE6 and I think IE7 does not respect this property so I added an actual table around the ol tag.
<!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>
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
table
{
margin:0px;
padding:0px;
}
img
{
display:block;
margin:0px;
padding:0px;
background-color:#75b044;
}
ol
{
list-style-position: outside;
list-style-type:none;
margin:0px;
padding:0px;
display:table;
}
li
{
margin:0px;
padding:0px;
}
.li1
{
float:left;
margin-top:0px;
}
.li2
{
float:left;
margin-top:-1px;
}
.moveleft
{
margin-left:-1px;
}
</style>
</head>
<body>
<!--[if lte IE 7]>
<style>
.li1
{
margin-top:-4px;
}
.li2
{
margin-top:-20px !important;
}
</style>
<![endif]-->
<table cellpadding="0" cellspacing="0"><tr><td> <!-- added table to prevent images from re-locating-->
<!-- when window is re-sized in IE6 because it does not -->
<!-- respect display:table css property -->
<ol>
<li>
<img id="banner" alt="" src="" />
</li>
<li class="li1">
<img id="leftRowSpan1" alt="" src="" />
</li >
<li class="li1">
<img id="leftRowSpan2" alt="" src="" />
</li>
<li class="li1">
<img id="rightRowSpan1" alt="" src="" />
<img id="rightRowSpan2" alt="" src="" />
</li>
<li style="clear:both;" > </li>
<!-- third row -->
<li class="li2 ieli2">
<img id="leftRowSpan3" alt="" src="" />
</li>
<li class="li2 ieli2">
<img id="leftRowSpan4" alt="" src="" />
</li>
<!-- third row right images -->
<li class="li2 ieli2 moveleft">
<img id="rightRowSpan3" alt="" src="" />
<img id="rightRowSpan4" alt="" src="" />
</li>
<li style="clear:both;"></li>
<li class="li2 ieli2">
<img id="leftColSpan1" alt="" src="" />
</li>
<li class="li2 moveleft">
<img id="rightColSpan2" alt="" src="" />
</li>
<li style="clear:both;"></li>
<li class="li2 ieli2">
<img alt="" src=""/>
</li>
<li class="li2 ieli2 moveleft">
<img alt="" src="" />
</li>
<li style="clear:both;">
<img id="footer" alt="" src=""/>
</li>
</ol>
</td></tr></table>
</body>
</html>
No comments:
Post a Comment