Tue, 2005-06-14 22:20
hi there
i got a new design half way done but now i have run into a problem i can't figure out. firefox generates a strange 1px gap between two divs with background-img. IE is displaying correctly.
margin: 0; -> doesn't change anything
margin-top: -1px; -> the blue overlaps the dotted line in IE 
/* CSS */
#sidebar-title{
background: url(sb_pogo_title.gif) no-repeat bottom;
text-align: center;
font-size: 11px;
color: black;
margin: 0;
padding: 3px 0 3px 0;
}
#sidebar-pogo {
background: url(sidebar_pogo.gif) repeat-y 0 0;
}
#sb-space {
background: url(sidebar_space.gif) no-repeat top;
}
<!-- HTML --> <div id="sb-space"> </div> <div id="sidebar-title">pogoplaner v.13</div> <div id="sidebar-pogo"> <ul> <li><a href="about:oida">bla</a></li> <li><a href="about:oida">bla</a></li> <li><a href="about:oida">bla</a></li> </ul> </div> <div id="sb-space"> </div> </div> <!-- SIDEBAR END--> <div class="clear"> </div> </div> <!-- container end -->
thanks for any suggestions
Tue, 2005-06-14 22:23
#1
1px gap in firefox between divs
oh, i forgot :oops:
here's a link to the page
Wed, 2005-06-15 01:02
#2
1px gap in firefox between divs
sidebar-title is used twice as an id - change it to a class and test.
Wed, 2005-06-15 05:31
#3
1px gap in firefox between divs
changed
#sb-space
#sidebar-title
into
.sb-space
.sidebar-title
but it doesn't the affect the gap
thanks for the tip anyway
Wed, 2005-06-15 07:29
#4
1px gap in firefox between divs
IE doesn't display things correctly.
Anyway, using this CSS:
margin-top: 1px !important;
undert the other margin declarations you have. IE won't see this.
However, there's got to be a better silution.
Wed, 2005-06-15 08:11
#5
1px gap in firefox between divs
thepineapplehead wrote:
IE doesn't display things correctly.
Anyway, using this CSS:
margin-top: 1px !important;
undert the other margin declarations you have. IE won't see this.
However, there's got to be a better silution.
yah, the code looks a little bit grubby but it WORKS for my design! 
Thanks! =D>
here's what i've done:
#sidebar-pogo {
background: url(sidebar_pogo.gif) repeat-y 0 0;
margin-top: -1px !important; /* for the sexy browsers */
margin-top: 0px; /* for IE5/Win :*( */
}
Wed, 2005-06-15 08:12
#6
1px gap in firefox between divs
I would have suggested putting it under the margin: 0px; but hey, if it works, it works.