IE hiding drop down submenus

S

Shelly

In IE (7) the drop down submenus are hiding behind the element below it.
They work fine in Firefox and Opera. I researched this issue on the web and
found suggestions to state position and z-index in the css file. I already
had position: relavive and a z-index set as high as 500. I changed to
position: absolute, but that didn't help.

Here are the important parts of the css file and style in the hope that
someone can see something. The submenu is class item2 and the next element
is item-03. I've include snippets of code, css and in-line style.

menu code snippet:
==============
<td>
<a class="item1" href="javascript:void(0);">Top-level Item</a>
<div class="section">
<a class="item2" href="#"> Sub-level Item 1</a>

<a class="item2" href="#"> Sub-level Item 2</a>
</div>
</td>

inline snippet:
==========
#index-03 {
position:absolute;
left:0px;
top:134px;
width:750px;
height:436px;
background-image: url(images/index_03.gif);
border-right: 2px solid #7C6736;
z-index:100
}



css snippet:
========
..ddmx .item2,
..ddmx .item2:hover,
..ddmx .item2-active,
..ddmx .item2-active:hover {
padding: 3px 0px 4px 0px;
color: #FFFFFF;
text-decoration: none;
text-indent:5px;
width:179px;
display: block;
white-space: nowrap;
position: relative;
z-index: 500;
}

..ddmx .item2 {
background: #A7A4C1;
}

..ddmx .item2:hover,
..ddmx .item2-active,
..ddmx .item2-active:hover {
background: #414162;
}

..ddmx .arrow,
..ddmx .arrow:hover {
padding: 3px 16px 4px 8px;
}

..ddmx .item2 img,
..ddmx .item2-active img{
position: absolute;
top: 4px;
right: 1px;
border: 0;
}

..ddmx .section {
border: 1px solid #A7A4C1;
position: absolute;
visibility: hidden;
z-index: -1;
}

* html .ddmx td { position: relative; } /* ie 5.0 fix */
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007 13:44:51
GMT Shelly scribed:
In IE (7) the drop down submenus are hiding behind the element below
it. They work fine in Firefox and Opera. I researched this issue on
the web and found suggestions to state position and z-index in the css
file. I already had position: relavive and a z-index set as high as
500. I changed to position: absolute, but that didn't help.

Here are the important parts of the css file and style in the hope
that someone can see something.
Click to expand...

I see that you didn't post a url but instead posted these useless snippets
which I shall forebearingly snip in the interests of posterity.
 
S

Shelly

Bone said:
Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007
13:44:51 GMT Shelly scribed:


I see that you didn't post a url but instead posted these useless
snippets which I shall forebearingly snip in the interests of
posterity.
Click to expand...

OK, Cheeky, I have participated in news groups before and given plenty of
help to people in the past so I am no newcomer to this type of thing. The
protocol in the various newsgroups has always been to eliminate a direct
reference to a particular site in the interest of protecting the client.
That is why I didn't post the URL. Maybe it is different in THIS newsgroup,
but I would be surprised if it is.

That said, I posted the other than "useless" snippets. They pertain
directly to the suggestions for a fix that I found on the net. I posted
them because they already include those suggestions (high z-order, including
a position attribute). I had hoped that someone with some other than snide
complaining might be able to see something or suggest something. Meanwhile,
you needn't "bust mah britches".

If it is absolutely necessary to post a URL, I will go through the tedious
labor of porting the stuff to a different site, blacking out client content,
and then posting that URL.

Shelly
 
S

Shelly

B

Beauregard T. Shagnasty

Shelly said:
OK, I have proted it. The URL to look at is
www.sheldonlg.com/test.html
Click to expand...

Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
your visitors, plus the Googlebot, who won't be able to navigate your
site. Are you sure you want that? It's like turning off your web server
for a month every year.
In Internet explorer, the drop down falls behind the text whereas in
Firefox amd Opera it covers the text.
Click to expand...

You should add a proper DOCTYPE to take IE out of Quirks Mode first,
then see what it does.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Remove those HTML comment markers from your styles.
No need for that Netscape 4 DreamWeaver script to reload the page. NN 4
is used so seldom these days as to warrant not even considering it.

There are other errors.
<http://validator.w3.org/check?verbose=1&uri=http://www.sheldonlg.com/test.html>
<http://jigsaw.w3.org/css-validator/...ning=2&uri=http://www.sheldonlg.com/test.html>

You say: .ddmx { font: 12px tahoma; ...
Read this, please: http://k75s.home.att.net/fontsize.html
 
S

Shelly

Beauregard said:
Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
your visitors, plus the Googlebot, who won't be able to navigate your
site. Are you sure you want that? It's like turning off your web
server for a month every year.
Click to expand...

This is a customer requirement. 'Nuff said. Do you know of another way to
have dropdown menus WITHOUT Javascript? I'm open to suggestions, but
dropdowns are a must.
You should add a proper DOCTYPE to take IE out of Quirks Mode first,
then see what it does.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Click to expand...

I'll do this.
Remove those HTML comment markers from your styles.
No need for that Netscape 4 DreamWeaver script to reload the page. NN
4 is used so seldom these days as to warrant not even considering it.
OK.


There are other errors.
<http://validator.w3.org/check?verbose=1&uri=http://www.sheldonlg.com/test.html>
<http://jigsaw.w3.org/css-validator/...ning=2&uri=http://www.sheldonlg.com/test.html>

You say: .ddmx { font: 12px tahoma; ...
Read this, please: http://k75s.home.att.net/fontsize.html
Click to expand...

Thanks. I'll report back.
 
S

Shelly

Beauregard said:
Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
your visitors, plus the Googlebot, who won't be able to navigate your
site. Are you sure you want that? It's like turning off your web
server for a month every year.


You should add a proper DOCTYPE to take IE out of Quirks Mode first,
then see what it does.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Remove those HTML comment markers from your styles.
No need for that Netscape 4 DreamWeaver script to reload the page. NN
4 is used so seldom these days as to warrant not even considering it.

There are other errors.
<http://validator.w3.org/check?verbose=1&uri=http://www.sheldonlg.com/test.html>
<http://jigsaw.w3.org/css-validator/...ning=2&uri=http://www.sheldonlg.com/test.html>

You say: .ddmx { font: 12px tahoma; ...
Read this, please: http://k75s.home.att.net/fontsize.html
Click to expand...

I fixed all those errors and it still has the problem
(www.sheldonlg.com/test.html)/ As for fixed pixel size, I agree, but that
is not what I am trying to fix here first.

Shelly
 
B

Beauregard T. Shagnasty

Shelly said:
This is a customer requirement. 'Nuff said. Do you know of another way to
have dropdown menus WITHOUT Javascript? I'm open to suggestions, but
dropdowns are a must.
Click to expand...

A must? Oh pshaw. I think they are quite annoying, as they flash about
as I move the mouse from, say, scrollbar to Back button. I guess your
customer is more interested in the glitz. :-(

A few seconds at Google turns up these, and there are lots more:

http://www.alistapart.com/articles/horizdropdowns
http://www.cssplay.co.uk/menus/final_drop.html
http://meyerweb.com/eric/css/edge/menus/demo.html
http://www.seoconsultants.com/css/menus/tutorial/
http://www.opencube.com/

Now, I have not tried any of these, because I have always been able to
talk my clients out of using them. Usually by taking them to a site like
http://mlb.com or
http://www.accuweather.com/
and waving the mouse around a bit.

They are also very difficult to use for anyone with motor deficiencies,
or blind users, or people with text-only browsers, etc etc. Hopefully,
no visitors who operate their computers by using a pencil in their mouth
will visit your site. :-/
 
J

Jonathan N. Little

Shelly said:
If you click on "Services" the drop down menu falls behind "Test that is for
testing". In Firefox and Opera it covers that text. I am using IE 7.0.

When there is more text, it will completely hide the drop down menu. Again,
the url is www.sheldonlg.com/test.html
Click to expand...

Firstly, your using way to many absolutely positioned blocks. You layout
is very brittle, seems to relate to an argument in another recent thread.

Anyway for what it's worth:

1) Remove all references to "z-index" in your stylesheet
2) Remove absolute positioning on your "hidden" DIV

From:
#index-01 {
position:absolute;
left:0px;
top:0px;
width:750px;
height:101px;
border-right: 2px solid #7C6736;
}

#index-03 {
position:absolute;
left:0px;
top:134px;
width:750px;
height:436px;
border-right: 2px solid #7C6736;
}

#index-06 {
position:absolute;
left:0px;
top:101px;
width:750px;
height:33px;
border-right: 2px solid #7C6736;
}

To:
#index-01, #index-03, #index-06 {
margin: 0;
width:750px;
border-right: 2px solid #7C6736;
}
#index-01 { height:101px; }
#index-03 { height:436px; }
#index-06 { height:33px; }
 
S

Shelly

Thank you. That did it!

Shelly
Firstly, your using way to many absolutely positioned blocks. You
layout is very brittle, seems to relate to an argument in another
recent thread.
Anyway for what it's worth:

1) Remove all references to "z-index" in your stylesheet
2) Remove absolute positioning on your "hidden" DIV

From:
#index-01 {
position:absolute;
left:0px;
top:0px;
width:750px;
height:101px;
border-right: 2px solid #7C6736;
}

#index-03 {
position:absolute;
left:0px;
top:134px;
width:750px;
height:436px;
border-right: 2px solid #7C6736;
}

#index-06 {
position:absolute;
left:0px;
top:101px;
width:750px;
height:33px;
border-right: 2px solid #7C6736;
}

To:
#index-01, #index-03, #index-06 {
margin: 0;
width:750px;
border-right: 2px solid #7C6736;
}
#index-01 { height:101px; }
#index-03 { height:436px; }
#index-06 { height:33px; }
Click to expand...
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007 17:58:14
GMT Shelly scribed:
OK, I have proted it. The URL to look at is
www.sheldonlg.com/test.html

In Internet explorer, the drop down falls behind the text whereas in
Firefox amd Opera it covers the text.
Click to expand...

? I don't see it...

I even looked further in this thread, reading:
If you click on "Services" the drop down menu falls behind "Test that
Click to expand...
is > for testing". In Firefox and Opera it covers that text. I am using
IE
7.0.

When there is more text, it will completely hide the drop down menu.
Click to expand...

In both ie6 and 7 on my box the dropdown is in front of the text (-as in
opera and ff.) However, it appears not when i "click" on "Services" but
when I hover over it, and clicking on it has no effect.

However, I know you've made some changes since first-post.
 
R

rf

Shelly said:
In IE (7) the drop down submenus are hiding behind the element below it.
They work fine in Firefox and Opera. I researched this issue on the web
and found suggestions to state position and z-index in the css file. I
already had position: relavive and a z-index set as high as 500. I
changed to position: absolute, but that didn't help.

Here are the important parts of the css file and style in the hope that
someone can see something. The submenu is class item2 and the next
element is item-03. I've include snippets of code, css and in-line style.

menu code snippet:
==============
<td>
<a class="item1" href="javascript:void(0);">Top-level Item</a>
<div class="section">
<a class="item2" href="#"> Sub-level Item 1</a>

<a class="item2" href="#"> Sub-level Item 2</a>
</div>
</td>
Click to expand...

Apply the z-index to the container as well as the drop down menu. In this
case it would be the <td>.

This has solved this particular problem the last three times somebody raised
it here :)
 
D

dorayme

"Shelly said:
If it is absolutely necessary to post a URL, I will go through the tedious
labor of porting the stuff to a different site, blacking out client content,
and then posting that URL.
Click to expand...

My sympathies. I think different people here have different
reactions to quoting lots of code. Perhaps if you really find it
hard to isolate the trouble a bit and just post that bit as a url
on say a free server or your own, then a short explanation of
your difficulties might soften hard hearts...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Interfering CSS 1
Z-Index/Drop-down menu issues 2
How to position the *tooltip* comment on these buttons? 9
Help with my responsive home page 2
Neopets coding help 4
How can I get my menu inside of a menu to function properly? 1
I need help fixing my website 2

Members online

Total: 30 (members: 1, guests: 29)
Robots: 505

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top