Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout problem with xhtml and css

    hello,

    the markup below creates a table with a border and puts a row of images in to it. the problem is that IE as well as FF render a gap between the bottom edge of the images and the bottom edge of the table cell. i tried all sort of style combinations i could think of to no avail. if i get rid of the DOCTYPE directive the gap disappears. but i would prefer to stay with the strict mode if possible. please help!

    thanks!
    konstantin

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml1">
    <body>

    <table border="1">
    <tr>
    <td>
    <a href="#" style="display:inline-block;"><img src="http://localhost:8000/static/_150x150_0807140.jpg" style="display:block;" border="0"/></a><a href="#" style="display:inline-block;"><img border="0" style="display:block;" src="http://localhost:8000/static/_150x150_0807141.jpg"/></a>
    </td>
    </tr>
    </table>

    </body>
    </html>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try adding this instead and see if it helps

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>blah</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    </style>
    </head>
    <body>
    
    <table border="1">
    <tr>
    <td>
    <a href="#" style="display:inline-block;"><img src="http://localhost:8000/static/_150x150_0807140.jpg" style="display:block;" border="0"/></a><a href="#" style="display:inline-block;"><img border="0" style="display:block;" src="http://localhost:8000/static/_150x150_0807141.jpg"/></a>
    </td>
    </tr>
    </table>
    
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The problem arises from images being inline and the <a> is inline. Inline elements are set to the base of the text so there is a slight gap at the bottom for the type descenders. To get the images to the bottom of the line, add 'vertical-align:bottom' to the images (and I think you'll have to do it to the <a> also).

    As an aside, while you are correctly using the xml prologue, the very first line, only modern browsers handle that properly while IE goes into quirks mode (can't recall if this was fixed in IE7 or will be fixed in IE8). Best to remove it.

  • #4
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Quote Originally Posted by drhowarddrfine View Post
    .......... As an aside, while you are correctly using the xml prologue, the very first line, only modern browsers handle that properly while IE goes into quirks mode (can't recall if this was fixed in IE7 or will be fixed in IE8). Best to remove it.
    An excellent reference:

    W3C Tutorial - Serving XHTML 1.0

    JFP
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks everyone!

    setting margins and padding to 0 helped only in FF, but not in IE, so i ended up setting the vertical-align style on anchors (but not on images), and it seems to work.

    cheers
    konstantin

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    from the top, other wise IE will turn in to quirks mode.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Quote Originally Posted by abduraooft View Post
    Remove
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    from the top, other wise IE will turn in to quirks mode.
    True for IE6 but not for IE7 and IE8 -- both will render pages that contain the above prolog in Strict compliance mode (but still without XML functionality).

    Ref: IE Blog

    JFP
    Last edited by jamesicus; 11-19-2008 at 04:20 PM. Reason: correction
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • Users who have thanked jamesicus for this post:

    oesxyl (11-19-2008)


  •  

    Tags for this Thread

    Posting Permissions

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