Horizontal CSS Menu Bleeds into Multiple Rows

My name is Tony and I am building a website for myself. I have used CSS for much of the layout and for the most part I like what I have. Unfortunately I have one nagging problem with the main menu that I cannot figure out. I hope that someone can help.

There are other bugs in this, but this is the problem of the day. It is best
viewed using Firefox. I have not made changes to accomodate internet
explorer so I don’t know what it will look like in that browser. That is a
problem for another day.

In short the problem is that the main menu, which is a list of lists that uses
CSS to to make it horizontal, breaks up into two or three rows depending on
which item is selected. In addition in any situation if the refresh button is
hit the menu will be redrawn and be in its desired state, that is horizontal.

The problem can be viewed at: (This forum will not allow me to post a
website in my first post. So that is the reason for the site being defined
this way.)

www ‘dot’ TonyKubalak ‘dot’ com ‘slash’ newsite.

When going
to this link the page should look okay. When you click the “about the
builder” item it will also display as desired. In fact all menu items except
the “links” one will work as desired. When the “links” item is selected the
menu will be in two or three rows and the middle will be blank. The blank
middle is fine because I am not doing anything other than just trying to get
the menu to remain horizontal. Now click the refresh button. The menu
will now be redrawn as horizontal. Next click the “home” button. The
menu is again broken and the middle section shows the home page. Again
click the refresh button and things will return to the desired look.

The difference is that the menu items other than “links” are implemented
as target links. That is the syntax is xxx#home. You can see the syntax
in either the address bar or the status bar. For the “links” item I am using
xxx?nnnn to pass an argument to the php code. I need this argument to
build the dynamic portion.

The menu items that use the target links are implemented as divisions that
are initialized as invisible in CSS and when the target is selected CSS is
again used to make them visible. The behavior that I want is that all the
content surrounding the middle section is to remain stable and all the
display happens in the middle section. The target items are divisions that
overlay each other and only the one that is selected is made visible.

I would appreciate any thoughts that anyone has on this. I have been trying
to figure out how to fix this for some time and I am not getting anywhere.

Note also the time stamp in the lower left corner. This only updates when
going from “home” to “links” or vice versa. The date is javascript that
should be interpreted on the client side.

Thanks in advance.

Tony

Tony,

If you can squeeze your question into a concise paragraph or two you are more likely to get a response. It looks like you put the navigation in a table. The most common reason for the navigation to drop to multiple lines is if the container is not wide enough.

E

Tony,
interesting site. I didn’t see the nav in a table… it looks like excellent HTML code as far as the dropdown menu is concerned (except I probably would not skip to h4’s and h5’s so early in the document…)

Viewing in Firefox on Linux, the page does have this unstable jumping which normally I only see on badly-made table-layout sites. Also the name is sitting over other text, making a jumble. I’m not sure what the cause is but I think (think) it might have to do with all the positioning on the page. I skimmed through some of your notes in the CSS, and while most of them seem spot-on, in general one is safer making local boxes pos: rel and absolutely positioning little children of them. I would NOT in general absolutely-position large chunks of the page like the menu unless I was doing a l33t-kewl CSS trick.

Interesting that I saw :target in the css : ) You are aware that maybe one browser supports that? Or in any case, it’s css3 that hasn’t filtered down to the browsers we peons use : ) I expect l33t browsers like opera to have been on board with such thing long ago but looking at your subject matter, you will need to care about IE users (bleh).

. I have not made changes to accomodate internet
explorer so I don’t know what it will look like in that browser. That is a
problem for another day.

Know that actually it is usually LESS work to deal with everyone up front, rather than building for one browser and then checking the others. Esp with all the positioning I saw.

Most importantly, even Firefox is likely to goof a bit with your page: you have no doctype. You definitely definitely want a doctype.

I prefer HTML4.01 Strict, personally, though looking at your code, I can totally see you as an HTML5 explorer : ) (which is not listed on that page but google it with “whatwg” and you’ll know all there is to know).

Even modern browsers have a Sub-Standards mode, where CSS rules aren’t quite correctly followed, when there is no doctype, as the browser makers want the browser to assume that pages built without a doctype were built back before the Fall of the Wall. Or at least, last century.

IE is even worse: without a doctype (or with a doctype but with anything coming before it) is in Quirks Mode, otherwise known as Best Viewed Like GeoCities 1999 PARTY MODE LAWLZ!!! or, like Ie5.5 : )

So your first task is to get thee a doctype. It may ruin your current page; if so, that’s fine. It’s a necessary growing pain if it does (but I expect modern browsers to be mostly ok). It can only improve IE.

Second task might be, at least for the menu if not for the whole header area, to try to use more default HTML flow.

Usually good dropdowns DO have the main ul at least set to position: relative and also the li’s and the sub ul’s abso-po’d… true. For your dropdown with the awesome chair photos I’d actually let the pos-rel of the top-level li’s set where the photos go… because if my screen isn’t very tall, the bottom two photos start getting cut off. Or, manually set their top: #'s to right under the main menu.

I’m personally against using display: none and block to hide/show things most of the time, mostly because screen readers obey display: none for some reason… besides, you’re already setting the whatever to pos-abso, so start out with it a bazillion px to the negative left, and pull onscreen on :hover and :focus.

If you check out the Sons of Suckerfish dropdown at HTMLdog.com you’ll see that your menu is already very similar (which is a good thing) but you can generally reduce your amount of positioning.

After throwing a doctype on there, see what maybe looks worst and fix it however you want to, check in at least one other browser, and bring it back here. Plenty of CSS gurus are sitting around here and can show you a less-rigid way of setting up the page, or at least the header, and likely we can make it totally avoid the wrapping in the menu. I don’t even want to speculate on the possible cause without a doctype on there… also, are you building on a Mac or something else? Am I the only one seeing the text problem above the menu? Likely a default-font-size issue but who knows.

PS you might want to get in touch with Rayzur here… he’s also a woodworker tho I forget if he did specifically furniture : )

That’s a keeper, Stomme. :smiley:

Max, I’ve always loved the little badge here at rainbow jesus (Best Viewed with Microsoft Internet Explorer… Forget all the other browsers and down with the Web 2.0 net police) LAWLZ!

I thought it was a prank at first, but it appears to be for real. Good Grief!