SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap beween images in IE6 but fine in Firefox

    Hi all

    I was wondering if anyone could help...

    I have just started to switch from table layout design to div tags but have run across a slight problem:

    I have a title image split into 2 images (the image should appear to the user as one image) The images appear as one image in Firefox but there is a very small gap between the two images in IE6. I have set the margins and padding to 0.

    The image can be found at the following URL:

    http://www.fishe.co.uk/


    Any suggestions hugely appreciated
    A very frustrated
    Frisco

    Kewl forum by the way

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    line-height: 0 or display: block on the top div. It's to do with allowing room for descending letter forms (Paul explains it better than me).

    Alternatively, why not just make them one image? Stop thinking in table layouts!

    Off Topic:

    w00t - 600 posts!

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Buddy,

    I have tried placing the suggested code in the below titlecolumn1 + titlecolumn2 css code but unfortunately that doesn't seem to have worked. Is that where you meant for me to place it? Can you see what I am doing wrong? Probably being really thick!

    The below code is a title php file placed within a div container/wrapper:

    Code:
    <div class="titlecolumn1">
       <img src="Images/title/fishe_topimage.jpg">
    </div>
    <div class="titlecolumn2">		
       <ul id="topnavlist">
          <li><a href="sitemap.php">Site Map</a></li>
          <li><a href="disability.php">Disability</a></li>
       </ul>
    </div>			
    <div id="titleimage">
       <img src="images/title/fishe_mainimage.jpg" alt="Fishe title">	
    </div>
    Code:
    /*----------  Left Title Column with top half of image ------------*/
    div.titlecolumn1
    {
    	float: left;
    	width: 36em;
    	padding: 0 0 0 0;
    	margin: 0 0 0 0;
    	text-align: left;
    	display: block
    }
    /*-------------  Right Title Column with nav bar --------------*/
    div.titlecolumn2
    {
    	float: right;
    	width: 39em;	
    	padding: 0 0 0 0;
    	margin: 0 0 0 0;
    	text-align: center;	
    	display: block	
    }
    /*-------  Bottom part of image that spreads accross whole page-------*/
    #titleimage {
    		width: 76em;
    		border-style: solid;
    		padding: 0 0 0 0;
    		margin: 0 0 0 0;
    		line-height: 0;
    		border-top-width: 0px;
    		border-bottom-width: 1px;
    		border-left-width: 0px;
    		border-right-width: 0px;
    		text-align:left;
    		color: #990000;
    }
    Any help greatly received
    frisco

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding this to your CSS file (exactly)

    img {
    display: block;
    }


    Buddy Bradley was right about the way images are treated ...... they are seen as text so even if there is NO text in there is leaves room for the descenders in letters like j y etc.

  5. #5
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wehey! Thanks a lot that has sorted it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •