Centering last anchor without padding

HTML & CSS
1

I have a menu structure that need to strech over the entire width of the container but I’m struggling with a few pixels difference between different browsers. I use a right border for all <li’s>, except for the last one because of the alignment with the edges of the #container div. To accomplish this the <ul> have a left and right border For all anchors I use left and right padding to center them. But I can’t get the last menu item right because of the earlier mentioned pixel difference (this is only noticeable on :hover and .current, where the anchors have a different background color) . I’m looking for a way to strech the last <li> and <a> over the available width left in the menu without using padding. This is the last setup


.nav {
	width: 1048px; 
	float: left;
	border-right: solid 1px #FFF;
	border-left: solid 1px #FFF;
}

.nav li {
	float: left; 
	border-right: solid 1px #FFF;
}

.nav li.contact_us {
	border-right: 0;
}

.nav li a {
	height:  30px; 
	line-height: 30px;
	padding: 0 9px; 
	display: block; 
	text-decoration:  none; 
	color: #FFF;
}

.nav li a.contact_us {
	width: 100%;
	display: inline-block;
	text-align: center;
	padding: 0;
}

I tried everything but it seems I’m over looking something!

2

but I’m struggling with a few pixels difference between different browsers

Hi donboe,

I have explained this a few times before to other members. It’s what I refer to as “counting characters” and it ultimately fails in every browser if you zoom in the text.

Have a look through these posts of mine.

Pixel Difference in Browsers

Horizontal menu alignment

I’m looking for a way to strech the last <li> and <a> over the available width left in the menu without using padding.

From looking at your code I assume that is the a.contact_us with inline-block and 100% width.

The problem with that is it looks to the parent for the width but the parent is the floated <li> which has no width.

If your wanting pixel perfection you will have to set a class on each anchor so you can set specific widths.

3

Hi Ray. Thanks for the response. It’s indeed the .contact_us which is breaking me up. I was thinking of setting a width for every individual for each anchor, but my problem is that the site is going to be in 4 languages so you see my problem. I thought, if I can find a way to make the last li occupy the available space left I had a solution, but it’s obvious not that easy.

I’m going to have a read in your posts in a minute and will come back if I have any more questions

4

but my problem is that the site is going to be in 4 languages so you see my problem

Oh yes, that makes it even worse

if I can find a way to make the last li occupy the available space left I had a solution, but it’s obvious not that easy

I just had an idea, never tried so I’m not sure if it will work. Let me do some testing before I stick my foot in my mouth. :slight_smile:

5

That would be nice :slight_smile: I was just thinking of throwing in some nasty jQuery. I’m actually nearly finished and was thinking of stretching my legs a bit but :nono: I not even want to think about the worst case senario. (11 menu items x 4 languages) :rolleyes:

6

Ok this is what I had in mind and it seems to be working in FF (haven’t tested any further than that)

If you will remove the float from that last list item (contact) and set it to display:block; that will keep it from shrinkwrapping.

Now set overflow:hidden; on it so it does not slide under the other floated li’s. Since the floated li’s come first the last li with display:block will rise up and rest on the same line.

.nav li.contact {
    float: none;
    display: block;
    overflow:hidden;
    border-right: 0;
    background:#222;
}

Now you have a block that fills the remaining space without setting a width.
The only thing needed on it’s anchor now is text-align:center and padding:0; ( the resets from .nav a)


.nav li.contact a {
    text-align: center;
    padding: 0;
}

Granted, it’s not pretty and I have not seen the actual text your working with but it survives two text zooms for me in FF with my default font-size set at 16px using this dummy text.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 100%/1.3 arial, helvetica, sans-serif;
    background: #444;
}
#wrap {
    width: 1050px;
    margin: 20px auto;
    overflow: hidden;
    background: #000;
    min-height:200px;
}

/* Nav Rules */
.nav {
    margin:0; padding:0; list-style:none;
    
    width: 1048px;
    float: left;
    border-right: solid 1px #FFF;
    border-left: solid 1px #FFF;
    background: #333;
}
.nav li {
    float: left;
    border-right: solid 1px #FFF;
}
.nav li.contact {
    float: none;
    display: block;
    overflow:hidden;
    border-right: 0;
    background:#222;
}
.nav li a {
    height:  30px;
    line-height: 30px;
    padding: 0 9px;
    display: block;
    text-decoration: none;
    color: #FFF;
}
.nav li.contact a {
    text-align: center;
    padding: 0;
}
.nav a:hover {background:red}
</style>

</head>
<body>

<div id="wrap">
    <ul class="nav">
        <li><a href="#">Long link text</a></li>
        <li><a href="#">Long link text text</a></li>
        <li><a href="#">Long link text</a></li>
        <li><a href="#">Long link text text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Longer link text text</a></li>
        <li class="contact"><a href="#">Contact Us</a></li>
    </ul>
</div>

</body>
</html>
7

I’m gonna give it a try right away, and keep you informed. Thanks for that Ray :slight_smile:

8

I’m not sure, I must see some mark-up also, but you could do a float:right instead, for the last item? Or float:left the first half, float:right the second half, and the centre item, centred.

FL FL FL FL FL C FR FR FR FR FR

Basically, smt like the 3 col layout: FL C FR. You could group the elements to fit such a construct. After all, the 3 col layout is “fixing” the pixel discrepancies also.

9

Good work Ray! :slight_smile:

That technique is very safe using percentage item-widths, last item then is widthless.

@ donboe, About the item borders. You could set right border on the ul and left borders on the items. (Generally no class needed for the last item’s border.) :slight_smile:

@ nonnope, Good idea making eventual difference symmetrical, but the items need to be rearranged in the html if the visual order is important.

10

@Ray: This works great! I tested it in all browsers and I didn’t see any problems. Couldn’t test it in IE6 because my IE tester is crashing on IE6. But hey you made me a happy bunny :slight_smile: :tup:

@Erik J: Very good suggestion Eric and actually very logic. But that’s how things go. A lot of time you just overlook the most logical way. :rolleyes:

11

Thanks Erik!

Hey that’s a good idea too with the percentage widths, I didn’t think about that. :slight_smile:

Right, then you could just reset the last li to width:auto

12

Yes, that’s the method I use to soak up the remaining space. I use it in 3 column layouts also to avoid gaps also and for auto [URL=“http://www.pmob.co.uk/temp/3col-overflow-toggle.htm”]expanding columns.

Overflow is a very useful property.:slight_smile: