Eric,

I have no idea about how to do that nor understand what I would be doing. Could you help? Would appreciate. rob

Do we know what those dropdowns are supposed to look like? I have assumed that they should have the orange background, so I have made a suggestion here: www.eikweb.com/test

While doing so, I removed tons of outdated html tags that should better be turned into css instead. I have a hunch that this mish mash of css and presentational html tags have been causing the weird look of the menu.

Nice job Inger.

Inger,

Looks good. Attached is the original "look". Font is a little smaller, but that's basically it. The width of the "content" area is a little wider than the menus. But, with some minor adjustments it looks good. I really appreciate your help to clean things up.

This "mis-mash" came from a Coffee Cup template. I didn't change much.

However, now I don't know what to do with it as far as other pages that I have been working on. I'm really a very novice web page coder. Took a course at the university on CSS and Dreamweaver, and have been struggle with trial and error ever since. I've considered just using the menu creator in Coffee Cup's html editor and start from scratch. However, it's looking pretty good so far, so I think I will just leave things alone.

1. Do I need a css file to go with your new source code now, or is this page self-contained?
2. What do you think I should do with some of the other pages I have been working on? e.g.
http://social-style.com/beta/index2.html
http://social-style.com/beta/book.html
http://social-style.com/beta/page_template.html

Since I didn't have any bullets on these pages, I didn't have any problems with them. So should I just leave them alone and keep them linked to the CSS file "socialstyle.css"?

rob

I think we attacked it from the wrong angle the other day. Instead of targeting those special lists, we messed with all of them, and that made the menu go out of shape.

Not sure what advice would be best for you. Personally I would have started from scratch, writing all the html and css myself. But since you are a novice to this, as you say, I would perhaps suggest that the easiest solution is, that you keep the pages as they are, and for the index page, use the same css file, but add a rule for lists that are inside the content area:

#content ol, #content ul {
margin-left: 20px;
}

But then all the presentational html tags will remain in the document, causing a slower loading time.

And also, the <div id="group-list"> has to be converted to <div class="group-list" because it appears twice on the page. One and the same div ID can only be used once. Then in the css file, convert all the instances of #group-list to .group-list.

Another thing: I understand you are using Dreamweaver. If it is a newer version, I guess it has support for html5? Since you are using a css3 style sheet, you ought to have the html5 doctype too.

Ingrid,

This CSS code -

#content ol, #content ul {
margin-left: 20px;
}

worked perfectly on my original CSS before all the modifications, and menus look fine. Thank you sooooooo much!

Regarding "And also, the <div id="group-list"> has to be converted to <div class="group-list" because it appears twice on the page. One and the same div ID can only be used once. Then in the css file, convert all the instances of #group-list to .group-list."......

Where did you see <div id="group list"> twice on the same page?

I have Dreamweaver CS4.

Sorry, it was <ul id="group_list">, but look down this bit of code and you will see it once for each of the sub menus.



And please note: my name is Inger, not Ingrid.

Sorry about that Inger. I hope I didn't offend you.

You are the first person I have ever met that has that name. It's not very common in my country.

Thanks for clarifying. I believe you when you say it is wrong, but it doesn't seem to cause any problems. But to avoid this duplication could I could create <ul id=grouplist">and <ul id="grouplist2"> for each of the drop down menus, and then in CSS -

/* Drop-Down Category Menu #1 */
#group_list {position:absolute; top:auto; left:-999em; width:153px; border-top:1px solid #dd692a; background-color:#ef712d}
#navigation li:hover #group_list, #navigation li.sfhover #group_list {left:auto}
#group_list li {width:140px; margin:0; padding:5px; font-size:.85em; text-transform:none; background:#ef712d}
#group_list li a {display:block; padding:5px 5px 5px 15px; text-align:left; text-decoration:none}
#group_list li a:hover {text-decoration:underline; background:none}

/* Drop-Down Category Menu #2 */
#group_list2 {position:absolute; top:auto; left:-999em; width:153px; border-top:1px solid #dd692a; background-color:#ef712d}
#navigation li:hover #group_list, #navigation li.sfhover #group_list2 {left:auto}
#group_list2 li {width:140px; margin:0; padding:5px; font-size:.85em; text-transform:none; background:#ef712d}
#group_list2 li a {display:block; padding:5px 5px 5px 15px; text-align:left; text-decoration:none}
#group_list2 li a:hover {text-decoration:underline; background:none}

Would this work?

Yes, that would work. Leaving it as it is will usually not cause any problems, but since it does not validate, there might be some funnies with some browsers (there are oodles more than Ffx, IE, Safari, Opera and Chrome), displaying it all over the place.