Notice the mysterious margin in between the image and the footer div?
Now hit Refresh and it disappears!
Does anyone know how to get rid of the mysterious gap? Please view the source (I've made it simple to read).
It looks fine in IE
Moderator: General Moderators
Code: Select all
img {
magrin: 0 auto; /* this set the top and bottom margin as 0 and the lef/right maring to flow with the text flow or auto. */
padding: 0;
display: inline;
}Code: Select all
#div1 {
margin: 0;
}
#div2 {
margin: 0;
}Code: Select all
<html>
<head>
<title>Bug Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
img {
display: inline;
border: 0;
}
#wrapper {
margin: 0;
padding: 0;
width: 400px;
background: gray;
}
#text {
float: left;
margin: 0 auto;
padding: 0;
width: 200px;
background: orange;
}
#image {
margin: 0 0 0 200px;
padding: 0;
background: green;
}
#footer {
margin: 0;
padding: 0;
background: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div id="image"><img src="domokun.jpg" alt="The Domokun" title="The Domokun" /></div>
<div id="footer">Footer</div>
</div>
</body>
</html>