UL Horizontal Menu > Vertical Alignment Issue

What do you mean by line-height: 1; ?

line-height sets the distance between lines. it will multiply the line-height you set by the font size...

tiger2808, is it possible to give us a live link, or at least all your css and xhtml code?

larmyia

work is here:
http://www.fizzcreative.com/balloon/

(the menu issue should be apparent)

the relevant CSS is located here:
http://www.fizzcreative.com/balloon/p7pm/p7pmh0.css

hope this helps...

have to run an errand - will check back in when I get back. Thanks.

do you mean that with those 2 menu items you want them to sit in the middle of their "rectangle" and therefore not aligned with the other menu items??

Yes - the two items circled here:
http://www.fizzcreative.com/balloon/images/menuAlignIssue.jpg

I would like them moved up so they dont extend past the blue.

If CSS would work like tables (which I am trying to get away from) they all actually fit on one line (if they were in a table). But the equal witdhs of the boxes means to me, atleast, that it can't be done to resemble tables.

I can post a crude mock of what I'd like to accomplish if need be.

Thanks!

Look at this:
http://www.fizzcreative.com/balloon/images/desired.jpg

except for the sloppy mockup - this is what I would like to achieve.

Thanks

I'm sure someone better versed could come up with something better, but this works in ff.

I think I'd give a class to these 2 renegade menu items (prob in the <li>) and then use negative margins.

I tried this with your current code:

#menuMain li a.p7PMtrg {
margin-top: -5px;
}

obviously it affects the other elements named .p7PMtrg (hence my idea of putting a class on the <li> which wouldn't affect what you've already done. of course on the <a> would work too.

note: only tested in ff.

larmyia

I understand what you did, but have a broader question...

Is this an instance where it may be easier to address it as a table as opposed to a UL with CSS?

While I am trying to integrate a lot more CSS into my work - I'm wondering if this is a proper place. Because - at larger font sizes this portion of the layout easily corrupts.

Any thoughts?

tiger I think part of your dilemma rises from the fact your still developing with a table mindset. I think in order to move forward you need to change your way of thinking. tables are only for tabular data, and a list of links is better (not perfectly possibly, but better) represented by <ul>

I don't deny that there are times that parts of layout may seem easier with tables, but if developed from scratch with a css-p in mind, I think this is not usually the case.

my solution related to your particular problem.

but keep in mind that if at some time in the future your client decides he wants his menu on the left, or where ever, changing it will take you minutes on one css page, rather than adjusting table menus on every page.

I wonder if your font problems rise from your menu construction (ie using position: absolute). when choosing your menu design you need to take accessibility into consideration.

I'm sure there's another way of doing it so that it does resize well...

imho css-p is the only way to go, but go to another forum, and you'll find another opinion. this forum is about standards, accessibitiy and semantically correct markup. we believe it is the way forward.

hth

larmyia

I agree.

I made some simple, yet understandably rookie, observations regarding the page I am creating. Particularly - why my bottom menu is so fluid as opposed to my top menu. And why does my top menu look like a jumbled mess at larger font sizes.

With that in mind, and with the fact the top menu was created using a Project 7 extension - I have begun rebuilding the page to create:
1 - a fluid expandable page
2 - work on fixing the top menu to share the same fluis characteristics the bottom menu does. To do that, I need to understand how P7 did what they did. And I'm in the middle of that now.

It's all taking time, but I agree with you, and I'd rather do it right the first time!

I'm currently rebuilding at:
http://www.fizzcreative.com/balloon/index2.html

Thanks for the moment!

tg

Opps...

Currently flustered..

Cannot get my menu to center align to match my bottom menu...

Page is at:
http://www.fizzcreative.com/balloon/index2.html

Bottom menu (exhibiting correct behavior) is governed by #navfooter located at:
http://www.fizzcreative.com/balloon/styles2X.css

While my cludgy top menu is governed by:
http://www.fizzcreative.com/balloon/p7pm/p7pmh0X.css

I have tried putting text-align: right; in all the statements in which I think they belong, only to remove them after they did not work.

This went from "this isn't that hard" to "maybe I better try it this way" to "this is sort of making me mad!"

Any help is appreciated. I will continue different things in the interim in hopes of a solution.

Thanks!

I appreciate this is no help to you, but I would have thought #menuMain {margin: 0 auto;} would have worked (it doesn't).

will try and attack this later on when I get back

larmyia

ps sorry i can't be of more help. I know how frustrated you must be!

I went to projectSeven's website and poked around. The sites states that it connot be center aligned...
here is the link:
http://www.projectseven.com/support/answers.asp?id=169

so I will make due. It is okay and i have worked out some major issues.

Thanks for the follow up.

oic. so are you going to use the P7_centerTag script? lmk how you get on.

sorry I wasn't more help.

larmyia

Really I don't know.

I'm not thrilled with the work that has gone into an appearance that is not entirely consistant between browsers. And I don't know how to fix that.

Being CSS - the menu can grow with font - but once it outgrows the space - it wraps, the bg only wraps in certain browsers - and anarchy ensues...