foid025
03-13-2008, 02:36 AM
I am trying to do something quite basic - put an image in a div in such a way that the image is touching the image in the div below (for a menu). Sounds easy... but with the wonderful IE, so far no luck! (Only other browser I've tested is Firefox 2 , which works fine). The problem I'm having in IE is that there is a small white gap (maybe 3 pixels or so) between the top image and the bottom one, which ruins the menu. THanks for your help!
Before I show you the whole code, here are the points of interest: The pageHeader div contains the image which I want on top.
<div id="pageHeader">
<img src="media/siteImages/topBanner.jpg" style="width: 800px; border: none;" usemap ="#pageHeaderMap"/>
<map id="pageHeaderMap" name="pageHeaderMap"><area shape="rect" coords="0,0,144,139" href="index.php" alt="Home"/></map>
</div>
and here's the CSS for that:
#pageHeader {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
The image on the bottom is in a div called leftNav, itself in a container called pageBody:
<div id="pageBody">
<div id="leftNav">
<img src="media/siteImages/leftNav.jpg" style="width: 145px; border: none;"/>
</div>
<div style="float: right; width: 650px;">
Hello world!
</div>
<div style="clear: both; width: 100%">
Copyright...
</div>
</div>
and the CSS:
#pageBody {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftNav {
vertical-align: top;
width: 150px;
float: left;
padding: 0;
margin: 0;
}
Here's the whole page, which is pretty short now:
<html>
<head>
<title>CWG-CWC: Citizens for Workers, Women and Children</title>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
#pageHeader {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#pageBody {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftNav {
vertical-align: top;
width: 150px;
float: left;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="pageHeader">
<img src="media/siteImages/topBanner.jpg" style="width: 800px; border: none;" usemap ="#pageHeaderMap"/>
<map id="pageHeaderMap" name="pageHeaderMap"><area shape="rect" coords="0,0,144,139" href="index.php" alt="Home"/></map>
</div>
<div id="pageBody">
<div id="leftNav">
<img src="media/siteImages/leftNav.jpg" style="width: 145px; border: none;"/>
</div>
<div style="float: right; width: 650px;">
Hello world!
</div>
<div style="clear: both; width: 100%">
Copyright...
</div>
</div>
</center>
</body>
</html>
Validated my html and css... to no avail.
Before I show you the whole code, here are the points of interest: The pageHeader div contains the image which I want on top.
<div id="pageHeader">
<img src="media/siteImages/topBanner.jpg" style="width: 800px; border: none;" usemap ="#pageHeaderMap"/>
<map id="pageHeaderMap" name="pageHeaderMap"><area shape="rect" coords="0,0,144,139" href="index.php" alt="Home"/></map>
</div>
and here's the CSS for that:
#pageHeader {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
The image on the bottom is in a div called leftNav, itself in a container called pageBody:
<div id="pageBody">
<div id="leftNav">
<img src="media/siteImages/leftNav.jpg" style="width: 145px; border: none;"/>
</div>
<div style="float: right; width: 650px;">
Hello world!
</div>
<div style="clear: both; width: 100%">
Copyright...
</div>
</div>
and the CSS:
#pageBody {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftNav {
vertical-align: top;
width: 150px;
float: left;
padding: 0;
margin: 0;
}
Here's the whole page, which is pretty short now:
<html>
<head>
<title>CWG-CWC: Citizens for Workers, Women and Children</title>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
#pageHeader {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#pageBody {
width: 800px;
border: none;
padding: 0;
margin: 0;
text-align: left;
}
#leftNav {
vertical-align: top;
width: 150px;
float: left;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<center>
<div id="pageHeader">
<img src="media/siteImages/topBanner.jpg" style="width: 800px; border: none;" usemap ="#pageHeaderMap"/>
<map id="pageHeaderMap" name="pageHeaderMap"><area shape="rect" coords="0,0,144,139" href="index.php" alt="Home"/></map>
</div>
<div id="pageBody">
<div id="leftNav">
<img src="media/siteImages/leftNav.jpg" style="width: 145px; border: none;"/>
</div>
<div style="float: right; width: 650px;">
Hello world!
</div>
<div style="clear: both; width: 100%">
Copyright...
</div>
</div>
</center>
</body>
</html>
Validated my html and css... to no avail.