Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > IE hiding drop down submenus

Reply
Thread Tools

IE hiding drop down submenus

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-06-2007
Shelly wrote:
> upwebadmin wrote:
>> I don't see the problem with what you have but all my menu navigation
>> needs are typically solved by Dynamic Drive.
>> http://www.dynamicdrive.com/dynamicindex1/indexb.html
>>
>> Good luck

>
> 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
>
>


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; }


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Shelly
Guest
Posts: n/a
 
      11-06-2007
Thank you. That did it!

Shelly

Jonathan N. Little wrote:
> Shelly wrote:
>> upwebadmin wrote:
>>> I don't see the problem with what you have but all my menu
>>> navigation needs are typically solved by Dynamic Drive.
>>> http://www.dynamicdrive.com/dynamicindex1/indexb.html
>>>
>>> Good luck

>>
>> 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
>>
>>

>
> 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; }



 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-06-2007
Shelly wrote:
> Thank you. That did it!


A bit of advice: when in doubt, don't use position: absolute. Let the
content flow whenever possible.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Bone Ur
Guest
Posts: n/a
 
      11-06-2007
Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007 17:58:14
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.
>>>
>>> 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.

>
> 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.


? 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

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.


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.

--
Bone Ur
Cavemen have formidable pheromones.
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-06-2007

"Shelly" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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>


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

--
Richard.


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-07-2007
In article <(E-Mail Removed)>,
"Shelly" <(E-Mail Removed)> wrote:

> 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.


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...

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
retrive preselected value in second drop down list from the first drop down list weiwei ASP .Net 0 01-05-2007 07:29 PM
Multiple select drop down poplulating sub drop down scott@dettcom.com Javascript 3 11-09-2006 07:50 PM
Auto Drop down a Drop Down List xxbmichae1@supergambler.com Javascript 5 11-23-2005 01:35 AM
New to .NET, can I have one drop down box control the data of another drop down box using a database? SirPoonga ASP .Net 2 01-07-2005 10:44 PM



Advertisments