www.webdeveloper.com
Results 1 to 8 of 8

Thread: why extra padding below my images?

  1. #1
    Join Date
    Jan 2007
    Posts
    43

    Unhappy why extra padding below my images?

    Could someone advise me on why I’m getting this extra padding... just below images in the header?!

    The css is written from scratch except for the reset style sheets from Yahoo’s UI. There shouldn’t be anything unusual there though. Nothing looks like padding or margin in the computed style from Google Chrome. The 2pixels of white space still shows below images when I delete all style sheets in FireBug.

    Thanks for any rapid help.
    Attached Images Attached Images

  2. #2
    Join Date
    Jul 2006
    Location
    England.
    Posts
    128
    Might sound silly, but the image itself doesn't have 2 pixels of white space?

    Also, have you set the img to have margin:0;padding:0; just to be sure? - I've never used Yahoo's reset style sheet I tend to reset elements at the beginning of my CSS, but it could be that the browser is automatically adding the space...

    oh, just noticed you are using a <br /> - that is likely the reason for the space. Bad practice to use <br /> to position elements on the page, make use of padding and margin.
    Last edited by SeanieC; 09-03-2009 at 11:48 AM.

  3. #3
    Join Date
    Jan 2007
    Posts
    43
    God grief - the <br /> tags did it. Thanks for posting your reply, I thought I checked that!

  4. #4
    Join Date
    Jul 2006
    Location
    England.
    Posts
    128
    no problems,

    Why are you using <br />? I might be able to give you an alternative way to position your images.

  5. #5
    Join Date
    Jan 2007
    Posts
    43
    That would be really handy. Some how, the spacing appeared again?!? Here's what the markup looks like --
    Code:
    <body class="front logged-in page-node one-sidebar sidebar-right sidebar-right">
    <div class="bwrap">
    		<div class="head">
    
    				<div class="globnav">
    						<div class="left"><img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_03.png" width="489" height="32"></div>
    						<div class="right"><img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_06.png" width="89" height="20"> <img src="/sites/all/themes/gossipgirl-r2/images/front/adler_explore_sketch_05a_09.png" width="14" height="14"></div>
    				</div>
    				<div class="panel">
    <img src="/sites/all/themes/gossipgirl-r2/images/front6/header.png" alt="" />
    <img src="/sites/all/themes/gossipgirl-r2/images/front6/header-02.png" alt="" />
    <img src="/sites/all/themes/gossipgirl-r2/images/front6/header-03.png" alt="" />
    <img src="/sites/all/themes/gossipgirl-r2/images/front6/header-04.png" alt="" /></div>

  6. #6
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163

    <img> is an inline element that sites on the baseline, leaving space
    beneath for descenders.

    To get rid of the space, use:

    Code:
    img { display: block; }

  7. #7
    Join Date
    Jan 2007
    Posts
    43
    Looks like it was the document type deceleration.... Changing from HTML strict to XHTML did it. This time I'm sure! Thanks for the help.

  8. #8
    Join Date
    Sep 2009
    Location
    Toronto, Ontario, Canada
    Posts
    163
    Since MSIE doesn't parse XHTML, changing the doctype doesn't really help, and it could lead to other problems (such as quirks mode).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles