feesu
asked on
HTML - Images' alignment inside tables look different in Firefox than IE and Chrome
Hi,
I have the following table with two images that should look as one part at rumtime, but they are two due to the hyperlink that part of the image is related to.
They look normal on IE and Chrome, however, Firefox shows them as two different parts as each of them appears on a separate top position.
What is different that I need to consider if displaying with Firefox?
I have the following table with two images that should look as one part at rumtime, but they are two due to the hyperlink that part of the image is related to.
They look normal on IE and Chrome, however, Firefox shows them as two different parts as each of them appears on a separate top position.
What is different that I need to consider if displaying with Firefox?
<table border="0" bordercolor="Blue" cellpadding="0" cellspacing="0" id="tbl_footer">
<tr>
<td>
<img src="http://www.myxworld.com//images/services_footer_call.png" style="width: 205px; height: 36px; border:0px;" />
</td>
<td>
<a href=mailto:service@xproperties.com>
<img src="http://www.myxworld.com//images/services_footer_email.png" style="width: 384px; height: 36px; border:0px;" />
</a>
</td>
</tr>
</table>ASKER
Your first option didn't work.
You mean by your second option is that I define padding and margin on the TD level for one of the images to align to the other one?
You mean by your second option is that I define padding and margin on the TD level for one of the images to align to the other one?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yes I mean that with margin and padding you define it on td level. Some more refrences should you need them:
www.w3schools.com/CSS/css_margin.asp
www.w3schools.com/CSS/css_padding.asp
www.w3schools.com/CSS/css_margin.asp
www.w3schools.com/CSS/css_padding.asp
ASKER
HagayMandel,
Is all what you changed was making the border 1 instead of 0, and removing the border color? Well that didn't solve my problem!
Is all what you changed was making the border 1 instead of 0, and removing the border color? Well that didn't solve my problem!
ASKER
florjan,
I have changed the padding, it worked now for Firefox but messed it up for IE and Chrome!
There has to be a better solution!
I have changed the padding, it worked now for Firefox but messed it up for IE and Chrome!
There has to be a better solution!
/* Firefox */
@-moz-document url-prefix()
css hack for firefox
@-moz-document url-prefix()
css hack for firefox
@feesu:
Did you try my solution without any additional hacks?
It works!
Did you try my solution without any additional hacks?
It works!
ASKER
HagayMandel,
It worked, after changing the border back to zero. But tell me, what's the difference between what I had and yours? I can't see any difference!
It worked, after changing the border back to zero. But tell me, what's the difference between what I had and yours? I can't see any difference!
I added the border="1" just for testing, and forgot to remove it.
In your original code was an extra blank (bad formating)
In your original code was an extra blank (bad formating)
ASKER
You mean, with any extra space I will face a problem with Firefox?
Yep!
God is found in the minor details
God is found in the minor details
ASKER
WOW! Thanks!
Open in new window
Might this be the solution?Othervise you might mannualy define padding and margin either with px or with %