6 replies [Last post]
pajal_mc
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2005-06-14
Posts: 4
Points: 0

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 Sad

/* 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">&nbsp;</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">&nbsp;</div>

</div> <!-- SIDEBAR END-->
<div class="clear">&nbsp;</div>

</div> <!-- container end -->

thanks for any suggestions

pajal_mc
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2005-06-14
Posts: 4
Points: 0

1px gap in firefox between divs

oh, i forgot :oops:
here's a link to the page

http://mongocity.sundries.at/try_funky4.html

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 37 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

1px gap in firefox between divs

sidebar-title is used twice as an id - change it to a class and test.

pajal_mc
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2005-06-14
Posts: 4
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

pajal_mc
Offline
newbie
Last seen: 14 years 22 weeks ago
Joined: 2005-06-14
Posts: 4
Points: 0

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! Laughing out loud

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  :*(  */
   }

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 13 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

1px gap in firefox between divs

I would have suggested putting it under the margin: 0px; but hey, if it works, it works.

Verschwindende wrote:
  • CSS doesn't make pies