rocknbil - 5:39 pm on Sep 26, 2011 (gmt 0)

And . . . watch out if you want to use text-align: in combination with text-indent, it will do some weird stuff. :-) Also set outline:none or you'll get the dotted line running off the page when the link is active (mouse down.)

The second thing to watch out for is "background" is generally a shorthand version for specifying all attributes (as you can see with top left no-repeat) so in a case like this I'd use background-image instead.

Not sure why you're doing all the positioning stuff on the elements themselves. Since you have no "left" or "right" set on top-panel or panel, regular floats in combination with semantic HTML for this list of links will do.

This example makes use of the shrink wrap effect of floating in that a floated parent object will contain all of it's floated children, which makes for a lot less frustration when working with floats. Strange (different, never seen it) approach, not quite sure how I'd handle a variable width and height on hover. Your job might be easier if you use ONE width and height on the li and the a, and mod the image to fit that.

<div id="toppanel"> 
 <ul> 
 <li><a href="#" class="wsr-active">WSR</a></li> 
 <li><a href="/dev/switch.php?company=maverick" class="mav-inactive">Maverick</a></li> 
 <li><a href="/dev/change-password.php" class="settings">Change Password</a></li> 
 <li><a href="/dev/logout.php" class="logout">Log Out</a></li> 
</div>