SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)

    Seemless CSS image spacing

    I have been working on a project for a while, even though it is nearly complete I have still got this outstanding problem. I chose to ignore it but since I found this forum I thought I would give it one last try.

    Basically I created one image in a graphics package then split it up to create roll overs. The image however has a seem going through it, you can see a fine pink line (since my site is pink; to represent skin tone).

    I tried adjusting the font-size property to 0, the line height property, margin to 0 0 0 0, padding to 0 0 0 0. It seems nothing works. But the odd thing about it is that in IE and FF the padding is displayed differently. I am not sure what the deal it.

    I can put the code up if it helps, it's when I put all the code on a separate page, the padding on the images once again displayed differently. If anybody has any information on this topic I would really help.

    Kind Regards,

    Sega

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A link to the site would be helpful if there is one, if no site then please post your code. Is the line you see where the sliced images are supposed to come together to make the whole picture?
    Joe

  3. #3
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)

    The code

    The image it's self is sliced, which was done in order to create the roll over effects. Anyway, it seems that there is extra padding everywhere, and I don't know where it came from. My goal is not for a quick solution, I truly want to understand what went wrong.

    The link to the website is, http://www.oddworm.com/sitepoint/.

    Some of the sample code is below if it helps. If there are any problems do not hessitate to reply. :-)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    	 #layout {min-width: 650px; 
                max-width:700px;
    						height:auto; }
    						
    	 .buttoncontainer {
    	 			 font-size:0px; 
    				 border:0;
    				 line-height:0px;
    
    					 }
    				 
    				 
    	 .buttoncontainer img {
    	                  border:0px; 
    										
    					 					 }
    
    	 .mainbut {height: auto; 
    	 					 width:700px; 
    						 min-width: 650px; 
    						 max-width:700px; 
    						 padding-right: 10px; 
    						 padding-left:10px; 
    						 margin-top: 0px; 
    						 margin-bottom:0px; 
    						 border-bottom:0px solid #cc9999;
    						 border-right: 2px solid #cc9999; 
    						 border-left: 2px solid #cc9999; 
    						 border-top: 2px solid #cc9999; 
                 font-family:"Trebuchet MS"; 
    						 border-style: solid;
    						 background-color:#EBD1D0; 
    						 padding-top:22px; 
    						 padding-bottom:9px;}
    /**/
    -->
    </style>
    
    </head>
    
    <body style="background-image: url(bg.gif); background-position:top left;">
    
    <div id="layout">
    <div class="mainbut" style="text-align:center;">
    <div class="buttoncontainer">
    <div>
      <a href="index.php">
    	  <img src="images/menu/1.jpg" alt="oddworm.com" class="button" onmouseover="src='images/menu/o_1.jpg'" onmouseout="src='images/menu/1.jpg'" onmousedown="src='images/menu/d_1.jpg'" onmouseup="src='images/menu/1.jpg'" />
    	</a>
    
    
    
      <a href="od_staytuned.php">
    	 <img src="images/menu/2.jpg" alt="stay tuned" class="button" onmouseover="src='images/menu/o_2.jpg'" onmouseout="src='images/menu/2.jpg'" onmousedown="src='images/menu/d_2.jpg'" onmouseup="src='images/menu/2.jpg'" />
    	</a>
    	</div>
      
    	<img src="images/menu/3.jpg" alt="" class="button" />
    
      <a href="index.php">
    	  <img src="images/menu/4.jpg" alt="home" class="button" onmouseover="src='images/menu/o_4.jpg'" onmouseout="src='images/menu/4.jpg'" onmousedown="src='images/menu/d_4.jpg'" onmouseup="src='images/menu/4.jpg'" />
    	</a>
    
      <a href="od_dev_preprod.php">
    	  <img src="images/menu/5.jpg" alt="develop" class="button" onmouseover="src='images/menu/o_5.jpg'" onmouseout="src='images/menu/5.jpg'" onmousedown="src='images/menu/d_5.jpg'" onmouseup="src='images/menu/5.jpg'" />
    	</a>
    
      <a href="od_aboutus.php">
    	  <img src="images/menu/6.jpg" alt="about" class="button" onmouseover="src='images/menu/o_6.jpg'" onmouseout="src='images/menu/6.jpg'" onmousedown="src='images/menu/d_6.jpg'" onmouseup="src='images/menu/6.jpg'" />
      </a>
     
      <img src="images/menu/7.jpg" alt="" class="button">
    
      <a href="od_watchit.php">
    	  <img src="images/menu/8.jpg" alt="watch it" class="button" onmouseover="src='images/menu/o_8.jpg'" onmouseout="src='images/menu/8.jpg'" onmousedown="src='images/menu/d_8.jpg'" onmouseup="src='images/menu/8.jpg'" />
      </a>
    	
    </div>
    </div>
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at your site in firefox and did not see the lines. However in ie7 I did see vertical lines on the multi-colored button background. It sure looks like the border is getting applied in ie7. The lines are exactly where the edges of the images are. Also, in your html, I saw you want to use a specific IE css style sheet which I couldn't find. Experiment with zeroing out the border on each img to see if the line goes away. May be dealing with inheritance issue.
    Joe

  5. #5
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    I did not link that CSS file for IE. It is basically for hover over effects. I am thinking of removing the file completely.

    I feel the problem is within the container div or the link, but I cannot isolate it. I zeroed all the borders, margins, and paddings and still got nothing. This is a real challange.

    Edit: Does anybody have experience with this? I would be interested to know how somebody else addresses this issue,
    Last edited by Sega; Mar 27, 2008 at 15:09. Reason: Typos, need to put more content in message

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please see the following:
    http://www.webdeveloper.com/forum/sh...ad.php?t=64944

    The line breaks in the html between the images is what is causing the extra space in ie. You basically have two horizontal menus here that just happen to be part of a big image. Maybe you could consider using an unordered list and use floats. Otherwise all your "a" tags and "img" will all have to be crammed together making it hard to maintain.
    Joe

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Remove the whitespace from the html between all the image tags and the anchor tags in that section.

    e.g. close all the gaps like this.

    Code:
    menu/4.jpg'" /></a><a href="od_dev_preprod.php"><img

    IE will treat those gaps almost like the space between text and you will get gaps between your images so close up all the tags in that top section.

    You should also be doing those rollover effects with css instead of those multiple mouseovers. I would have used background image sprites in the anchors for the rollovers and save yourself all those image tags in the html.

    Also use shorthand for css where possible especially with margin,padding and borders.

    You have this:

    Code:
     padding-top: 10px; 
    padding-bottom: 10px; 
    padding-right:10px; 
    padding-left:10px;
    border-bottom: 2px solid #cc9999; 
    border-right: 2px solid #cc9999; 
    border-left: 2px solid #cc9999;
    border-top:0px
    which could be reduced to this:

    Code:
    padding:10px; 
    border: 2px solid #cc9999; 
    border-top:none;
    That's about a 70&#37; saving in code for very little effort.

  8. #8
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    Both Paul OB and Young72 where spot on. I would have never figured that one out on my own. Thanks. There is me thinking line breaks are not intepretted.

    PS: I will learn shorthand too, it just takes a bit of time. But it's worth learning.

  9. #9
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    I can still see a some padding in FF, it's represented by a fine line through the image. It kind of looks unproffesional.

    The problem is now fixed with IE though. Maybe it has something to line-height, or the padding. I tried altering the padding in the button but there is still a spacing between. This is really baffling me.

    Code:
        <div class="mainbut"
             style="text-align:center;">
          <div class="buttoncontainer" style="">
            <a href="index.php"><img src="images/menu/1.jpg"
                 alt="oddworm.com"
                 class="button"
                 onmouseover="src='images/menu/o_1.jpg'"
                 onmouseout="src='images/menu/1.jpg'"
                 onmousedown="src='images/menu/d_1.jpg'"
                 onmouseup="src='images/menu/1.jpg'"></a><a href=
                 "od_staytuned.php"><img src="images/menu/2.jpg"
                 alt="stay tuned"
                 class="button"
                 onmouseover="src='images/menu/o_2.jpg'"
                 onmouseout="src='images/menu/2.jpg'"
                 onmousedown="src='images/menu/d_2.jpg'"
                 onmouseup="src='images/menu/2.jpg'"></a><br>
            <img src="images/menu/3.jpg"
                 alt=""
                 class="button"><a href="index.php"><img src=
                 "images/menu/4.jpg"
                 alt="home"
                 class="button"
                 onmouseover="src='images/menu/o_4.jpg'"
                 onmouseout="src='images/menu/4.jpg'"
                 onmousedown="src='images/menu/d_4.jpg'"
                 onmouseup="src='images/menu/4.jpg'"></a><a href=
                 "od_dev_preprod.php"><img src="images/menu/5.jpg"
                 alt="develop"
                 class="button"
                 onmouseover="src='images/menu/o_5.jpg'"
                 onmouseout="src='images/menu/5.jpg'"
                 onmousedown="src='images/menu/d_5.jpg'"
                 onmouseup="src='images/menu/5.jpg'"></a><a href=
                 "od_aboutus.php"><img src="images/menu/6.jpg"
                 alt="about"
                 class="button"
                 onmouseover="src='images/menu/o_6.jpg'"
                 onmouseout="src='images/menu/6.jpg'"
                 onmousedown="src='images/menu/d_6.jpg'"
                 onmouseup="src='images/menu/6.jpg'"></a><img src=
                 "images/menu/7.jpg"
                 alt=""
                 class="button"><a href="od_watchit.php"><img src=
                 "images/menu/8.jpg"
                 alt="watch it"
                 class="button"
                 onmouseover="src='images/menu/o_8.jpg'"
                 onmouseout="src='images/menu/8.jpg'"
                 onmousedown="src='images/menu/d_8.jpg'"
                 onmouseup="src='images/menu/8.jpg'"></a>
          </div>
        </div>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I can still see a some padding in FF,
    Whereabouts is the problem exactly as I can't see it in this link?

  11. #11
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    I can see it, one second.... here.

    .

    It might be my version of FF, but the last time I checked it was the latest. To the untrained eye you might miss it, but for the developer there is no chance.

    It might have something to do with the br tag, but I am not certain.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    To the untrained eye you might miss it, but for the developer there is no chance.
    Don't get cheeky

    My eyes are well trained and do exactly as I tell them

    Perhaps your eyes are over-trained because there is no gap in Firefox 2.0 as the attachment shows.

    You'll have to be more specific with the browser version and provide a link to that page if its not the same as the link you gave me before. If it's the same link and the same browser then have you cleared your cache?
    Attached Images Attached Images

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If you have closed all the gaps in the code as I instructed above and you are still seeing a gap then also try the following CSS.

    Code:
    .buttoncontainer img{vertical-align:bottom;}

  14. #14
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    Sorry I am having problems with my web server, I will get back to you once it's all sorted. I did not mean to sound cheecky, lol, it's kind of a bad habbit of mine. lol, I did not mean to direct that to yourself Paul.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    No Problems - it made me laugh anyway

  16. #16
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    I had a super busy week. Sorry I could not get in touch quicker. As for the problem, you were 100&#37; correct with that vertical-align property. By setting it to vertical-align:bottom; I was able to fix it.

    As for your questions, here is my browsers version.




    Maybe your version of FF is set up differently to mine.

    Not sure what happened with my web server either. It's online now. It does not exactly cost me an arm and a leg.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok -well glad its fixed now anyway

  18. #18
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    71 Post(s)
    Tagged
    1 Thread(s)
    No worries, lol, maybe one day my overly trained eyes might become useful.


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
  •