Hey there,
I'm trying to make an all CSS site and was setting up my divs when I noticed this 3px padding/margin that IE adds into each div. I was aware of this bug and was able to fix most of them. However there is this really stubborn margin in my #contenthead div that I can't seem to get rid of. I tried the standard remedy fix for it, which is to add in an special IE only -3px margin code. But that didn't have any effect on it. Anyone ever come across this before and know how to fix it thanks.
Test Page (<!-- m --><a class="postlink" href="http://www.3e-motivations.com/a/test.htm">http://www.3e-motivations.com/a/test.htm</a><!-- m -->)
Stylesheet (<!-- m --><a class="postlink" href="http://www.3e-motivations.com/a/style.css">http://www.3e-motivations.com/a/style.css</a><!-- m -->)I don't see that problem in IE, screenshot attached.
However you do seem to suffer from <div>itis. Take the header for example:<div id="startpic">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"startpic.jpg">
</div>Perhaps something like this would be more appropriate:<h1>3eMotivations: Empowerment, Education & Entertainment</h1>And then use the image replacement technique of your choice (<!-- m --><a class="postlink" href="http://mezzoblue.com/tests/revised-image-replacement/index.php">http://mezzoblue.com/tests/revised-imag ... /index.php</a><!-- m -->) to put the banner over the top.The problem is the black part, it's not supposed to be there. Originally the background color fo the div was something that blended in better, but I changed it to black so it'd stick out. How do I get rid of the black part?<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" style="display:block;">Oh, the black bit, I didn't even see that because I was looking at the sides. The 3px padding problem in IE only affects the sides.
That black box is because of the way the image is vertically aligned by default. Read this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2005/01/13/block-vs-inline-3">http://www.autisticcuckoo.net/archive.p ... s-inline-3</a><!-- m -->) article to find out what the hell I just said.
However I would still strongly advise you to re-think the markup on your page and not to use an <img> tag for something that is merely for decoration.A better explaination: Images, Tables, and Mysterious Gaps (<!-- m --><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><!-- m -->)
I'm trying to make an all CSS site and was setting up my divs when I noticed this 3px padding/margin that IE adds into each div. I was aware of this bug and was able to fix most of them. However there is this really stubborn margin in my #contenthead div that I can't seem to get rid of. I tried the standard remedy fix for it, which is to add in an special IE only -3px margin code. But that didn't have any effect on it. Anyone ever come across this before and know how to fix it thanks.
Test Page (<!-- m --><a class="postlink" href="http://www.3e-motivations.com/a/test.htm">http://www.3e-motivations.com/a/test.htm</a><!-- m -->)
Stylesheet (<!-- m --><a class="postlink" href="http://www.3e-motivations.com/a/style.css">http://www.3e-motivations.com/a/style.css</a><!-- m -->)I don't see that problem in IE, screenshot attached.
However you do seem to suffer from <div>itis. Take the header for example:<div id="startpic">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"startpic.jpg">
</div>Perhaps something like this would be more appropriate:<h1>3eMotivations: Empowerment, Education & Entertainment</h1>And then use the image replacement technique of your choice (<!-- m --><a class="postlink" href="http://mezzoblue.com/tests/revised-image-replacement/index.php">http://mezzoblue.com/tests/revised-imag ... /index.php</a><!-- m -->) to put the banner over the top.The problem is the black part, it's not supposed to be there. Originally the background color fo the div was something that blended in better, but I changed it to black so it'd stick out. How do I get rid of the black part?<img src=http://www.webdeveloper.com/forum/archive/index.php/"banner.jpg" style="display:block;">Oh, the black bit, I didn't even see that because I was looking at the sides. The 3px padding problem in IE only affects the sides.
That black box is because of the way the image is vertically aligned by default. Read this (<!-- m --><a class="postlink" href="http://www.autisticcuckoo.net/archive.php?id=2005/01/13/block-vs-inline-3">http://www.autisticcuckoo.net/archive.p ... s-inline-3</a><!-- m -->) article to find out what the hell I just said.
However I would still strongly advise you to re-think the markup on your page and not to use an <img> tag for something that is merely for decoration.A better explaination: Images, Tables, and Mysterious Gaps (<!-- m --><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><!-- m -->)