Two IE Problems

[Chris Gwynne]

Hey

I have two small problems when viewing my page in IE.

http://www.chrisgwynne.com/new/
http://www.chrisgwynne.com/new/includes/base.css

The design looks fine in Firefox however in IE it fails at two parts.

- The navigation doesn't reach the full height of the navigation bar, it stops midway.
- There's a gap between the tree and the base of it.


Any help?

Regards,
Chris

[Paul O'B]

Hi,

IE can be made to show its top padding by adding position relative to the anchor style for that list.

The gap in ie is because you have made the ul 26px high but you have made the list 36px high. Mozilla thinks you are crazy as the inner can't be bigger than the outer so it does not expand greater than 26px.

IE on the other hand is stupid and makes your list 36px high thus giving you the gap. Just change the size to 26px for both.

#nav {
background:red url(http://www.chrisgwynne.com/new/images/nav_bg.gif) no-repeat;
border: 0;
float: left;
height: 26px;
line-height: normal;
list-style: none;
margin: 0;
padding-left: 120px;
padding-top: 10px;
width: 614px;
}
#nav li { 
background: transparent;
display: inline;
float: left;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Courier, Times New Roman, Serif;
font-size: 85%;
font-weight: bold;
height: 26px;
list-style: none;
margin: 0;
padding: 0;
}
#nav a {
background: transparent;
border: none;
color: #666;
padding: 10px;
text-decoration: none;
position:relative;
}

Paul

[Chris Gwynne]

Ah, stupid mistake my bad. I didn't notice it.

Thanks Paul.