Gap between div image slices

  • Resolved snez

    (@snez)


    15 years, 9 months ago

    Hi,

    I made an image slice with Image Ready, the code works great in Flock but in IE there is a small gap between the images.

    Here is the code:

    <div id="lemonholder">
<div id="lemon-01">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_01.png" width="229" height="64" alt="" />
</div>
<div id="lemon-02">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_02.png" width="229" height="42" alt="" />
</div>
<div id="lemon-03">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_03.png" width="229" height="41" alt="" />
</div>
<div id="lemon-04">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_04.png" width="229" height="46" alt="" />
</div>
<div id="lemon-05">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_05.png" width="229" height="41" alt="" />
</div>
<div id="lemon-06">
	<img src="https://helter--skelter.net/kimenna/wp-content/themes/Bright-Day/images/lemon_06.png" width="229" height="97" alt="" />
</div></div>

    And the css:

    #lemon-01 {

	left:0px;
	top:0px;
	width:229px;
	height:64px;
padding: 0;
}

#lemon-02 {

	left:0px;
	top:64px;
	width:229px;
	height:42px;
padding: 0;
}

#lemon-03 {

	left:0px;
	top:106px;
	width:229px;
	height:41px;
padding: 0;
}

#lemon-04 {

	left:0px;
	top:147px;
	width:229px;
	height:46px;
padding: 0;
}

#lemon-05 {

	left:0px;
	top:193px;
	width:229px;
	height:41px;
padding: 0;
}

#lemon-06 {

	left:0px;
	top:234px;
	width:229px;
	height:97px;
padding: 0;
}

#lemonholder {
	width:229px;
	height:331px;

}

    Does anyone know what I can do to fix this?

    Thanks!

    [ moderated title to mixed case, all CAPS is considered yelling ]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Try adding this to your stylesheet:

    div {
  overflow: hidden;
}

    This will apply to all divs though — if you prefer you can add the overflow: hidden; property to all of the div ids in your above code instead of applying the overflow property to every div. Up to you.

    Alternatively, put all of the HTML code for this montage inside a container div (called imagecontainer in the code below), and then you could just do:

    #imagecontainer div {
   overflow: hidden;
}

    That’s a quicker way to apply the property to all the divs in the container without affecting all divs on the page.
    Hope this helps

    John

    Thread Starter snez

    (@snez)

    Worked great! Thanks so much! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gap between div image slices’ is closed to new replies.