Forum Moderators: not2easy
Here is the code:
CSS:
.topIMG {
position:absolute;
top:0%;
left:0%;
right:0%;
width: 100%;
height: 100px;
z-index: 2;
}.bottomIMG {
position:absolute;
top:84%;
left:0%;
right: 0%;
width: 100%;
height: 100px;
z-index: 2;
}
.leftIMG {
position:absolute;
top: 0%;
left: 0%;
right: 0%;
width: 120px;
height: 100%;
z-index: 2;
}
.overlayIMG {
position:absolute;
top: 42.5%;
left: 0%;
right: 0%;
width: 250px;
height: 350px;
z-index: 3;
}
XHTML:
<!--#####HTML Document Design Template#####
The purose of this document is have all the template
information for designing a proper HTML web
page.
--><!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>::HTML Web Page Template::</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<!--####JavaScript Loading Template####
<script language="JavaScript"
type="text/JavaScript"
src="defaultJavaScript.js">
</script>
-->
</head>
<body>
<!--#########Table Layout Template#########
<table id = "defaultOuterTable"
summary="This is a default table that can be
used when making layouts or simply
adding a table to the HTML page.
It is the large outer table used to
house the inner tables containing
data.">
<tr id="row1_1">
<td id="data1_1">
<table id= "defaultInnerTable"
summary="This is the default
table used inside of
the larger outer
table.">
<tr id="row2_1">
<td id="data2_1">
</td>
</tr>
</table>
</td>
</tr>
</table>
-->
<p>
<img src="square.jpg" class="leftIMG" alt="left image"></img>
<img src="square.jpg" class="topIMG" alt="top image"></img>
<img src="square.jpg" class="bottomIMG" alt="bottom image"></img>
<img src="square2.jpg" class="overlayIMG" alt="overlay image"></img>
</p>
</body>
</html>
html, body {
margin: 0; padding: 0;
}
should fix the issue in both IE and Opera.
I typically set this as a 'global' in all my CSS master files to override varying browser defaults. Then I can proceed with working on the design.
IE can pad images - a very old bug, that probably started as a feature.
That would not seem to apply to the code provided however.
