CSS Forum

**jpf566** · 03-27-2009, 08:18 PM

HOPEFULLY SOMEONE can help! I’ve got in way over my head while trying to implement a new CSS menu for my website… I used the menu that can be found here.

http://www.lwis.net/free-css-drop-down-menu/

(Adobe.com Theme)

So..I edited all the CSS, Menu Code and added images instead of text for the menu.. I got the menu working great! The only problem is when I tried to incorporate it into my site I encountered problems…(I think it has to do with my sites style sheet and the style sheet for the menu)

Whenever I place the menu on a page its screws up the formatting of all the text on the page! I narrowed the problem down to the CSS file listed below

http://sheffieldfurniture.com/cssmen...om/helper2.css

I narrowed the line of code that is causing the problem to this

* { margin: 0; padding: 0; }

When this CSS file is linked to my page looks like this (Notice the menu is aligned to the top properly but text spacing below is messed up and some of it is Italic….) See Below

http://sheffieldfurniture.com/main/rugtest.html

NOW….If I remove the * { margin: 0; padding: 0; }
From the css file (helper2.css) All together than my page looks GREAT!! The only problem is my menu doesn’t align to the top properly! See below

http://sheffieldfurniture.com/main/rugtest2.html

I’m not sure if I need to just fix the CSS file or just remove the * { margin: 0; padding: 0; } and edit some code on my page to allow it to align top…Can anyone please help!? Thanks in advance for anyone patient enough to look into this issue!

**LadynRed** · 03-27-2009, 08:43 PM

Quote:

* { margin: 0; padding: 0; }

That zeroes out the margins and padding for EVERY single element, and it is not a good way to do this, unfortunately. While you do want to zero out margins and padding, using the * is not recommended, it can cause problems. Better to use a css reset instead.

Quote:

added images instead of text for the menu.

Why ? You destroyed the accessibility of the menu and search engine spiders can't read images!

1 - validate your code first! You have a lot of errors, including some invalidly nested codes, missing tags, etc. Fix that first.
2 - Forget the XHTML doctype unless you're going to learn what the rules are for using it. Your code isn't even close to XHTML. Drop it back to at LEAST HTML 4.01 STRICT if you don't want to follow the XHTML rules.

3 - In Firefox, and probably other browsers, your menu is getting lost behind your flash. Set your swf to wmode=transparent and that should fix it.

4 - dump the tables for layout.

I'm not seeing any italics except for the <h3> with the <em> wrapped around it underneath the flash.

Your menu doesn't work at all in IE6.

**jpf566** · 04-02-2009, 11:29 AM

Wow Cool! Thanks! I got it working! http://www.sheffieldfurniture.com There are 2 things though...

1. Is there any way that I can make this so I dont need to change EACH PAGE (I used dreamweaver find and replace but its still a pain in the butt to upload all 200 some pages to my FTP site.) I dont think I can use an Iframe because its a dropdown menu...or a frame for that matter!

2. It dosen't work in IE6. Anyone have an idea why?

THANKS EVERYONE!

**LadynRed** · 04-02-2009, 01:55 PM

Quote:

Is there any way that I can make this so I dont need to change EACH PAGE

What are you changing on EVERY page ?

You also don't need the DW javascript nonsense for the rollover image swap, you can do that with CSS AND get your menu working in IE.

One other thing, define a background color for your site on the <body>. My default bg color is NOT white - so what I see when I look at your site is your content on a pale PINK background. Other people may use other colors that will make your site look even worse.

**jpf566** · 04-02-2009, 03:19 PM

I would need to change the menu scripting (all the list items) You can see its a huge chunk of code on all my pages. So do you think the DW javascript is what is making my menu not work in IE6?

About the background..hmm Ok but i find it odd that anyone would switch there default background color...and if they did. They should expect to see that color...haha anyway yeah I guess ill change that.

**LadynRed** · 10:58 AM

Quote:

About the background..hmm Ok but i find it odd that anyone would switch there default background color...and if they did

I know that I'm far from the only one that does that. The REASON *I* do it is because I stare at these screens 12+ hours a day, and having a glaring white background causes eye strain and the resultant headaches. I changed my bg color to something that's much easier on the eyes.

Quote:

They should expect to see that color...haha anyway yeah I guess ill change that.

That's not the point. The point is that it's GOOD PRACTICE to always define a background color - even if it's just white.

Quote:

I would need to change the menu scripting (all the list items)

IF you used the CSS method, that would NOT be necessary because the scripting would be unnecessary.

**TripleMoons** · 04-03-2009, 11:23 AM

Is the content supposed to be under the utility nav and copyright? That's what I'm seeing in FF for Mac at least.

If you recreate your menu using CSS search engines will be able to spider it effectively.