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/newsite/stickersisters4.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 - 07 Nov 2005 06:32 GMT
> 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/newsite/stickersisters4.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
arielwfox@hotmail.com - 07 Nov 2005 21:36 GMT
that was simple! got rid of the linebreak after the image and it works
perfectly. thanks so much.
Spartanicus - 07 Nov 2005 08:25 GMT
>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}

Signature
Spartanicus
meltedown - 27 Nov 2005 01:52 GMT
> Hi everyone.
> This is my first attempt with CSS and I've run into a little problem
[quoted text clipped - 10 lines]
> 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/newsite/stickersisters4.css
[quoted text clipped - 38 lines]
> color: #330033;}
> div#topnavcontainer ul li a:hover{color:#003333;}
meltedown - 27 Nov 2005 01:54 GMT
>> Hi everyone.
>> This is my first attempt with CSS and I've run into a little problem
[quoted text clipped - 13 lines]
> 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.