SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Great White North
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    bah! another IE spacing issue...

    I have two objects and I want each of them too have a border. The top element has a border-bottom definition, the bottom element has a border-top definition to create the following effect seen rendering the way I want in Firefox:



    unfortunately in IE6 I get the this:



    here is the code for the page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style media="all" type="text/css">
    <!--
    /* commented backslash hack v2 \*/ 
    html, body, #yellowBox{height:100%;} 
    /* end hack */
    
    body {
    	background-color:#fff;
    	text-align:center;
    	margin:0;
    	padding:0;
    	}
    	
    #yellowBox {
    	width:540px;
    	background-color:#fcfbf5;
    	margin: 0 auto;	
    	padding:0;
    	}
    #yellowBox #title {
    	margin:10em 0 .5em 0;
    	}
    
    #yellowBox #imgPrison {
    	width:540px;
    	height:104px;
    	border-bottom: 2px #066d89 solid;
    	}
    
    #yellowBox #divEorF {
    	width:540px;
    	height:30px;
    	background-color:#eff7f9;
    	border-top: 5px #ede4ae solid;
    	}
    	
    #yellowBox #divEorF a {
    	display: block;
    	width:260px;
    	height:30px;
    	text-align: center;
    	font: 12pt arial, verdana, helvetica, sans-serif;
    	float: left;
    	}
    -->
    </style>
    </head>
    <body>
    <div id="yellowBox">
    <img src="images/splash-title-words.gif" id="title" /><img src="images/splash-image.jpg" id="imgPrison" />
    <div id="divEorF"><a href="en/default.htm">English</a> <a href="en/default.htm">French</a></div>
    </div>
    </body>
    </html>
    This little problem always seems to haunt me. I'm working on another page where IE is adding extra space to an image element while Mozilla renders it perfectly.

    What am I doing wrong?

    Any help would be appreciated... I have agonized over this for two days now

    COB

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding font-size: 0px; to your body declaration. It seems to fix a LOT of IE spacing issues.

    Note that if do this you'll need to specifically declare the font size of all your textual elements.

    Lemme know if it works for you.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Great White North
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rabbit
    Try adding font-size: 0px; to your body declaration. It seems to fix a LOT of IE spacing issues.

    Note that if do this you'll need to specifically declare the font size of all your textual elements.

    Lemme know if it works for you.
    I'll try it out and let you know! Thanks for your quick response!

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Great White North
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    well...

    the font-size:0; reduced the gap between elements significantly but there is still a 1px gap. It also played some havoc with my paddings.

    I'm not sure if this is the answer...

    I appreciate your help Rabbit!

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Great White North
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ah ha!

    I was just browsing through some past threads and stumbled upon one of Paul OB's tips about applying display:block to your img, which seemed to take care of it!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes I think cobs correct. Either display:block or vertical-align:bottom should fix it.

    Code:
    img {display:block}
    Images will sit on the same baseline as text and leave room for descenders underneath. Setting display:block usually does the trick or if the images must remail inline thene vertical-align:bottom should also suffice.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool beans. I'll have to try that out myself. GJ cobs on doing the search.

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Great White North
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Yes I think cobs correct. Either display:block or vertical-align:bottom should fix it.

    Code:
    img {display:block}
    Images will sit on the same baseline as text and leave room for descenders underneath. Setting display:block usually does the trick or if the images must remail inline thene vertical-align:bottom should also suffice.

    Paul
    thanks again Paul, the vertical-align fixed the problem. I'm going to have to start paying you soon

    you certainly help a lot of people out around here... very much appreciated!


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
  •