inline-block vs. float

[chrisburton]

did you remove the absolute positioning?

[djpic]

yes, I am changing it on the version without ap.

[chrisburton]

Can you give me a link to the version without AP?

[djpic]

Version 2 – No AP

[chrisburton]

@djpic – What font are you using for the menu?

[djpic]

The text font or the font in the sprite?

The anchors have text in them but it is just pushed off the screen. The text you are seeing is from the sprite image. The font name is: Capitals

[wolfcry911]

My example, as mentioned, did not include the shiv for IE. Do me a favor and add this little bit to that page between the footer a style in the head and the closing head tag:

footer a {

text-decoration: none;

color: #000;

}



article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; } /* defaults for html5 elements */

This will correct IE6, 7, and 8 as well adjust older Firefox, etc. That’s it – that’s all that’s needed!

Now back to your page…
You really don’t need to center the menu. What you need is to have it start 10px from the left to compensate for the shadow. Simply put a left and right margin on #mainnav #mainnav { margin: 0 10px; } /* <-- shorthand! */
You've already discovered the padding problems so all that remains is the vertical positioning of nav. There are a couple ways of approaching it. I personally like the way I used in my example (using absolute positioning of the nav and floating the anchors within). That had the nav inside the header and was positioned to the bottom of the header. Your current float code has the nav outside of the header, so you could position it in relation to the body, or use a negative top margin to pull it up - either will work. Try the negative top margin, so now the #mainnav margin looks like
#mainnav { margin: -30px 10px 0; } /* <-- more shorthand! */
So, to fix all the problems with the float page, all I had to do was change height of header to 126px and its padding to 20px 15px 0; add margin of -30px 10px 0 to #mainnav, and add 1px padding to #content. Sure beats re-doing the entire page with a different method ;)

[chrisburton]

This could be done with CSS alone without absolute positioning and with @font-face. But hey, whatever way you think is best.

[djpic]

@wolfcry911 – Yep, that fixed it on your layout. Also, I have seen a comment formatted like that before. That is just like an HTML if statement? What is the official name of those so I can google it? I do like the full CSS layout better the only thing holding it back was the browser compatibility, but with that shiv fix makes it worth it. I did notice that IE 8 put the dashed line at the end of the menu as well (after SignOut). Does that have something to do with IE8 not supporting last-child I take it? It is kind of funny how I started wanting to do the whole thing using CSS and then went to using images, and now I am back to using CSS. The only thing thing really that is an image is the logo. If you don’t mind, I will use more of what you did in your example instead of using all those sprites and such? I am also amazed with the matching the font type so well. is the 16px/30px is defining the size of the lower case caps and the upper case caps (and how did you know it was the capitals font?

@ChristopherBurton – I know it can, that is what @wolfcry911 did in his example.

[chrisburton]

I still see position:absolute; so I would disagree. But everyone has different opinions as to what absolute positioning should be used for. Since you want the menu contained within the flow of the page, I would not use absolute positioning. That is my opinion.

[djpic]

I must not have uploaded it, just did again. I didn’t want to use AP but didn’t know of a way to do it at the time, now @wolfcry911 said to just change the padding, which I did and now it is fine.

[chrisburton]

Awesome

[wolfcry911]

I have seen a comment formatted like that before. That is just like an HTML if statement?
It’s a conditional comment – the defacto standard for feeding IE fixes for several years now.

I did notice that IE 8 put the dashed line at the end of the menu as well (after SignOut). Does that have something to do with IE8 not supporting last-child I take it?
Yes, that’s correct. I probably should have put the border on the left and used first-child to remove it from the first. IE 7 and 8 understand first-child, but not last (IIRC). You could feed IE 6 ( 7 and 8 ) a fix with conditional comments. Or you could class the first or last anchor and target it that way.

The only thing thing really that is an image is the logo.Which is content, so that is good. But, I don’t want you to think that background images in css are bad – they’re not. Sometimes, however, it’s just quicker, easier, lighter to use straight css.

If you don’t mind, I will use more of what you did in your example instead of using all those sprites and such
I don’t mind at all. I was just hoping to help you out.

Is the 16px/30px is defining the size of the lower case caps and the upper case caps?
No, the 16px is font-size and the 30px is line-height – which centers the font vertically within the nav – more or less. It will be 1px off from browser to browser because of the way fonts and inline boxes work. You could also not set the line-height and use top padding to center vertically. The upper and lower case caps was achieved with the font-variant: small-caps (which is in the font shorthand rule).

and how did you know it was the capitals font?
;)
Capitals should be available to anyone with MS Office installed (PC or Mac) which is a very large percentage of probable viewers. I set a fallback to Georgia if Capitals is not available and then to serif if Georgia is not available – you can change or add as many fallbacks as you like. So most of the visitors will see it the way you intended and small percentage will see something very close (and will have no idea its not your first choice). You could also use @font-face, like Christopher mentions above, to pretty much guarantee that everyone sees the same font.

[Author]

Posts