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

HTML & CSS
1

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:

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

2

Try Eric Meyer’s reset: link.

3

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:


img {display:block;}
4

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.

5

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.

6

You haven’t added the code yet so we can’t check if you did it right.:slight_smile: When I add the code you your live site I get pixel perfect rows in Firefox and chrome.

7

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.

8

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

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,

10

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.


<td align="center" width="10%" [color="#0000ff"]height="55"[/color] 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.


<img src="/ask_answer/tn_fotos/dummy.jpg" width="55" [color="#ff0000"][s]height="55"[/s][/color] border="0">
11

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.


<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.

12

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).

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 :slight_smile:

13

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 :slight_smile:

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>