SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spaces added to Image with XHTML Strict

    Sorry meant to say XHTML Strict.

    I'm doing a project for a course I'm doing in which I have to create a website using XHTML 1.0 Strict (along with javascript/CSS etc).

    I have problems aligning my images in my banner. It works fine in XHTML transitional but once i switch to Strict a line is created below one of the images (in both Firefox and Explorer):



    Heres a link to the code/pages:

    Test Site

    The Home page and Gallery pages are both set to strict and you can see the space but if you at the other pages (which are transitional) there is no gap.

    I think its something about the baseline for the images but not sure how to sort it. Is there anything i can add to my CSS style **** to fix it..

    Thanks - I appreciate any help on this.

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    An img, being an inline element, allows space at the bottom for text descenders. To remove the space, either set the img to display:block; or vertical-align:bottom;

    That said, as the patterned area of the image is purely decorative, it may be better placed as a background image on #header.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I suspect is a case the page syntax has errors and the 'Almost standards mode' is triggering with Transitional. I suspect applying vertical-align: bottom; on the IMG would solve the issue though it might not be the most efficient method.
    Last edited by xhtmlcoder; Dec 19, 2011 at 14:08. Reason: Posted in unison with Vic.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,195
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    A clean solution that would avoid alignment issues would be to use display: block which will be easier to manage, a much more elegant solution would be to just use a transitional <!DOCTYPE>

  5. #5
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help..

    First thing I tryed (from google) was put a display:block; CSS rule to #header but that put the navbar images in a vertical column.
    I then split the top image and the 6 rollover gifs into 2 different DIVS and applied (approiate)height/margin:0; padding:0; to each and that seemed to sort. I didn't get a chance to try the vertical-align: bottom rule though. Would you do that to the top image or the row of rollover gifs or all the images in the header.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Vertical-align (which doesn't have to be set to bottom tho that's most popular; it just has to be set to something other than the default "baseline" really) is what you'd use if you need to keep the images inline. So, you automatically get rid of descender space when you make the img a block with display: block or float or whatever, but if that causes problems then vertical-align solves it.

    First thing I tryed (from google) was put a display:block; CSS rule to #header but that put the navbar images in a vertical column.
    The display: block stuff, if you use it, goes on the HTML <img> element who's creating the space. Not any boxes around. Descender space, if there is any, is always on the bottom of the image. It's room for the dangly parts (descenders) of our text (qpgjy etc). So you look to see which image has this space underneath it. That'd be the one you'd need to add vertical-align to.

    (so, in your case, it would be #header img {vertical-align: bottom;})
    Background images don't create descender space. None of the above solutions are for boxes who happen to have a background image in them.

    You might want to take another look at your menu as well. The anchors are also inline, and smaller than the images they contain. If you check your page out with a debugger that highlights page elements like Firebug, you'll see your menu has a sort of TARDIS-effect going on.


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
  •