I’m stuck in a battle with tables and layers.

I’m working on a website that required a drop-down menu and I included as a layer with visible/invisible settings. After having done so, I figured out that layers have to be absolute positioning and not relative, (maybe I’m wrong).

What I have as a body is a main table which contains all my content, graphics, etc., and the drop-down layers over it. The client would like the site to always be centered horizontally in the browser window, however with the drop-down layers, I can’t do that since they require absolute positioning, therefore requiring me to position everything flush Left. Is this wrong ?

How come I come across so many websites that have drop-downs, (not Flash), and stay linked or “snapped” to the menu item from which it drops down from ? What’s the trick ?

I even tried using the Dreamweaver Extension “Snap Layer” from Project Seven, but that was no help, and I also read some people have had problems with it.

So what’s the trick to having a drop-down menu visible & invisible for a navigation bar, no matter how wide or small your browser window ?

“try” this approach

http://css-tricks.com/simple-jquery-dropdowns/

Alright, so I have some of the “simple jquery” dropdown code now in place and I’ve gotten varied results with different browsers, (obviously).

For the most part, the way I put it together was have the entire body of content appear within a <div> tag with the “page-wrap” id that is shown in the jquery tutorial. Within that, I also have nested <div> tags for the menu buttons and also the visible/invisible hidden layers. I gave each of these their own specific “page-wrap” id and since the menu buttons are nested together with the drop-down hidden layers, they match position perfectly since they always follow each other no matter how large or small the browser window is.

Another important matter is that these drop-downs partially float over a flash intro that appears only on the index page.

In Safari, this looks great, except for the “long” extra vertical scroll available about twice the size of my body content. This apparently occurs due to the <div> tag being in place, though I don’t know which one is affecting it, nor how to remedy the situation since the buttons all appear to be working fine.

Firefox appears to have no problem whatsoever. The menus and hidden layers follow each other when you make the browser window larger and smaller and there’s no extra scroll or anything. Ideally, this is how I’d like it to function in every browser.

With Opera, on my main desktop it’s apparently crashing the browser while loading the page. That could maybe be the Flash .swf, but I’m not certain. On my laptop, it works a little better but what happens with the layers is while mousing over the drop-down menu, the areas that float over the .swf file tend to have the background color of the layer disappear. I would love to be able to fix this, of course.

Internet Explorer is a whole different story. For starters, I’m on a mac, so I’m testing it in IE 5.04. Unfortunately Microsoft hasn’t updated IE for the mac side in a LONG time. Since installing it, I needed to install the Flash Player in order to view my intro, however going to the Adobe site to acquire the plug-in, one of the “Continue” buttons is done with Flash so since I don’t already have it, (but trying to get it ironically), clicking on it doesn’t do anything.

At least testing it in IE without Flash, I get a vertical as well as a horizontal scroll about double the size of my body content. In addition, my menu buttons don’t even appear. This part is a huge headache because even though I’m on a mac and having problems with this, chances are there will be more users viewing this site with IE on a PC.

I feel like I’m really close with the exception of how it’s functioning in Opera and IE. No vertical scroll on Safari would be nice, too.

I’m including the files on my web server so that they can be viewed as well as downloaded and tested. I appreciate any help or direction I can get.

Download here:
http://www.ghcreativemedia.com/dropBox/site_090209.zip

View in browser here:

http://www.ghcreativemedia.com/testFiles/site_090209/

Thanks.

herman428 - 08 September 2009 02:12 AM

Alright, so I have some of the “simple jquery” dropdown code now in place and I’ve gotten varied results with different browsers, (obviously).

For the most part, the way I put it together was have the entire body of content appear within a <div> tag with the “page-wrap” id that is shown in the jquery tutorial. Within that, I also have nested <div> tags for the menu buttons and also the visible/invisible hidden layers. I gave each of these their own specific “page-wrap” id and since the menu buttons are nested together with the drop-down hidden layers, they match position perfectly since they always follow each other no matter how large or small the browser window is.

Another important matter is that these drop-downs partially float over a flash intro that appears only on the index page.

In Safari, this looks great, except for the “long” extra vertical scroll available about twice the size of my body content. This apparently occurs due to the <div> tag being in place, though I don’t know which one is affecting it, nor how to remedy the situation since the buttons all appear to be working fine.

Firefox appears to have no problem whatsoever. The menus and hidden layers follow each other when you make the browser window larger and smaller and there’s no extra scroll or anything. Ideally, this is how I’d like it to function in every browser.

With Opera, on my main desktop it’s apparently crashing the browser while loading the page. That could maybe be the Flash .swf, but I’m not certain. On my laptop, it works a little better but what happens with the layers is while mousing over the drop-down menu, the areas that float over the .swf file tend to have the background color of the layer disappear. I would love to be able to fix this, of course.

Internet Explorer is a whole different story. For starters, I’m on a mac, so I’m testing it in IE 5.04. Unfortunately Microsoft hasn’t updated IE for the mac side in a LONG time. Since installing it, I needed to install the Flash Player in order to view my intro, however going to the Adobe site to acquire the plug-in, one of the “Continue” buttons is done with Flash so since I don’t already have it, (but trying to get it ironically), clicking on it doesn’t do anything.

At least testing it in IE without Flash, I get a vertical as well as a horizontal scroll about double the size of my body content. In addition, my menu buttons don’t even appear. This part is a huge headache because even though I’m on a mac and having problems with this, chances are there will be more users viewing this site with IE on a PC.

I feel like I’m really close with the exception of how it’s functioning in Opera and IE. No vertical scroll on Safari would be nice, too.

I’m including the files on my web server so that they can be viewed as well as downloaded and tested. I appreciate any help or direction I can get.

Download here:
http://www.ghcreativemedia.com/dropBox/site_090209.zip

View in browser here:

http://www.ghcreativemedia.com/testFiles/site_090209/

Thanks.

Hi there, my name is Colon Cleanse.I believe its Very true.There is nothing more annoying than unsolicited advice. If a person isn’t asking you for help or advice, it’s none of your business to intrude. I totally agree with you.Reverse Phone Lookup
Reverse Phone Lookup
Reverse Phone Lookup

I belive its Very true. There is nothing more annoying than unsolicited advice. If a person isn’t asking you for help or advice, it’s none of your business to intrude.I totally agree with you.
———————————————
Reverse Phone Lookup

Thank you i had the same problem and this worked for me.

Internet Monitoring Software

i m a new web designer but know something about the css. i ask to any body give me tips about the fonts and color coding in css….

Lean Muscle X

Lean Muscle X

I agree with RyanB, definatly take a look into jquery.
——————————————
Farmville Secrets

Well even I get stuck with this layer concept…seems like a toughest task when it comes to implemeting layers…  Acai Berry
Acai Berry

The actually css tricks websites helps a lot anytime you need a quick reference. I would suggest using that as a guide as there is a lot of useful info on there. Also as strongs12 mentioned optimizing your website for IE is never a fun task. I always seem to have the toughest problem with IE7 for some reason(can never get it to look correct).

Internet Explorer is a whole different story. For starters, I’m on a mac, so I’m testing it in IE 5.04. Unfortunately Microsoft hasn’t updated IE for the mac side in a LONG time. Since installing it, I needed to install the Flash Player in order to view my intro, however going to the Adobe site to acquire the plug-in, one of the “Continue” buttons is done with Flash so since I don’t already have it, (but trying to get it ironically), clicking on it doesn’t do anything. At least testing it in IE without Flash, I get a vertical as well as a horizontal scroll about double the size of my body content. In addition, my menu buttons don’t even appear. This part is a huge headache because even though I’m on a mac and having problems with this, chances are there will be more users viewing this site with IE on a PC.
_________________________
Best Dating Services
diversity job

Seems like a huge problem. http://www.avalonseniorcareinc.com

ryanb - 15 July 2009 04:21 AM

“try” this approach

http://css-tricks.com/simple-jquery-dropdowns/

You saved my day ryanb. Thanks!

1) You can set the mouseover event to -> display = none on the list box ..
so when the mouse comes over the list box it disappears
or
2) define a div and describe its attributes as such in js so it is compatible
with what ur doing.
or
3) try giving it spanning. (might work!)
or
4) define two divs assigned to 1) your dragable object 2) to ur list box
so that when it comes over the box it over rides / ignores it.