Solved

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

Posted on 2011-02-15
13
510 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 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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 …

705 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