Forum Moderators: not2easy
The problem I'm having is that there's a gap between each div approximately 1 pixel high. Also, the list is aligned to the center, even though I have no alignment specified. This is visible on Firefox 2.0.0.10 and Safari 2. For what it's worth, I opened it up in Dreamweaver and it looks just fine. I haven't tested on IE yet, but that doesn't matter to me at this point - it's broken in two major browsers. I'll attach the relevant code (which validates as XHTML 1.0 Strict).
I'm sure it's something very obvious, but I'm pulling my hair out trying to figure it out. Thanks in advance for your help.
(Edit: Sorry, the code tag isn't working properly for me)
<!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=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
.boxcontainer {
width:292px;
margin-top:0;
margin-bottom:0;
}
.boxHeader{
width:292px;
margin-top:0;
margin-bottom:0;
}
.boxContent{
width:292px;
margin-top:0;
margin-bottom:0;
background-image:url(boxes/contentbg.jpg);
background-repeat:repeat-y;
font-family:Verdana, Tahoma, Arial, Sans-serif;
font-size:10px;
color:#FFFFFF;
}
.boxFooter{
width:292px;
margin-top:0;
margin-bottom:0;
}
ul {
margin:0px;
}
</style>
</head><body>
<div class="boxcontainer">
<div class="boxHeader"><img src="boxes/priceheader.jpg" alt="Pricing Information" width="292" height="34" /></div>
<div class="boxContent">
<ul>
<li>Shop Rate: $65.00/hour</li>
<li>Fabrication: $75.00/hour</li>
<li>Wiring: $85.00/hour</li>
<li>Dyno Rate: $75.00/hour</li>
<li>Tuning: $125.00/hour</li>
<li>Air Fuel Ratio: $25.00/hour</li>
<li>Nitrous Oxide: $4.50/pound</li>
<li>VP Race Gas: C-16 5 Gallon Container $69.99</li>
<li>Methanol 15 Gallon Barrel $78.00</li></ul></div>
<div class="boxFooter"><img src="boxes/footer.jpg" alt="Footer Graphic" /></div></div></body></html>
[edited by: Shawn_26 at 4:01 pm (utc) on Dec. 7, 2007]
and a warm welcome to these forums. ;)
I do not have the facilities to test in Safari but this code looks fine in IE 7, Firefox 2 and Opera 9...
<!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=ISO-8859-1" />
<title>Untitled Document</title><style type="text/css" media="screen">
.boxcontainer {
width:292px;
}
.boxContent{
width:292px;
background-image:url(boxes/contentbg.jpg);
background-repeat:repeat-y;
font-family:Verdana, Tahoma, Arial, Sans-serif;
font-size:10px;
color:#FFFFFF;
}
ul {
margin:0 0 0 -25px;
}
.boxHeader img,.boxFooter img {
display:block;
}
</style><!--[if IE]>
<style type="text/css" media="screen">
ul {
margin:0 0 0 20px;
}
</style>
<![endif]--></head>
<body><div class="boxcontainer">
<div class="boxHeader"><img src="boxes/priceheader.jpg" alt="Pricing Information" /></div>
<div class="boxContent">
<ul>
<li>Shop Rate: $65.00/hour</li>
<li>Fabrication: $75.00/hour</li>
<li>Wiring: $85.00/hour</li>
<li>Dyno Rate: $75.00/hour</li>
<li>Tuning: $125.00/hour</li>
<li>Air Fuel Ratio: $25.00/hour</li>
<li>Nitrous Oxide: $4.50/pound</li>
<li>VP Race Gas: C-16 5 Gallon Container $69.99</li>
<li>Methanol 15 Gallon Barrel $78.00</li>
</ul>
</div><div class="boxFooter"><img src="boxes/footer.jpg" alt="Footer Graphic"/></div>
</div>
</body>
</html>
birdbrain
That works great, thank you! However, could you explain to me what I was doing wrong?
However, could you explain to me what I was doing wrong?
Well, there was not much that you did wrong. ;)
I removed the unnecessary margins-top:0; and margins-bottom:0; from the stylesheet as the div element does not have default margins.
The img elements were set to display:block;. This removes the your problematic gap
Further reading
Eric A. Meyer article [devedge-temp.mozilla.org]
I hope that this helps. :)
birdbrain
