Click to See Complete Forum and Search --> : Horizontal List Menu, etc.


BluesDog
04-11-2007, 02:46 PM
I actually have several questions but i'm complying with the sticky requesting a descriptive title. Apologies if this post belongs in several sub-forums but i wouldn't be bothering you folks at all if i hadn't raised up a bunch of issues with my latest project.

1.] My main problem is with the use of an unordered list menu. Please see:
http://www.mywebthings.com/ulu/
Viewed in IE6 the container div collapses nicely around the <ul> element with zero margin, so long as i set a height attribute on the container. Doesn't seem to matter what height, the list stays aligned and it scales. All i want is this same behavior cross-browser. I can almost get it if i set pixel heights on all the elements concerned.

IOW, if you're viewing this page with IE6, this is what i want my navigation to look like. In FF and Opera, the list elements spill outside the bottom of the container div. If i set pixel heights on all elements involved, then it's fine in IE but i get a small bit of white space to the left and top of the menu in FF and Opera. And i'd rather not set absolute size on text elements anyway.

Maybe it's something simple and stoopit. At the risk of giving too much detail to a simple and stoopit issue, i'll note that i swiped this list style from Listamatic (http://css.maxdesign.com.au/listamatic/horizontal02.htm) after failing with my own:
http://www.mywebthings.com/ulu/old_list_style.txt
This worked pretty good cross-browser but i had a much larger whitespace to the left of my list in FF, which i never could get rid of.

2.] Secondly, when i first built this page i was very proud of the fact that i'd used no divs whatever. IOW, using the stylesheet almost exactly as it is without any container <divs>s:

http://www.mywebthings.com/ulu/html.txt

This was really great until i went to nest elements inside the headers. Tables and paragraphs would jump out and go wherever they pleased on the page, depending on the user agent.

OK so maybe it doesn't make strict semantic sense for a header to contain a paragraph or a table, but why do the browsers care? My thinking was that an element is an element whether it's a <div> or an <h1> so i thought :p and the browsers went :p right back at me. So, i gather a <div> is necessary if you want to group elements for positioning?

3.] Lastly so long as i'm here i reckoned i'd ask what y'all think of my design, and whether it looks appropriate for a health and fitness site. That is, aside from the raggedy look to my graphics; in the original they are 24 bit .pngs and i'm running a filter on them for IE.

Please tell me if it sucks, and if so, why. It's very important to us to present a professional face to this project. It's for my wife, and she loves it, but i've personally been looking at it for too long.

Any recommendations greatly appreciated,
and thanks for reading,
-jb

BluesDog
04-11-2007, 05:32 PM
Doh!

Sorry, i've really been looking at this for too long.

I described the problem in terms of browser rendition, and that is only partly the case.

I have no idea what i did, other than to discover that the problems in FF and Opera were owing to the scaling of my text, which i do with my scroll wheel sometimes without thinking about it.

For some reason my menu container was gracefully scaling up and down with my scroll wheel in IE6, but not in FF or Opera, which was causing either spillage or white space depending on text size. Only by accident i discovered that at a certain scale, everything looks the same in all browsers.

Now the problem is that i messed with too many things at once and so i don't know what i've done to fix it. I mean, i cleared all heights related to menu and menu container, and that seems to make it consistently scale in all three browsers. But i also messed with my FF font defaults, and i don't know what the "default" default is anymore.

What i think i mean to ask now is, can someone please point me to some info on how to do this consistently so that size doesn't matter? (No giggling from the girls...:) ) I mean because with my stylesheet as it stands now, with all height values cleared, and with whatever i've done to my FF font settings, i still have a tiny bit of white space under my list elements except at one certain scale. I'm of the opinion that this shouldn't be, because people should be able to view my page at whatever font size they please and it should still look the same.

Also eagerly awaiting to hear if my design objectively sucks, or not.

And any ideas about why my original page broke in the absence of container divs... but that's mostly a curiosity thing.

Thanks,
-jb