WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Gap between div image slices (3 posts)

  1. snez
    Member
    Posted 5 years 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="http://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="http://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="http://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="http://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="http://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="http://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 ]

  2. SpankMarvin
    Member
    Posted 5 years ago #

    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

  3. snez
    Member
    Posted 5 years ago #

    Worked great! Thanks so much! :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.