Height Problem IE7

[glenelkins]

Hi

 

Im having some wierd issue in IE with a height of an element i set in CSS. Its the .navigation_top class, in IE its not setting the height to 18px. In FF its fine, but IE7 it seems like its adding a little extra and its really annoying me. The #navigation_container  sets the height properly so why doesnt the other class? I even tried setting .navigation_top to 1px in height and it didnt get any smaller in IE7

 

/* GLOBAL RESET */
html,body,p, div, h1,h2,h3,h4,ul,li,img {

margin: 0px;
padding: 0px;

font-family: "Trebuchet MS", Verdana, Arial, serif;
font-size: 1em;

}

body {

background: #CECBC2; /* actual page background colour */

}

/* Main Container - To fill background */
#main_container {

width: 100%;
height: 1228px;

background: url('../images/mainbg.gif') repeat-x;

text-align: center; /* for ie to centre the site */

}

/**********************/
/* SITE CONTENT AREAS */
/**********************/

/* Reset All content to left align */
*{ 

text-align:left 

}

/* Header Container */
#header_container {

margin: auto;

width: 949px;
height: 137px;

 background: red; /* DEBUG */

}

/* Logo */
.logo {

	padding-top: 14px;
	margin-left: 114px;

}

/* Navigation Container */
#navigation_container {

margin: auto;

width: 949px;
height: 57px;

background: url('../images/navbg.gif');

	background: green; /* DEBUG */
}

.navigation_top {

	width: 949px;
	height: 18px;

		background: blue; /* DEBUG */

}

.navigation_bottom {

	width: 949px;
	height: 39px;

		background: orange; /* DEBUG */

}

[glenelkins]

I found the problem, it was the Trebuchet MS  font, I needed to set a global line-height: 1em;  and it sorted it

[glenelkins]

another wierd one came up, if there is no content inside the <p></p> it still sets the height incorrectly lol