SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I get the same margins/padding in IE, FF, Chrome?

    Hello,

    How can one get the same exact margin & padding for an element in IE, FF, Chrome?
    To be exact take a look at this URL with Chrome:
    www.anoox.com

    Please look at the section under "Last 5 Questions Posted". The margins for each
    of the Member Thumbnail fotos with their Question in front of it are correct under
    Chrome. But if you look at the same with FF or IE you will see that they display
    the same items with about 10% more Height, thus rendering the display wrong.

    So what CSS code does one need to use in these Tables to result in the same
    exact Height for this section under all browsers?

    Note: I used this CSS style code in row that holds each of the member Thumbnail fotos
    with their Question:

    style="margin: 0px; padding: 0px;"

    it made things lil better, but still the Height is not exactly the same
    across browsers.


    ThanX

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try Eric Meyer's reset: link.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    It sounds like you are trying to get rid of the space beneath the thumbs or at least have some control over it.

    Try adding to your css:
    Code:
    img {display:block;}

  4. #4
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks. This helped a lil. But the Height of the rows of member (thumbnail _ questions) are still taller, by about 5 or 10px, in IE and FF compared to Chrome. So basically Chrome is displaying these rows at right Height but not IE or FF.

    Quote Originally Posted by ronpat View Post
    It sounds like you are trying to get rid of the space beneath the thumbs or at least have some control over it.
    Try adding to your css:
    Code:
    img {display:block;}

    Anoox search engine volunteer

    www.anoox.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Thanks. This helped a lil. But the Height of the rows of member (thumbnail _ questions) are still taller, by about 5 or 10px, in IE and FF compared to Chrome. So basically Chrome is displaying these rows at right Height but not IE or FF.
    You haven't added the code yet so we can't check if you did it right. When I add the code you your live site I get pixel perfect rows in Firefox and chrome.

  6. #6
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    But I have added the code.
    That is I added the code:

    <style>
    img {display: block;}
    </style>


    So of course now any img tag on this page, will be affected by this new CSS code. And in fact after I added this code the blank space below the member Tumb-nail fotos did get reduced a bit, but it is still not same across browsers.


    Quote Originally Posted by Paul O'B View Post
    You haven't added the code yet so we can't check if you did it right. When I add the code you your live site I get pixel perfect rows in Firefox and chrome.

    Anoox search engine volunteer

    www.anoox.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Images are inline elements similar to text and are placed by default on the baseline just like text is which allows room underneath for descenders.

    As Ron said above setting the image to display:block will stop the image being aligned on the baseline and the space will collapse to the images height. In most cases you could also set vertical-align:top or vertical-align:bottom to remove the space also but some browsers vary so display:block is the safest.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    WorldNews,

    The code snippit does not appear in style_new.css and there are no style tags at the top of the HTML page. Can you please tell us exactly where you have inserted that code?

    It needs to appear in style_new.css and may need to be targeted so all images are not affected. You would have to make that determination, though.

  9. #9
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Actually we ended up doing away with that layout and went with a new new layout.
    And we have a similar problem, which appears some times but not all the time.
    It is fastest if I try to show you the actual problem, I say try because again the problem does not appear all the time.
    1st how can that be possible.
    Anyway, take a look at the home page of www.anoox.com
    you will see that the member Thumb-nail fotos under "Last 5 Questions Posted" are not always the same dimensions as the
    member Thumb-nail fotos under the "Top 5 Questions Posted Recently", thus creating an un-even balance between the
    member Thumb-nail fotos under "Last 5 Questions Posted" vs member Thumb-nail fotos under the "Top 5 Questions Posted Recently"
    and this is even though that teh width & height values for all the Thumb-nail fotos are dynamically generated to be the same value!

    How can this be fixed so that we always get the same dimension for all member Thumb-nail fotos?

    ThanX,

    Quote Originally Posted by ronpat View Post
    WorldNews,
    The code snippit does not appear in style_new.css and there are no style tags at the top of the HTML page. Can you please tell us exactly where you have inserted that code?

    It needs to appear in style_new.css and may need to be targeted so all images are not affected. You would have to make that determination, though.

    Anoox search engine volunteer

    www.anoox.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WorldNews View Post
    How can this be fixed so that we always get the same dimension for all member Thumb-nail fotos?

    ThanX,
    You need to put both the width and height attributes into the image tag if you want the size to be exact. The smaller images in your layout only have the width attribute applied. If you leave one attribute out then the image will scale to its aspect ratio which may not be the same depending on the image size.

    Browsers also look at the img attributes to work out how much space to allocate for the image while rendering the rest of the page while the image loads. If the attributes are missing then no space is allocated and a jump in the page layout will occur and in older browsers the layout was often mus-positioned but this isn't such a problem today. Therefore its best to always specify height and width attribute if you can (of course sometimes its not possible if you want to scale the image).



    Quote Originally Posted by ronpat
    Instead of adding height="55" to the <td> tag, add height="59" to the table tag.
    There is no height attribute for the table tag (although historically browsers may apply it) and will be invalid; although there is a height attribute for the td tag. However we don't want presentational mark up in the page even when using transitional so it should be done with css in the usual way

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There is no height attribute for the table tag (although historically browsers may apply it) and will be invalid; although there is a height attribute for the td tag. However we don't want presentational mark up in the page even when using transitional so it should be done with css in the usual way
    Ouch! Thanks for catching this, Paul, and for the note. Inventing an attribute is a new trick for me. Hope that's my "senior moment" for 2013

    I know how I wandered off track. IE8 was adding 2px over and under a missing image and I was trying to find out why. For no explainable reason, I dropped the "height" attribute into the table tag and it rendered consistently with/without images in FF and IE8. Verisimilitude in action? Failed to return to reality before posting. <sigh>

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    This seems to work on my PC and in Firebug:

    First, add the height="55" attribute to the first td tag in each table that contains the image.
    Code:
    <td align="center" width="10%" height="55" valign="middle" style="margin: 0px; padding: 0px;">
    Next, delete the height attribute from the image tags unless you want to alter the default perspective of the image.
    Code:
    <img src="/ask_answer/tn_fotos/dummy.jpg" width="55" height="55" border="0">

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Please allow me to revise that first item in my previous post #10.

    Instead of adding height="55" to the <td> tag, add height="59" to the table tag.
    Code:
    <table width="100%" height="59" bgcolor="#ffffff" border="0">
    The additional 4px is for the default cellspacing.

    Just like above, images will fit to width and scale proportionally to height. Which means, square images will fill the 55px squares without distorting; or, rectangular images can be distorted to fill the square by adding the height="55" attribute to the image tag.


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
  •