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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1px problem and fb like button

    Hey there people i've got this far but i'm having 2 problems.....

    1) the facebook like button...... i don't seem to have any control over its placement...... as you can see it should be inside the button like the others..

    2) for some reason the blog button is 1px lower than the rest of them, this seems to only appear in chrome and safari (as far as i know(its fine in firefox))

    http://gandhiproductions.herobo.com/...est3/menu.html

    if anyone can help??

    thank you thank you

    Gandhi

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning evilgandhi,
    When everything is a known width and in a set container, as #navholder needs to be, maybe float is better than inline-block?

    Look at it this way -
    Code:
    ul.nav li {
        background: none repeat scroll 0 0 #6194AA;
        border: 4px solid #6194AA;
        /*display: inline-block;*/
        float: left;
        height: 80px;
        margin-left: 1%;
        position: relative;
        width: 80px;
    }
    Last edited by Excavator; 02-07-2013 at 06:53 PM.
    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

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Wouldn't the float have a problem (or vice versa) with the relative positioning?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jerry62704 View Post
    Wouldn't the float have a problem (or vice versa) with the relative positioning?
    No, I don't think so. That relative positioning is not placing the li, it's making the li relative to elements positioned as child.
    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
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool i'll try this but...


    ummm will this solve the 1px problem? because when the website is at it's smallest )320px wide) and the menu is in a 2 rows of 3, the last 2 menu items seem to be touching (top to bottom) there should be 1 px between the top and bottom row

    what about the fixing the facebook like button, i feel powerless over its placement...

    thank you again for your help

    Gandhi

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by evilgandhi View Post
    cool i'll try this but...


    ummm will this solve the 1px problem? because when the website is at it's smallest )320px wide) and the menu is in a 2 rows of 3, the last 2 menu items seem to be touching (top to bottom) there should be 1 px between the top and bottom row
    I'm not sure changing to float solves it...I haven't actually been able to see the 1px problem. I do have a 20px or so drop of the last li, the one that contains the fb like. I'm seeing that in FF19 and changing from inline-block to float fixes that.

    The only margin I see that separates the li's is your 1% left margin. If you want 1px margin anywhere, you will need to add that in to your CSS.
    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

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi dudes,

    i tried "float:left" didn't really work........ if i remove the FBlike button everything works perfectly......except the 1px problem..... if you view the site in chrome or safari and resize to 320px width you'll see what i mean..... i'm really confused by it.....

    any other advice on adding the FBlike button without it screwing things up?

    it's like the FBlike button has a mind of it own....

    http://gandhiproductions.herobo.com/...est3/menu.html


  •  

    Tags for this Thread

    Posting Permissions

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