Forum Moderators: open

Message Too Old, No Replies

lost in margin, padding, border...

code does not work in IE

         

matthias

1:09 pm on Jun 23, 2002 (gmt 0)

10+ Year Member



I want to build my first site with xhtml and css but it's more complicated than I thought. The following code works in Opera (6) but not in IE (5). IE displays an annoying space. Here is the code:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>
Title
</title>
<link rel="stylesheet" type="text/css" href="news.css" />
</head>
<body>
<div align="center">
<div id="global">
<div id="head">
<div>
<img src="location/of/image.gif" width="680" height=
"80" alt="" />
</div><!-- ####### here is an annoying space in the background color of id=global #######-->
<div class="horizblack">
<b>Some Text Goes HERE</b>
</div>
</div>
</div>
</div>
</body>
</html>

and css:

body { 
margin:0px;
padding:0px;
}

div#global {
width:680px; //width:684px; /* evil hack for evil IE */
border-top-width:2px;
border-top-style:none;
border-bottom-width:0px;
border-bottom-style:none;
border-left-width:2px;
border-left-style:solid;
border-right-width:2px;
border-right-style:solid;
border-color:#000000;
}

div#head {
text-align:left;
}

.horiz_black {
background-color:#000000;
color:#FFFFFF;
width:100%;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

I tried it for three full days but the space remains any tips?

tedster

2:32 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I remember a similar problem with unwanted space around an image - using css to switch the image display from inline to block fixed it:

img {
display: block;
}

matthias

9:24 pm on Jun 23, 2002 (gmt 0)

10+ Year Member



Thank you so much! It works.