1px problem and fb like button

[evilgandhi]

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

[Excavator]

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 -

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;
}

[jerry62704]

Wouldn't the float have a problem (or vice versa) with the relative positioning?

[Excavator]

Originally Posted by jerry62704

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.

[evilgandhi]

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

[Excavator]

Originally Posted by evilgandhi

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.

[evilgandhi]

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