Question

using the same resolution on five different computers, the same browser (firefox 14.01), 1 of them is mac, 3 are running on ubuntu and the last one is on Windows 7.

All of the test were executed on a clean browser without any plugins…

We also tried to swap screen, and nothing is different, it the browser had the problem, it still have it.

Also, using firebug, I compared every elements and all of them are the same, except that my link () have 2 more pixels on 2 computer.

I tried on every browser (Opera, Chrome, Firefox, Safari, IE 7-8-9) and I don’t have the problems when I don’t have it on Firefox, but when I do, I do have the problem on every browser…

I have display issues of many html elements.

So here is my question : What could cause this?

Here is my HTML Code :

<td style="text-align:center">
    <a style="margin-right: 10px;" href="#">
        <img alt="View" src="/statics/images/Form/view.png">
     </a>

    <a style="margin-right: 10px;">
        <img alt="Edit" src="/statics/images/Form/edit.png">
    </a>

    <a style="margin-right: 10px;" href="#" >
        <img alt="Delete" src="/statics/images/Form/delete.png">
    </a>
</td>

Here is my CSS code for the a

a {
    margin-right: 10px;
    cursor: pointer;
    text-decoration: underline;
}

Here is the pics :

When it is not working :

When it is working :

Any suggestions is appreciated!

Thank you guys…

We found out that the add a padding-top of 1 px (which we don’t think it is our problem since it come from the width) depending on the computer it is seen on…

Answer 1

Try to set your a as :

a {
    margin-right: 10px;
    text-decoration: none;
}

td a {
    display: inline-block;
    width: 27px;
}

I put 27px as a width for simple testing, apply it according to the size of your images.

You can also try to apply a fixed width to your td, enough to nest your three images.