1px gap between divs in IE for win

[arielwfox]

Hi everyone.
This is my first attempt with CSS and I've run into a little problem
when it's viewed in IE 6 for Windows. It looks fine in Firefox, Safari,
Opera, and IE on the mac.
I've read through tons of postings and tried everything I can think of,
but I just can't seem to get rid of this small gap between my
div#header and div#topnav.
I'd love any suggestions. I'm eager to learn so if you have any other
suggestions about my style sheet please let me know.
Thanks!
Ariel

page is here:
http://www.stickersisters.com/newsite/index4.htm

full css is here:
http://www.stickersisters.com/newsit...ersisters4.css

here's the section I'm having the problem with:

<div id="mainwrap">
<div id="header"><img src="images_content/penbanner4.gif" alt="Sticker
Sisters" width="774" border="0"/>
</div> <!-- end header "banner"-->
<div id="topnav">
<div id="topnavcontainer">
<ul>
<li> <a href="">home</a></li>
<li> <a href="">shop</a></li>
<li> <a href="">about</a></li>
<li> <a href="">blog</a></li>
<li> <a href="">activism</a></li>
<li> <a href="">links</a></li>
</ul>
</div><!--end top nav container-->
</div> <!-- end top nav-->

-------------------------------------------------------------------------------
here's the css for that section:

body {margin:0px; padding:0px; font: 1.0em arial, verdana, sans-serif;
text-align:center;background-color:#330033;}
* {margin:0; padding:0; }

div#mainwrap {width:774px; margin-left:auto; margin-right:auto;
margin-top:0; text-align:left;}
div#header {width:774px; height:103px; margin:6px 0 0 0;
background-color:#330033; text-align:center; }
div#topnav {width:774px; height:36px; background-color:#CCCCFF;
text-align:center; margin:0; padding-top: 8px;}
div#topnavcontainer ul{list-style-type:none; margin:0; padding:0;
text-align:center; }
div#topnavcontainer ul li {display: inline; font-size: 1em;
font-weight:bold; }
div#topnavcontainer ul li a{text-decoration:none; padding:.2em 1em;
color: #330033;}
div#topnavcontainer ul li a:hover{color:#003333;}

[twaddle]

ar*******@hotmail.com wrote:

I just can't seem to get rid of this small gap between my page is here:
http://www.stickersisters.com/newsite/index4.htm full css is here:
http://www.stickersisters.com/newsit...ersisters4.css <div id="mainwrap">
<div id="header"><img src="images_content/penbanner4.gif" alt="Sticker
Sisters" width="774" border="0"/>
</div> <!-- end header "banner"-->

It's the same old problem as occurs with images in tables. Get rid of
the linebreak (in the code) after the image.
<div><img></div>
Making the image 'display: block' should also work.

twaddle

[Spartanicus]

ar*******@hotmail.com wrote:

but I just can't seem to get rid of this small gap between my
div#header and div#topnav.

img{vertical-align:text-bottom}

--
Spartanicus

[arielwfox]

that was simple! got rid of the linebreak after the image and it works
perfectly. thanks so much.

[meltedown]

ar*******@hotmail.com wrote:

Hi everyone.
This is my first attempt with CSS and I've run into a little problem
when it's viewed in IE 6 for Windows. It looks fine in Firefox, Safari,
Opera, and IE on the mac.
I've read through tons of postings and tried everything I can think of,
but I just can't seem to get rid of this small gap between my
div#header and div#topnav.
I'd love any suggestions. I'm eager to learn so if you have any other
suggestions about my style sheet please let me know.
Thanks!
Ariel

page is here:
http://www.stickersisters.com/newsite/index4.htm File Not Found
The requested URL was not found on this server.
full css is here:
http://www.stickersisters.com/newsit...ersisters4.css

here's the section I'm having the problem with:

<div id="mainwrap">
<div id="header"><img src="images_content/penbanner4.gif" alt="Sticker
Sisters" width="774" border="0"/>
</div> <!-- end header "banner"-->
<div id="topnav">
<div id="topnavcontainer">
<ul>
<li> <a href="">home</a></li>
<li> <a href="">shop</a></li>
<li> <a href="">about</a></li>
<li> <a href="">blog</a></li>
<li> <a href="">activism</a></li>
<li> <a href="">links</a></li>
</ul>
</div><!--end top nav container-->
</div> <!-- end top nav-->

-------------------------------------------------------------------------------
here's the css for that section:

body {margin:0px; padding:0px; font: 1.0em arial, verdana, sans-serif;
text-align:center;background-color:#330033;}
* {margin:0; padding:0; }

div#mainwrap {width:774px; margin-left:auto; margin-right:auto;
margin-top:0; text-align:left;}
div#header {width:774px; height:103px; margin:6px 0 0 0;
background-color:#330033; text-align:center; }
div#topnav {width:774px; height:36px; background-color:#CCCCFF;
text-align:center; margin:0; padding-top: 8px;}
div#topnavcontainer ul{list-style-type:none; margin:0; padding:0;
text-align:center; }
div#topnavcontainer ul li {display: inline; font-size: 1em;
font-weight:bold; }
div#topnavcontainer ul li a{text-decoration:none; padding:.2em 1em;
color: #330033;}
div#topnavcontainer ul li a:hover{color:#003333;}

[meltedown]

meltedown wrote:

ar*******@hotmail.com wrote:

Hi everyone.
This is my first attempt with CSS and I've run into a little problem
when it's viewed in IE 6 for Windows. It looks fine in Firefox, Safari,
Opera, and IE on the mac.
I've read through tons of postings and tried everything I can think of,
but I just can't seem to get rid of this small gap between my
div#header and div#topnav.
I'd love any suggestions. I'm eager to learn so if you have any other
suggestions about my style sheet please let me know.
Thanks!
Ariel

page is here:
http://www.stickersisters.com/newsite/index4.htm

File Not Found
The requested URL was not found on this server.

oops. I thought I was responding to a new post, but its from 3 weeks ago
and has already been answered. my mistake.