[Solved] Another issue. le sigh

[cyrilshark]

Hey. Again. Sorry to bother you so soon!

I’m trying to make some text align with my site nav bar, but when I load the page the text loads in steps, sorta.
For instance:

main
………..contact
……………………..portfolio
………………………………………..services

etc, instead of a straight line. Here’s the important code:

html:

HOME


ABOUT US


PORTFOLIO


SERVICES


BLOG


COMMUNITY


CONTACT

css:

ul#nav li a {

display: block;

width: 108px;

float: left;

margin-top: 25px;

}

I’m pretty sure the rest of the code doesn’t matter.
Thanks in advance,
Cyril

[TheDoc]

Without being able to see the actual site, I’d assume the margin-top: 25px; is the thing that’s screwing it up.

If you’re viewing it in an earlier version of IE, then this is a common “Step-down error”, you you will need to add “display: inline;” to ul#nav li {}

[cyrilshark]

I’m using the latest Safari (5).
I just tried opening it with Firefox 3.6.9 with no luck either.

Thanks for the comment!

[cyrilshark]

Here’s a snapshot of the site.

http://i.imgur.com/W46h8.png

[TheDoc]

A screenshot won’t do it, I’m afraid. Do you have a live dev site?

[Bob]

@cyrilshark: Remove the line display: block; from that CSS, and add the following CSS:

ul#nav li {

display: inline;

}

That worked for me. Basically, you’re trying to add a display: block; property to the items, whereas you should add it to the list items, hence ul#nav li

Edit: I changed it from block to inline, since block doesn’t seem to work for IE.

[cyrilshark]

YES! Thanks so much for your help guys, Bob, it worked perfectly. Thanks a million ^_^

[TheDoc]

You should still be adding display: block; to the anchor tag, though. That way you can have a larger clickable area by setting a height to it.

[Bob]

Ah, right. I didn’t know that, useful addition @TheDoc! I don’t know that much about display: block/inline/whatever so thanks :)

[zackw]

its the classic stepdown problem. the issue is that your floating the anchor link left and not the li.

When creating a navigation using an list, never use the anchor links to create the positioning, use the list item. So any padding/margin should be on the li
here is how i would do it with css

ul#nav {

margin-top:25px;

}



ul#nav li {

width: 108px;

float: left;

}



ul#nav li a {

display: block;

}

[TheDoc]

I actually prefer to go like this:

#nav li {

display: inline;

}



#nav li a {

display: block;

float: left;

height, width...

}

I suppose to each their own.

[Author]

Posts