CSS title borders in Firefox and IE

im having problems setting up a title section for the page im developing. In IE, the title bar becomes much larger than I like. Can anyone tell me why bottom border shifts so far down in IE? Changing the height dimensions only changes the FF borders. Heres the code (and thanks for any help)

#header {
margin-top: 10px;
padding: 0px 0px 2px 35px;
background-color: #ggg;
border-style: solid;
border-color: black;
border-width: 2px 0px;
height: 80px;
/* ie5win hack */
voice-family: inherit;
height: 50px;
}
html>body #header {height: 50px;}
/* ie5win hack ends */

------------------------------------------
<div id="header">
<h1>Title 1</h1>
<h2>Title 2</h2>
</div>

 

4 lines or markup and you're already using browser workarounds. You've gotta wonder! All these CSS websites with people showing off the hacks they've come up with is creating a whole breed of webdesigners creating sites that are going to fall apart when IE7 comes out...

To answer your question, you need to remove your IE hacks, and set the height normally. You then need to explicitly set the border, padding and font size on your h1 and h2 tags, as the defaults are different in IE and Firefox.

- Jamie