website problem

[jefito]

Hi,

I recently had a problem come up in explorer, where the dropdown menus on my website at the top appear to be scrambled. This only happened since yesterday, and I haven't done anything to the code, or worked on the site.

I was wondering if anybody had any ideas as to why.

Here are the details:
It displays like this only on some monitors.
there's no difference between 800 px monitors and 1024px widescreen.
It doesn't happen in Firefox.
And, it dosen't do this in preview mode while I'm updating a raw file on my desktop, only when I upload it to the web.

http://www.set-n-me-free.com

I'm perplexed! Thanks!

[webshowcase]

Are you sure your desktop files have updated on your server?
stylesheet and html?
I am seeing your menu fine with ie7 and firefox however, in ie7 there is a gap between the products drop down and the body wrap drop down.
Try wrapping your entire site into a container. That should stop it.
I can't see a problem with the menu from my end. Try browsershots.org to see how it looks in other browsers.

[jefito]

How would I put the entire site in a container? I guess I'm not understanding that part. The wierdness is, is that it happened about 3 days ago. There hasn't been a problem before, and I haven't made any design changes, only updates within the body of the html.

The gap between the 'products' and the 'body wrap' is the problem. The menu goes across the page. This has been the strangest experience for me ever!

[webshowcase]

Add this to your css file:
#container {
margin:0 auto;
width:990px; <--what ever width you decide
}

Add this to your html code just underneath the first body tag and ending just before the last body tag

<div id="container">
</div>

This will also center the page on the screen making it look nicer.

On closer inspection I see you have one of the menu items as
<a class="c2" href="http://www.set-n-me-free.com/facecare.html">Products</a>
where as all other menu items are:
<a href="http://www.set-n-me-free.com/classes.html">Classes & Info</a>

without the class='c2'

Is there any reason for this?

[webshowcase]

I think this css code may be causing you some issues. padding-left:40px
try removing the class="c2" from your html

<a class="c2" href="http://www.set-n-me-free.com/facecare.html">Products</a>


Other than this i cannot see any issues with you menu.

[jefito]

That was a beautiful catch on your part! I've been staring and staring at that code until my eyes were crossed. That would definitely explain alot. The class="c2" is, I believe, a copy and paste error, something that got left in the mix and overlooked, which is what makes it such a great catch.

All that remains of the mystery so far is why the site suddenly changed its appearance in the last couple of days. I made the menu changes about a month ago. I have to go onto this site several times a day, and the scrambled menus would definitely draw my attention. Oh well, more to learn.

I'll try this container tip. I tried it on my own already, and came pretty close to what you have, I just forgot the margin setting. Thanks for everything!

[webshowcase]

No problems.
If you are using firefox as your browser download an addon called firebug. It will help you to quickly diagnose problems like these in future.

Glad you sorted it.
Cheers, Ed

[jefito]

Okay, well I finally fixed the problem with this page. It was in the "Products" drop down menu. It took a long, long time to find it, but I finally got it. The entire link ul had a problem with the <ul class="c1"> It didn't match the same parameter as on the style sheet.

[webshowcase]

Very good. If you learn't something the time spent is definitely worth it.
Did you get the firebug extension for firefox?