Solved

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

Posted on 2011-02-15
13
501 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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
 
LVL 4

Expert Comment

by:florjan
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 4

Expert Comment

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

Expert Comment

by:HagayMandel
Comment Utility
@feesu:

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

Author Comment

by:feesu
Comment Utility
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
Comment Utility
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
Comment Utility
You mean, with any extra space I will face a problem with Firefox?
0
 
LVL 16

Expert Comment

by:HagayMandel
Comment Utility
Yep!

God is found in the minor details
0
 

Author Comment

by:feesu
Comment Utility
WOW! Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now