Alignment issue on different resolutions

I'm having a problem aligning some text on my page. On my computer at 1280x1024, it lines up just fine. But on my buddy's computer that's running in 1024x768, the text isn't showing up in the right spot.

The site is: http://www.steelersgab.com/

In the header graphic, there's a darker box on the right side of the header, and that's where I want the 3 text links to appear. But on the other computer, the text shows up to the left of that dark box.

The code that displays the text links is:

<ul>
<li><a href="http://www.steelersgab.com/">Home</a></li>
<li class="page_item"><a href="http://www.steelersgab.com/about/" title="About Us">About Us</a></li>
<li><a href="http://www.celebrityseats.com/sports/football/pittsburgh-steelers-tickets.html">Steelers Tickets</a></li>
</ul>

And the CSS behind that is:

#header ul {
position: absolute;
margin: 0;
top: 31px;
right: 155px;
list-style: none;
}

#header li {
display: inline;
}

#header li a {
display: block;
color: #FFFFFF;
float: left;
padding: 0 15px;
border-left: 1px solid #E2C952;
}

What am I doing wrong?

 

#header ul {
/* position: absolute; */ try to remove this line.
margin: 0;
top: 31px;
right: 155px;
list-style: none;
}

 

Yes, it is out on 1680x1050 resolution too. Would be to do with absolute positioning.

 

That, and I'd set the fixed with and centering of content in the WRAPPER, not in each child element. It would be less CSS and even if your absolute positioning messed up, if you set WRAPPER to position:relative it wouldn't leave that box.

After all, that's what a WRAPPER is for.

 

I tried your suggestions, and it's still not displaying correctly on other people's computers, yet it looks fine on my system in both IE7 and Firefox. Here are the changes I made:

#header ul {
position: relative;
margin: 0;
top: 31px;
left: 688px;
list-style: none;
}

On the lower-resolution computers (both running IE6), the text is now showing up at the top left corner of the picture, as if it's totally ignoring the position: relative declaration. Any thoughts?

deathshadow: I'm not sure how exactly to do what you're saying, as I'm still a CSS newbie.. Can you give me an example? Thanks!

 

I'm going to bed now, but I'll toss you on my 'help list' - there's one person ahead of you.

I'm technically retired, and don't have to work if I don't want to anymore - but I can't just sit around with my thumb up my backside, so I help people.

I'm such a nice guy - when I'm not ripping people's coding habits to shreds

 

Thanks man.. I actually tacked the problem in another way, and it works fine on all the computers I've tried:

#header ul {
float: right;
margin: 0;
padding: 29px 22px 0 0;
list-style: none;
}