Home/ Questions/Q 8061373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T10:19:08+00:00

I wish to define css details in order to align plain text in td

  • 0

I wish to define css details in order to align plain text in td and button value text in td, so that they align in any browser type, or most of them at the least.

Below is my trial and the differences in rendering in IE9/8/7 and Chrome. As you can see, the given html looks OK in IE9, but IE8/IE7 and Chrome are wrong. Adding padding (directly in text td or to an added div in the text td) will not solve this, because then IE9 will be wrong.

So what css definition should be used to ensure that in all browsers the plain text and button value text are aligned properly?

IE9 IE8 IE7 Chrome

html:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:1px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
    }
        </style>
    </head>

    <body>
      <p/>
      <table>
         <tbody>
            <tr>
               <td>EXAMPLE</td>
               <td><input type="button" class="example" value="EXAMPLE"></td>
            </tr>
            Chrome
         </tbody>
   </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Starting from the suggestion done by Ben, eventually I found the best solution to this pesky little problem. First I tried following his suggestion as is, but as a stylish version: I tried removing vertical-align: top; from css td and adding style="valign: top;" to the td elements. At first I thought that was the way to go because now the alignment was OK in IE7/Chrome and off just a little in IE8/IE9, but then I realized that valign is a deprecated attribute and a non-existing sub-value in the style attribute.
    Hence I had to look further, and landed up in doing sort of an after-burner javascript where I adjust padding-top in various browsers. I had to do the following adjustments:

    • css input.example: padding-top 0px; height: 14px;
    • IE7/quirks/Opera: for all previous sibling-td’s set property style.paddingTop to 1px;
    • IE8/IE9: do nothing
    • Firefox: for all previous sibling-td’s set property style.paddingTop to 2px;

    html (note that Opera and Firefox use a different DOM as opposed to IE, manifesting itself in a different method to get the previous sibling):

    <!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:0px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
        height: 14px;
    }
        </style>
    </head>

    <body>
      <p/>
    <table>
     <tbody>
        <tr>
           <td>EXAMPLE</td>
           <td><input type="button" class="example" value="EXAMPLE"></td>
        </tr>
     </tbody>
    </table>
    <script type="text/javascript">
      // use personal custom javascript function to determine browser version
        switch (browser.version()) {
            case "MSIE 7.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Opera/9.80":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Firefox/10.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "2px";
                    };
                }
                break;
            default:
                // do nothing
        }
    </script>
   </body>
</html>
    • 0