Solved

HTML - Images' alignment inside tables look different in Firefox than IE and Chrome

Posted on 2011-02-15
13
506 Views
Last Modified: 2012-05-11
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
Comment
Question by:feesu
  • 6
  • 4
  • 3
13 Comments
 
LVL 4

Expert Comment

by:florjan
ID: 34904234
<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
 

Author Comment

by:feesu
ID: 34904253
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
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 34904276
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 4

Expert Comment

by:florjan
ID: 34904290
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
 

Author Comment

by:feesu
ID: 34904338
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
 

Author Comment

by:feesu
ID: 34904357
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
 
LVL 4

Expert Comment

by:florjan
ID: 34904411
/* Firefox */
@-moz-document url-prefix()
css hack for firefox
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 34904488
@feesu:

Did you try my solution without any additional hacks?
It works!
0
 

Author Comment

by:feesu
ID: 34904560
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 34904637
I added the border="1" just for testing, and forgot to remove it.
In your original code was an extra blank (bad formating)
0
 

Author Comment

by:feesu
ID: 34904731
You mean, with any extra space I will face a problem with Firefox?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 34904773
Yep!

God is found in the minor details
0
 

Author Comment

by:feesu
ID: 34904786
WOW! Thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question