[RESOLVED] Unwanted spacing before 1px imgs in IE

autopost · Jan 11, 2008

Okay I have been working on a site for a little bit now for fun and as usual it views right in everything I have but IE. Well anyway I have about 4 places where I have 1px high images that repeat down to fill the background of a few div's, and IE adds about 3-5px of whitespace above it. It only occurs between the repeated 1px image and other images (as far as I can tell). I've made other sites though with the same repeated image method and had no problem at all. I've tried putting the padding to 0 and margins to 0 and still no effect. I've even tried negative margins still nothing. I've tried a few workarounds that I read about before but I either didn't implement them right or they didn't work. And yes it does this in all IE browsers even 7. It all validates. I have a second style sheet set up just in case I need to point IE to it like other sites I've done. 
 
 
Anyway heres my code if its not just a simple change. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<title>Seth's Site of Computer Technology</title> 
<meta name="Author" content="Seth Myhre" /> 
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.andrews.edu/~myhre/comp/learn/styles/style.css" /> 
 
 
 
 
 
<base href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.andrews.edu/~myhre/comp/learn/" /> 
</head> 
<body> 
 
 
<script type="text/javascript"> 
if (document.images) { 
image0 = new Image 
image1 = new Image 
image2 = new Image 
image3 = new Image 
image4 = new Image 
 
image0.src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"images/formated/blank.jpg" 
image1.src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"images/formated/zip-100.jpg" 
image2.src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"images/formated/zip-250.jpg" 
image3.src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"images/formated/zip-750.jpg" 
image4.src = <a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/">http://www.webdeveloper.com/forum/archive/index.php/</a>"images/formated/keyboard.jpg" 
} 
</script> 
 
 
<div id="site"> 
<div id="title"> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/header.jpg" alt="" /> 
</div> 
<div id="sidebar"> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/complay_02.jpg" alt="" /> 
<div id="picture"> 
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/formated/blank.jpg" name="imagename" border="0" alt="" /> 
</div> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/complay_07.jpg" alt="" /> 
<div id="nav"> 
<ul class="menu"> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" 
onmouseover="document.imagename.src=http://www.webdeveloper.com/forum/archive/index.php/image1.src" onmouseout="document.imagename.src=image0.src">zip 100</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" 
onmouseover="document.imagename.src=http://www.webdeveloper.com/forum/archive/index.php/image2.src" onmouseout="document.imagename.src=image0.src">zip 250</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" 
onmouseover="document.imagename.src=http://www.webdeveloper.com/forum/archive/index.php/image3.src" onmouseout="document.imagename.src=image0.src">zip 750</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" 
onmouseover="document.imagename.src=http://www.webdeveloper.com/forum/archive/index.php/image4.src" onmouseout="document.imagename.src=image0.src">keyboard</a></li> 
<li>This is a listed item!</li> 
<li>This is a listed item!</li> 
<li>This is a listed item!</li> 
<li>This is a listed item!</li> 
</ul> 
</div> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/complay_11.jpg" alt="" /> 
</div> 
<div id="body"> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/complay_03.jpg" alt="" /> 
<div id="content"> 
        This is the future site of Seth Myhre's computer tips for those who don't get along with technology, but I'm having trouble with IE at the moment. Stupidest browser in the world. 
 
 
 
</div> 
</div> 
<div id="footer"> 
<img class="ie" src=http://www.webdeveloper.com/forum/archive/index.php/"images/footer.jpg" alt="" /> 
</div> 
</div> 
</body> 
</html> 
 
 
And my css 
a:link {color: #000000}/* unvisited link */ 
a:visited {color: #000000}/* visited link */ 
a:hover {color: #000000}/* mouse over link */ 
a:active {color: #000000}/* selected link */ 
 
/* to make sure z-index is read properly in firefox dont use negative numbers 0=bottom higher numbers are top layers*/ 
/* margin order is: top, right, bottom, left */ 
 
* {margin: 0px; padding: 0px;} 
 
/* image classes */ 
 
 
/* main text block */ 
p.main {font-family: "comic sans MS"; text-align: justify; padding: 20px 40px 20px 20px} 
ul.menu {font-family: "comic sans MS"; list-style: none; padding: 20px} 
 
 
/* properties of containers that elements are placed in */ 
 
/* page - DO NOT CHANGE - page */ 
#site {width: 1000px; top: 0px; margin: 0px auto} 
#title {width: 1000px; top: 0px; margin: 0px; height: 90px; float: left} 
#sidebar {background-image: url('http://www.andrews.edu/~myhre/comp/learn/images/complay_13.jpg'); background-repeat: repeat-y; width: 285px; height: 720px; margin: 0px; float: left} 
#preview {width: 285px; margin: 0px; float: left} 
#picture {background-image: url('http://www.andrews.edu/~myhre/comp/learn/images/complay_04.jpg'); background-repeat: repeat-y; width: 285px; padding: 0px 0px 0px 20px} 
#sidenav {width: 285px; float: left} 
#nav {background-image: url('http://www.andrews.edu/~myhre/comp/learn/images/complay_09.jpg'); background-repeat: repeat-y; width: 285px; min-height: 400px; margin: 0px; padding: 0px 0px 0px 20px; float: left} 
#body {width: 715px; margin: 0px; float: left} 
#content {background-image: url('http://www.andrews.edu/~myhre/comp/learn/images/complay_05.jpg'); background-repeat: repeat-y; width: 715px; min-height: 700px; margin: 0px; float: left} 
#footer {width: 1000px}img {vertical-align:bottom;} 
<a class="postlink" href="http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps">http://developer.mozilla.org/en/docs/Im ... rious_Gaps</a>Guess ill have to try that soon I don't have access to my site content right now.Thanks for the help that worked guess I'll have to add that to my list of things to look for when making things work in IE.Thanks for the help that worked guess I'll have to add that to my list of things to look for when making things work in IE. 
It also affects FxIt also affects Fx 
 
Well I didn't see it effect fx at all on any platform fx viewed it fine from the start. Though Still having an issue with ie6 and below where my text appears below the sidebar instead of to the side. I think that will be fixed with padding margin or div width changes, but I could be wrong on that.

[RESOLVED] Unwanted spacing before 1px imgs in IE

autopost

Guest