SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment Problem in Chrome

    I have this tables with one row containing a div. The div contained an image with height of 76px. It displays fine in FF and IE. But...it screws up in chrome!

    I'm surprised cause I'd always thought Chrome and FF were based on the same engine?

    Doing a offsetHeight tr check shows 113px in chrome, and 87 in FF. Is there some issue I have to take note of for chrome?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link so we can take a look?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As Ryan said we'd need to see the page as Chrome doesn't normally have an issue with this.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually i tried doing a simple table with a div and image. I can't recreate the height problem, but I can still see a difference in tr width for this table below between chrome n ff. FF shows 348, Chrome shows 352. Any clues?

    Code HTML4Strict:
    <!DOCTYPE html>
    <head>
    <html>
    <style type="text/css">
    * {padding:0;margin:0;}
    div.catagory-title-wrapper {background:none;z-index:-1;position:relative;}
    </style>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    </head>
    <body>
    <table id="s_table">
    <tr id="s_row">
    	<td id="s_cell">
    	<div class="catagory-title-wrapper"><img src="someimage.png" id="s_img"/></div>
    	</td>
    </tr>
    </table>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'm getting the same results for Firefox and for Chrome with the above code.

    An image is an inline (replaced) element and depending on browsers, doctype etc it will be placed on the baseline of the cell and not the bottom thus pushing the cell higher to allow room for descenders.

    You would need to set the image to vertical-align:bottom (or set it's display to block) to kill all the whitespace.

    Remember also that any whitespace between the td tags will be treated as space between words and may increase the width/height depending on browser so always close the tag at the end of the content and don;t leave gaps.

    However, I didn't see any of this issues when testing with your code above but they are common issues.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you do? hmm..weird. i'd fixed the problem giving some fixed height to my elements.

    I'll try to do another page just for testing purpose when I have the time. Thanks for checking it out though.


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
  •