Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Width Padding Issue

    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.

    http://www.wheatlandcomputerservices.com/demos/spoon/

    Thank you very much in advance!
    Last edited by RealDeal599; 11-14-2010 at 05:13 PM.

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 jacketsMoncler coatTrue Religion jeans

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    uhhh...huh?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails Width Padding Issue-gap.jpg  

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    have you tried changing that display: inline-block to display: inline;
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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!
    Last edited by RealDeal599; 11-14-2010 at 06:20 AM. Reason: add additional information

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Not if you apply float: left; in that same place you changed the display.


    EDIT:
    As for you additional note, don't change that. Just do what I said above this edit. ^_^
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    RealDeal599 (11-14-2010)

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Adding the float and some padding makes it work for me -
    Code:
    #navigation li {
          width:             84px;
          float: left;
          text-align:        center;
    }
    #active {
          color:            #fff;
          background-color: #383838;
          padding:          25px 6px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    RealDeal599 (11-14-2010)

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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?
    Last edited by RealDeal599; 11-14-2010 at 04:15 PM.

  • #11
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Excavator told you the exact thing I told you to do. -_-

    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    RealDeal599 (11-14-2010)

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks Chris...did not see your float post...Gave credit where credit it due.

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Its no big deal. 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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •