weird padding in ul

[kristin Lai]

Hi,
I'm having this weird problem in my navigation. It's an unordered list <ul> witha style applied to it to make it horizontal with each link in a box, everthing is fine except that in IE the first list item doesn't have any left-padding. All the other items have padding on all sides and I can't figure out what the problem here is. Below is the style, maybe someone knows a hack to fix this?

#global-nav {
padding: 20px 30px 5px 260px;
color:#fff;
font-family: arial, helvetica, sans-serif;
width: 626px;
white-space:nowrap;
list-style-type:none;
}

html>body #global-nav {
padding: 7px 30px 5px 295px;
color:#fff;
font-family: arial, helvetica, sans-serif;
width: 626px;
white-space:nowrap;
list-style-type:none;
}

#global-nav li {
display:inline;
}

#global-nav li a {
margin: 0px 3px 0px 3px;
padding: 0.2em 1em;
color:#FFD4D1;
text-decoration:none;
border:1px solid #FFD4D1;
}

#global-nav li a:hover {
background:#FFD4D1;
color:#454579;
}

Any suggestion would be appreciated.

Watts

[Guest rancid-tea]

The code for your list (or a link to the page) would be useful.

[kristin Lai]

Here's the code for the list:

<ul id="global-nav">
<li id="home"><a href="index.php" title="return to homepage">home</a></li>
<li id="about"><a href="about.php" title="find out more about SKyart">about</a></li>
<li id="search"><a href="searchTips.php" title="get search tips">search tips</a></li>
<li id="order"><a href="order.php" title="order prints">order</a></li>
<li id="fineArt"><a href="fineArt.php" title="see our collection of fine art prints">fine art</a></li>
<li id="contact"><a href="contact.php" title="contact us">contact</a></li>
<li id="lightbox"><a href="lightbox.php" title="view your lightbox">lightbox</a></li>
</ul>

Thanks