List CSS issue in IE7

Menu stair-steps in IE7

[russkern]

Hello,

I have a horizontal list menu in a site I'm working on and although the Menu Floats left correctly, it stair-steps down vertically into the page from left to right. It is almost as though vertically it is aligning Absolute Middle of the link to the left as opposed to aligning on it's top.

Does this make sense?

My CSS is as follows:

#pg_menu_wrap {
display: block;
width: 709px;
height: 24px;
}

.pg-menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}

.pg-menu ul {
padding-left: 0;
padding-right: 0;
padding-top: 0;
list-style-type: none; margin: 0;
}
.pg-menu ul li {
margin-top: 0px;
padding: 0 0 0 20px;
}
.pg-menu a {
position: relative;
line-height: 24px;
float: left;
padding-right: 6px;
padding-left: 6px;
border-right-width: 1px;
border-right-color: #a8a8a8;
border-right-style: solid;
margin-bottom: 8px;
font-weight: bold;
text-decoration: none;
color: #ababab;
font-size: 11px;
font-family: Helvetica, Verdana, Arial, sans-serif;
height: 24px;
}
.pg-menu a:hover {
color: #372387;
}

Does anyone have any suggestions? it looks correct on any Mac browser I view it in as well as correct in FF on the PC...

I can provide a URL to view if anyone would care to take a look.

R

[SuzyUK]

it makes sense.. float the li's and give them the height, instead of the a, then just make the <a> display block to fill the horizontal li elements

[russkern]

SuzyUK...

Thanks for the feedback.... When I make that change (move the 24px height and the Float:left from the 'a' to the 'li' and then change the 'a' to display:block, it just turns it into a Vertical list... I have tried a few different things but none produced the right result...

Thanks again...

UPDATE..

One thing I didn't have is a style for 'pg-menu li' to apply those to... when I created that... it worked beautifully....

Thank you....