| Author |
1px gap between divs in IE for win
|
|
| arielwfox@hotmail.com 2005-11-09, 6:59 pm |
| 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/newsi...kersisters4.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 2005-11-09, 6:59 pm |
| arielwfox@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/newsi...kersisters4.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 2005-11-09, 6:59 pm |
| arielwfox@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@hotmail.com 2005-11-09, 6:59 pm |
| that was simple! got rid of the linebreak after the image and it works
perfectly. thanks so much.
| |
| meltedown 2005-11-26, 10:16 pm |
| arielwfox@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/newsi...kersisters4.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 2005-11-26, 10:16 pm |
| meltedown wrote:
> arielwfox@hotmail.com wrote:
>
>
> 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.
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |