H1 CSS reset failing?

Question

Im going mad trying to figure out why the title link (in the left) and the other links in the nav bar (right) are not the same height.

The difference is subtle in Safari, but bigger in IE6.

Im missing something in the css reset of H1?

SAFARI

IE6

The HTML

<div id="navbar">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left">
            <h1><a href="http://ide.as"&gt;title&lt;/a&gt;&lt;/h1&gt;

        </td>
        <td align="right">
            <a href="about.html" class="color1">about</a>
            <a href="faq.html" class="color2">answers</a>
            <a href="contact.html" class="color3">contact</a>
            <input type="text" name="search" value="" id="searchbox">&nbsp;<a class="color4" href="sss">search</a>
        </td>
    </tr>
    </table>
    </div>

and the css

#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}

h1 has been reset

h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}

Answer 1

h1 a { padding: 3px 5px; vertical-align: middle;}

sets a style for a link within an h1, not the h1 itself.

h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}

sets the style for an h1. So the styles for the link still stand, they have not been overwritten.

Answer 2

There are some very subtle differences in the way different browsers render styling. This is just another example of it.

To see a REALLY good example of this, try looking at the Acid 2 test in each browser to see some of the differences.

Answer 3

First, if this happens cross-browser, use Firebug in Firefox to tell you where an element's style rules are coming from.

Second, I'd check the line height on the <a> and <h1> as well as the margins on the <a>.

Answer 4

I think it's because the text input in the right table cell is causing that table cell to "stretch" a little taller than the left table cell (and it will be slightly different on different browsers depending how large they draw the text input box) and thus throwing off the alignment a bit. Try vertical-align:bottom; on the left table cell.