Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 516
  • Last Modified:

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

Open in new window

0
feesu
Asked:
feesu
  • 6
  • 4
  • 3
1 Solution
 
florjanCommented:
<table border="0" bordercolor="Blue" cellpadding="0" cellspacing="0" margin="0" padding="0" id="tbl_footer">

Open in new window

Might this be the solution?
Othervise you might mannualy define padding and margin either with px or with %
0
 
feesuAuthor Commented:
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?
0
 
HagayMandelCommented:
Check this:

<table border="1" 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>

Open in new window


And remove bordercolor="Blue"  from the table tag, it's not valid CSS!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
florjanCommented:
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
0
 
feesuAuthor Commented:
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!
0
 
feesuAuthor Commented:
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!
0
 
florjanCommented:
/* Firefox */
@-moz-document url-prefix()
css hack for firefox
0
 
HagayMandelCommented:
@feesu:

Did you try my solution without any additional hacks?
It works!
0
 
feesuAuthor Commented:
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!
0
 
HagayMandelCommented:
I added the border="1" just for testing, and forgot to remove it.
In your original code was an extra blank (bad formating)
0
 
feesuAuthor Commented:
You mean, with any extra space I will face a problem with Firefox?
0
 
HagayMandelCommented:
Yep!

God is found in the minor details
0
 
feesuAuthor Commented:
WOW! Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now