Vertical Menu

Hi,

I'm working since few days to design a vertical menu for my website. To make it search engine friendly, I use CSS.
However, I'm having some trouble to do some tasks.

Firstly, you can view the menu on this page : http://www.electriduct.com/test/template/left.html

2)make the second level overlap the first one when it's display by the mouse over a category.
3)I would like to keep the light background on the category when I"m moving the mouse over the second level
4)I would like when someone is in the category 2, the category 2 in the menu is lighter, like the mouse over. I read that it should be able to do it with Javascript but i would like a simple way to do it.
5)I test my menu in IE 7.0 and Mozilla, but I'm sure about IE 6.0 (55% client use IE 6 on my website). And though not a lot use IE 5 or older version, I would still want to fix the bugs for these versions.

So now the code can be seen in the source html page.
But to resume the structure is like:

<div id="menu">
<ul >				  
  <li ><a href="" > Home </a></li>
  <li> Cord Covers </li>
  <li ><a href="" class="sub" > Rubber Ducts </a> 
       <ul> 
	 <li><a href="" >Rubber Duct: HOME </a></li>
	</ul>
  </li>
   <li > <a href="" id="currentPow"> Power Extensions </a> </li>
</div>

Code (markup):

And the CSS:

#menu {z-index:1000;width: 150px;border:1px solid #CCCCCC;}
#menu ul {padding:0;margin:0;list-style-type:none;width: 150px;}
#menu ul li {position:relative;text-align:center; }
#menu ul li a, #menu ul li a:visited {display:block; text-decoration:none;line-height:15px; text-indent:5px;color: #FFFFFF;font-family:}
#menu  ul li a:hover {color:#FF0000;	background-color:#edede5;	padding: 3px 0 0 6px;}
#menu u1 li.sub a{background: url(menuA.gif);height:50px;}

Code (markup):

Tx

 

Well, I'll just pick one thing and tell you about IE6 and menus with subs.

You know where you've got
<li><a href="blah">Cord Covers</a>
<ul>
<li><a href="blah">Rubber Ducts</a></li>
</ul>
</li>
? You see the </a> sitting at the end of Cord Covers? IE6 doesn't like that. It wants to see it at the end of the last </li>.

I dunno if this is the best technique, but it does work:

(And I first saw this at Stu Nichol's CSS Play. (http://www.cssplay.co.uk/menus/final_drop.html) )

He uses invisible tables to move the </a> just for IE6 and under.

<li><a href="blah">Cord Covers<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
        <li><a href="blah">Rubber Ducts</a></li>
	<li><a href="blah">Other List Stuff</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Code (markup):

He cancels out IE7 (because it's compliant here) and tells IE6 that the </a> is really at the end of the list.
CSS:

table {
position: absolute;
top: 0; left: 0; 
border-collapse: collapse;
}

Code (markup):

Not sure that you actually have to position them though. I think I've done one of his menus without setting position absolute or coordinates. The important thing is the border-collapse:collapse. Also, I picked this from a horizontal menu. If positioning is important, then those numbers should change. But since they're commented out, I don't think IE6 or anyone else actually shows them.
Heck, try no css for the tables. Maybe it's not needed at all. I've never taken the whole thing out, just pieces.
To keep the main part also light in colour, you've got to have code with something like
ul li:hover ul li:hover {
light background colour etc
}
Like, when hovering on the main and also while hovering on the sub, make a light colour. I'm not 100% but I managed to use that on my menus and it worked (though in IE6, the subs were the same colour as the mains, even though I set seperate classes for the subs like you did, so play with it).

 

Hey, thank you so much for your help, I appreciate it.
I worked on it and the result is close to be done.
I still have an issue when some categories are too long and go on 2 lines, for some reasons it doesnt work well, though in IE 6 it works great.
Do you have any ideas about how to fix it ??
Example: if you mouse over Heavy Duty, you should see Bumble bee dropover on 2 lines but the dropover word is cutted ????
I tried with some "height:auto" in li,li a,li a:hover but it makes my lines very tight, and I would like a minimum height. I dunno how to set up this, some padding ??? or a height to fix upper ??

Also, to try on IE 6, I got some trouble to uninstall IE 7. By looking, I found something that allows me to have many versions of IE (IE 4, IE 5, IE 6, IE 7 ..) it's very usefull since i can open many different IE browsers at the same time and compare. I recommend it.

About the last part, I think the only way to do what I want is some Javascript. I had found something to do it, but I cannot find it again. It's something similar to :
<body onload=javascript:changemenuHover() >

And a javascript function:
getElementById("mycategory).style = "classHover"
But it implies that every categories have a diff Id.
Anyone already did something similar..

Thanks.

 

If I get time to rebuild your menu on my machine, I can probably figure something out.

Javascript is a last resort. You can do almost anything with CSS that you can do with Javascript, with mostly one exception: timing. You can't make something happen s l o w l y on hover without Javascript.

If you got the Multiple IEs from Tredosoft, that's great for testing stuff like menus, but it's NOT good for testing flash or javascript. All those older browsers from Tredosoft have the current Javascript capabilities of IE7. And Flash, for some reason, just doesn't seem to work on the older IEs.

If you ever need to test these two things, what you want to do is have regular IE7, and then download an actual, but standalone, IE6. You can likely forget about IE5.5. However I find IE3.1 interesting sometimes because it cannot see CSS and is great for simulating browsers which cannot do that (making sure your site is usable even without CSS, javascript, images, etc).

If I can't figure out the longer line thing (I need to go look at it to see what you're talking about; I'm a visual person), deathshadow or soulscratch or Dan Schultz can. Right now though, someone's coming for coffee : )

Oh, and the CSS for the Ie tables is completely unneeded. I've deleted it from all my menus which use it and they still seem fine in all tested browsers. Dunno why Stu has it in there.

 

Looks like your site has changed. Where is the menu now?

Also, can you make a rough drawing of what you want?

 

I'll see what I can do in the weekend : )

 

Hey,

I just remind my current problems.

I work for a while on my issue.
I moved the page to http://www.electriduct.com/Templates/template10/test.html

However, I still have some bugs I would def like to fix it before to update it on my whole website.
1) I have a problem with the top of my page: the header.
Though it works ok in IE 7 and Firefox. In IE 6.0 the top of the page is higher, and in Safari, thats the worst since I must scroll a full page-width to the right.... The page info does not display directly under the homepage header. It is urgent for me to fix it since some clients cannot navigate like that.
Anyone can help me to fix it, because i tried changing some stuffs like : clear:both ... but nothing better.
2)The bottom of the content page. The content is styled like a frame, with a border around, however for the bottom, I want to make it more nice and with 2 pictures as you can see. I dont understand why when the page is long, I have a space between between the border left or border right ANd the bottom border ?? This is CSS too.
3) Pb about the min height and the categories on 2 lines for the second left menu. In IE 6, it works great, though sometimes the min height sounds shorter than others. But in IE 7 and Firefox, sometimes it works, 2 lines appear right and sometimes the second line is hidden by the category under. Really weird ...

It sounds like little details, but I would really fix the 1) problem since it's urgent for me to permit to see the website right.

Thanks

 

Here is what I see on Winblows on only IE6:
http://i34.photobucket.com/albums/d136/schroedingerscat/ie6electro.gif *Nevermind, this IS what you meant : )

In IE6 and 7, the footer's borders are being determined from the length of the text. You could change the footer out of the tables into a footer div with floating divs inside... give those divs a left border instead of the text inside and they should stay down for everyone as well as remove that bit of white on the right side + scrollbar in IEs.

Just checked in Opera and the menu also behaves and the space by the greybar is also non-existant. So, it seems to look good in all browsrs but IE6. My FF1.5 on Linux cannot see the content for some reason ??? <strike>But all other mozillas seem fine so I wouldn't worry about it.</strike> Aha, it's doing what Konqueror and Safari are doing with the doubled left margin... dang. Lemme work on this...

You could probably replace most of your Js with css-- like the button image replacement (the 4 grey buttons at top right). For unknown or changing widths, you could use "sliding doors" (see below).

For the body onload thing... http://www.sitepoint.com/article/structural-markup-javascript
Has the event listener thing (to prevent the problem of only the last script running with window.onload... and in that listener is also the starter to get the scripts to start running).

Whole article: http://www.digital-web.com/articles/separating_behavior_and_structure_2/

Sliding doors: http://www.alistapart.com/articles/slidingdoors/
and http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites
(I first saw deathshadow do this and now I've done it for two menus... it's awesome).

*Edit: here are real examples:
http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg <-- the image for menu
http://battletech.hopto.org/for_others/pixelcommander/template.html <--menu in page

Another: http://stommepoes.jobva.nl/Toughshot/menu.jpg <--menu image
http://stommepoes.jobva.nl/Toughshot/toughshot.html <--menu in page

It's awesome, and works without javascript. Figuring out where to set the backgrounds is pretty much trial and error, even when you measure it.

 

Thanks so much for your help and your links.

Lots of work to do, I think I would be able to change some stuffs you advised me like:
1) Get rid of the onload in body by an event. I will study that. I'm not sure to see what is the interest, can you tell me the major difference quickly? I will def do it since sometimes I need to load on more function for certain pages.
2) The 4 pictures at the top. I see what you mean, it would def help to get rid of javascript first and also less pictures to download so quicker to load the page. But I believe, if I change the pictures at the top with CSS background, I would not need the "body onload". Plus it's going to be quite complicated since the background though simple and gray, contains a diff icon for each pictures

I also followed your advice and put the css links before the javascript. I didnt know it does matter.

About that: "align=center should be removed if you're going to stay with xhtml. margin: 0 auto is the Way."
Does it work all the time, even table?

About : "the two-lines interfering with other menu parts" . it's really wierd since it only happens sometimes, actually I use FF 2.0.0.9 and it does sometimes. Really weird ....

About the footer, I'm not sure to see what you mean. Do you mean that the fact the footer is a table it implies the bottom of the content to not display the all border ???? it should not affect it.

But actually the major pb, I want to fix is really like you show on this picture:
http://i34.photobucket.com/albums/d136/schroedingerscat/ie6electro.gif

Finally the really BIg issue I want to fix quickly is like you saw :
"I only see a header and a footer. Is that what it's supposed to do?"
For some reasons, it works great in FF and IE but Safarai has this problem.
A client told me he could not see the pages because of that.
And so I wanted to verify it, and if you go this website:
http://www.browsrcamp.com/
You will see what is the problem.
I really Want to fix it asap.

Thanks

 

It won't (shouldn't) change the appearance or function of your page-- it's just semantics-- (x)html should have the content, css should have the presentation, scripts should have behaviour-- and body onload in the html is mixing the two. It's something you shouldn't do, but not illegal or anything.

I'm slowly building your page on my server. Top is done, http://stommepoes.jobva.nl/Electriduct/electriduct.html with the menu images... I know nothing of scripting or image maps-- what I don't know I'll leave. I've ONLY done the top, the rest is still unstyled!!! I also eliminated the onmouseover on the GO search box-- mouseover stuff that changes apppearance can almost always be done with CSS : )

I dunno that it does; I heard this somewhere. It might just be semantics again.

Yes, so long as you have a valid doctype/no quirks mode (you do have valid doctype) and so long as there's a width set.

When I get to that menu I might find something. Or if I can never reproduce it, possibly it's only on your end?

It should not, you're right. The table IS I think giving you that scrollbar in IE and that little space on the right. But, I will probably redo it as divs since I don't think a table has any advantage here.

So long as my server doesn't puke, I hope to slowly work through your page and get most of it okay. So far I've only looked at it in my machine with FF... I still have to check the top in all other browsers (might look like crapola in IE right now : )

 

Thanks a lot. Dont worry about the map, and no pb to leave stuffs, it's already a great big help.
Get rid of the mouveover for the GO button is really appreciate too.
However, I checked the menu images, and when i mouse over, it's well lighter, but a top gray bard is added as well as FF and IE 6.

Can you explain me what do you mean by that?
I don't know about doctype. I just try to make my webpages validated by W3C.

It could be, not going to be easy to find the ick.

I have some ideas about the interest of CSS. I cannot be wrong, tell me your opinion about that. For me, I use CSS for sure, because it's easier to style: code simple, update easy, .... . I use div because I heard that div are better SEO friendly than table. But also, I heard about still FEW browsers don't support CSS, and it takes lots of time to load the page, since the first thing, the browser load is the Html code and then the CSS.
So my politic is : use div for the important content of my page, my keywords, my links. But when it's about pricing, characteristics, I think a table is the most appropriate , with of course still CSS to style the table.

Thanks again. I get updated by your work.

 

Sorry, man, you caught me in testing phase : )

I've got the right menu looking good in old FF and IE6 for Linux (not at work, no Winblows machine to do a real good IE test on).

Guess what? I too had an enlarged light-tan part-- I dunno what the reason was for you, but for me it was when I rewrote the form, I gave it the requisite fieldset and legend. I had the legend empty because it wasn't needed.
A form cannot simply have inline stuff (like labels and inputs). I just found this out a few days ago at Site Point. So they have to be in a block element like a div... or a fieldset. So I used a fieldset, but those are required (at least in XHTML strict) to have a legend. My legend was somehow taking up space in IE6, and sticking an empty span inside magically fixed it. Extremely weird >: (

Well first, you actually bothered to put the line saying <!DOCTYPE on top. Lots of sites don't, which is bad bad (unless you're google... they can get away with that crap cause their page is mostly empty). Doctype tells the browser what type of document your page is (and thus how to render it, what rules to follow, etc). Most browsers have a "standards" mode for correctly written pages, and a "quirks" mode for pages like Google. IE6 and under has the most noticible differences, and the "standards" modes aren't very standard (surprise).

So, if google in its current state had their little search box in a table, and tried to center it with margin: 0 auto; it probably wouldn't work. Stick that doctype line on there and it will.
Important to know is that if there is ANYTHING, even a space or a blank line before the <!... part, IE6 and under (7 not sure) will go into quirks mode. In this case you'd have a doctype but for IE it wouldn't be "valid." Stom.

First, CSS is usually easier, but define easier to someone who's learned on tables : )
Second, the SEO part is bull. So long as there is readable text, teh googles etc will read and index them. Surely a well-written and lean page will be read and indexed faster, but big whoop. Sh*tty pages like yahoo.com get decent SEO ratings, and some of the top pages are in clunky tables. Mostly harder on the blind than on SEO bots.

About browsers: most browsers support most CSS, but there are several "layers" or "ages" of CSS. CSS1 was the first. Most browsers support CSS1 stuff. CSS2 had issues, and they revised it to CSS2.1 (to make the rules conform more to how the browsers were actually working, hah!). Most browsers support CSS2.1. I don't know the site off-hand but there is one (and I have a copy in the back of a book) that lists every option and which browsers support it.
Opera didn't support some things until 9 came out. Opera 9 passed the acid test and while it has a bug or two it is a very safe browser for CSS and most Opera users update regularly so most should have 9 now.
Safari for Mac is kinda the same, a few bugs or quirks too (like, you've coloured your input box at the top... Safari won't deal). Konqueror also passed the acid test (google it if you're unfamiliar with it) but also has some bugs... by the way, they both have the same basis for rendering engines... thus whatever the problem is with your page is happening in both Saffy and Konq because of their similar engine structure.

IE6 is one of the worst (no, wait, 5.5 is worser). There are more bugs than you can count, and there are many manyt sites detailing the various bugs and how to get around them. When I'm done with your page, you're going to see a lot of "display: inline;" on floats because of a double-margins-on-floats bug that really screws up pages.

Any alternative to CSS wouldn't necessarily be cross-browser compliant, though javascript often is used to do CSS effects for this reason. For example, my awesome GO buttun doesn't do anything cool in IE6 because... :hover doesn't mean anything to IE6 except for <a>. Yup. My trick with the right menu works because that's a normal list with normal links. But a submit button cannot be a link. So, if you really neede that effect badly for IE6, then yes, you'd have to bring back the javascript.

Lastly... pricings and characteristics can indeed be better off in a table sometimes... it just depends how you want to set it up. However, the footer I still feel can work better as a div id="footer" with floaties inside.

For the middle of your page, yeah, either a list or a table would do the same thing... so then be extra extra careful of labeling stuff in the table because all them old blind people in Florida might want to buy your stuff. I wish I had the page handy, but there're pages out there for xhtml and accessibility (usually a few extra things, like captions, summaries, and naming the columns and rows).

In any case, I will keep playing with the page... if you see ugly background colour on stuff, it's because I want to see how big something is or where a float container is. Also, my plan is to try the negative-margins 3-column CSS trick, since I think it should work well with your page and keep it liquid width.

 

Update in case you're not getting mails... my server went down (my Internet went down!) but now I'm back to updating it. I've redone the tables so they match bots and screen readers yet still look pretty much like you had them (but I still have to add the backgrounds and the images to make sure they're still pretty).

Tomorrow (unless I get swamped) I'm going to do Deathshadow's three-column CSS http://battletech.hopto.org/html_tutorials/3coldiv/3col_div_fluid.html which has header and footer staying cool. I hope to also get to the menu while adding it, see if I can clean up Stu's CSS and see if I can get that error to show. It should also act like your template, no going off to the left in FF, Konq or Safari.

I asked a few questions in a PM too.

 

No pb for your server, its something sadly happens too often !!
Sorry I could not really help the past days, but I dont do always what i want, and new tasks are ordered faster than the time to do one

I know it's not very appropriate because it's a CSS topic, but since Css is a part of web design, I was just curious to know your opinion about the new "add to cart" button I did.
http://www.electriduct.com/dropover-cable-protector/dropover-lites.html

You will notice the new template is already up. Yeah, order obliged, i know its not fixed, hopefully i Could fix the issues with you before they ask me to update all the website. we shall see ...

so, i profite to have a CSS expert with me
to solicite advices for 2 new requests:
1) I should be able to do the first one. I just would like to improve the table for the price, i mean header looking better (instead of poor grey) . I was thinking about background image, I already did something similar for the tabs I did for the products (features, more images, spec ...)
2) More complicated, it's something i looked a long time ago and just quit. So as u can see, when u have a long page, u have to scroll down to the bottom and u lost the side of the website (i mean the menu, the "View Cart" ) . the solution for sure is : why do u do so long page ??? not always my choice again . So I looked at for scrolling the side as well it got disappeared when you scroll the content. I had found doing that with something like :

div style:position:fixed 

Code (markup):

. but not dont really rememeber what it did, but i think it worked in FF and not in IE or the contrary. but still , it was not perfect.

I keep looking on your page.
Let me know how is it going and would be great to work with u.

Tx

 

Man, I wish I knew what was causing that problem with everything to the left... unfortunately, I'm better at writing new css than figuring out what's going on in old CSS : )

I'm not sure what you're doubting with the Add To Cart buttons. It looks like an <a> with an image inside, and you've covered your butt with the blind and bots by having both alt text and title text... should work for everyone fine.

I thought I had deathshadow's css working well, but I'd only just gotten it to work in FF and then had to go home... now I have only the Linux machine and my Fake IE6 is showing the right column still being kicked beneath the content. My content seems to stretch to the right and push that right column down. I tried taking out the floating divs (popular/new stuff) and that wasn't the cause. Surely the table's not doing anything either. If I can't figure it out, I may have to ask ds what could be doing that as his site looks good on IE6.

For the long pages, yeah you could use position:fixed.... if it worked on IE6. E6 only works on the body. Most people with long pages try two things: javascript scrollers and back to top buttons (or, it could be #payment or #menu... whatever you want).

Since I'm playing with your page, I'm ending up re-writing a lot of stuff (re-arranging stuff either to make it more semantic or just easier for me : ) and so if I end up getting everything cool in every browser, and if your page isn't hard-coded (if php or perl or something is loading the page) it might be lots of extra work to change everything over in that code. If everything's hard-coded, you could just copy-paste. So, it will be your choice if you want to use my code or not.

For now, you could try copying my CSS from start (*{margin: 0; padding: 0;}) to the end of #barSearch, and the HTML for that as well... I think that whole part is pretty stable and can immediately replace your javascript image swap (unless that same code is doing work in other areas too). I also found out why, no matter how low I set the right menu, I always had a bit of tan underneath in IE6. Now I know-- IE6 tried to make the containers hold their floats, which no-one else does. I've learned like 5 new things with your site.

Always look agt my signature. It's very true. There are a few experts on this forum: deathshadow and Dan Schultz and maybe VimF... and soulscratch, webdesigner, Astaroth Solutions and a few others are also pretty good, and usually know more stuff than me.

 

Although they rarely post, I can tell jamesicus and Gordaeon are up there with Dan and deathshadow. Also kk5st.

 

I think Gary has left the building : (