SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra whitespace I can't figure out...

    Basically I am trying to slap a div box to the top and bottom of an image so that it looks like 2 black bars are on top and bottom sides of the image. But between the bottom div and the image is some whitespace that I cant figure out why it is happening?

    Here is my code and I have included a graphic attachment below to help you understand what is happening. How can I go about getting rid of that whitespace? Thanks so much for your help!

    HTML Code:
    <div id="wrapper">
        <div id="top"><a href="#">Header Text For Image</a></div>
        <img src="#" />
        <div id="bottom">Bottom Text For Image</div>
    </div>
    Code:
    * { margin:0; padding:0; font-family: Verdana, Arial;  }
    #wrapper #top {
    	background-color: #000;
    }
    
    #wrapper #top a {
    	line-height: 20px;
    	font-weight: bold;
    	color: #FFFF00;
    	text-decoration: none;
    }
    
    #wrapper #bottom {
    	background-color: #000;
    	line-height: 20px;
    	color: #FFF;
    	font-size: 9px;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    Omaha, NE
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The attachment is still pending approval, but you might try deleting all whitespace between the image and bottom div.

    Or just add a negative position offset to the bottom div, for kicks.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is just in IE, isn't it ? Mozz is OK.

    The problem is that the "row" on which you put the <img> tag does not have a break line, and IE "tries" to put one but it seems to misalign it.

    The solution is simple: add a <BR> after the <img> tag, like this:

    HTML Code:
    <div id="wrapper">
      <div id="top"><a href="#">Header Text For Image</a></div>
      <img src="#" /><br/>
      <div id="bottom">Bottom Text For Image</div>
    </div>
    Or put the <img> inside a <div> tag: the result will be the same - the important thing is to "break" the line


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
  •