View Full Version : Resolved Width Padding Issue

11-14-2010, 05:05 AM
Man...this has been driving me crazy. Obviously a simple solution but I can't see it.

On the navigation bar...when I hover between each li it fills the space but when I set the li as 'id=active' (the current page the user is on), it leaves a gap on each side of the active page.

When I examine the elements in firebug...I cannot decipher what is going on. The navigation items show a width of 72px and padding with 6px on each side. Fills in nice. The active item shows a width of 84px and I cannot add any width padding to fill the gap.


Thank you very much in advance!

11-14-2010, 05:23 AM
If the leader should fill all space on a line, the max length of the leader should be at least as large as the width of the column.Welcome to moncler jackets (http://www.moncler-jackets6.com/)Moncler coat (http://www.moncler-jackets6.com/)True Religion jeans (http://www.jeans-trade.com/)

11-14-2010, 05:33 AM

11-14-2010, 06:05 AM
Hello RealDeal599,
That olay post is just spam. Ignore it for the garbage it is.

What happens when you apply the active id to the anchor instead of the li?

11-14-2010, 06:36 AM
Thanks Excavator for your reply. You have saved me a couple of times!

I get the same result. In the attached image...Events is active and photo is hovered over. I would get the same gap on the left if I hovered on home.

Chris Hick
11-14-2010, 07:05 AM
have you tried changing that display: inline-block to display: inline;

11-14-2010, 07:15 AM
Thanks Chris...if I were to change that...my menu would drop to a vertical menu vs the horizontal that is currently set-up.

Just an additional note...I tried to set the active id with a 72px width but firebug showed that the 84px width canceled out the setting. What is not making sense is that firebug is showed that the text is 72px and then I set 6px padding on each side. Not really sure where the 72px is coming from on the links. I can see why my active menu item is 84px...because I set that. So if I were to change the setting to 72px...it shrinks them all.

Maybe there is a better way to do this.

Thanks again!

Chris Hick
11-14-2010, 07:21 AM
Not if you apply float: left; in that same place you changed the display.:thumbsup:

As for you additional note, don't change that. Just do what I said above this edit. ^_^

11-14-2010, 09:29 AM
Adding the float and some padding makes it work for me -

#navigation li {
width: 84px;
float: left;
text-align: center;
#active {
color: #fff;
background-color: #383838;
padding: 25px 6px;

11-14-2010, 05:11 PM
Ahhhh...works fine now. I have everything else float on the site but did not think of that on the navigation. Probably because it did not make sense why the inline-block deal was not working. Had to increase the width size to fill the gap which is not a problem.

What was inline-block doing to fill the space and cause problems? It seemed to have been adding left/right space but float does not?

Interesting...thanks a lot!

Where is the resolved button or link?

Chris Hick
11-14-2010, 05:35 PM
Excavator told you the exact thing I told you to do. -_- :mad:

Anyhow, an inline-block element will generate a block box, laid out as an inline box. Basically, it will place margins around those block boxes.
To put this as resolved, just go edit your first post and click advanced, then right before your title will be the option to select it as resolved. :thumbsup:

11-14-2010, 06:11 PM
Thanks Chris...did not see your float post...Gave credit where credit it due.

Chris Hick
11-14-2010, 06:23 PM
Its no big deal.:thumbsup: I just did not know if you saw my post or not. Normally, smaller above a larger post tend to be skimmed over. ^_^
I am actually more please by your action of putting this as resolved. :thumbsup: