?
Solved

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

Posted on 2011-02-15
13
Medium Priority
?
512 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
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

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

765 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