CODEWITHSUNDEEP
htmlcss
Victor
Victor

Reputation: 23932

H1 CSS reset failing?

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
alt text http://img218.imageshack.us/img218/702/safari.png

IE6
alt text http://img64.imageshack.us/img64/870/ie6.png

The HTML

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

        </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;}

Upvotes: 2

Views: 10922

Answers (4)

user243481
user243481

Reputation:

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.

Upvotes: 2

Mr. Shiny and New 安宇
Mr. Shiny and New 安宇

Reputation: 13908

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>.

Upvotes: 0

Nathan Wheeler
Nathan Wheeler

Reputation: 5932

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.

Upvotes: 1

Tim Hoolihan
Tim Hoolihan

Reputation: 12396

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.

Upvotes: 3

Related Questions