Level two and level three dropdown menu items not displaying correctly in MSIE 9; deprecated DOCTYPE

(This is a rephrasing, for clarity, of a previous question.)

Hi, experts. I've been looking at this problem for several days and could use some advice.

In MSIE 9, if you look at this page: http://www.ascassociation.org/eweb/dropdownsHTML.html

You will see the problem: the second and third level dropdown menu items are partially obscured. Specifically the link and visited states are obscured; the hover and active states are visible. When you mouse over the menu items, they display correctly. (LV is partially obscured; HA displays correctly.)

The problem is, of course, the DOCTYPE, which is HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

However, for complicated reasons, I cannot change that DOCTYPE.

What can I do to make the link and visited states of these menu items display correctly, in spite of the deprecated DOCTYPE?

I've been trying different CSS ideas using position:relative and various z-index values.

Thank you very much for your ideas. This problem has been frustrating me for several days.

Eric
CSS:



/* dropdown menu*/

/* 
	LEVEL ONE
*/

ul.dropdown    {
width:100%;
height:42px;
font:12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

ul.dropdown li {
float: left;
list-style-type:none;
zoom: 1;
}

ul.dropdown li.hover, ul.dropdown li:hover {
position:relative;
}


/* style LV for the top level */
ul.dropdown a:link, ul.dropdown a:visited {
display:block;
color:#333;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/silverNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
font-weight:bold;
border:none;
}


/* style HA for the top level */
ul.dropdown a:hover, ul.dropdown a:active {
display:block;
color:#fff;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/blueNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
border:none;
}

/* 
	LEVEL TWO
*/

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
background-image:none;
color:#333;
width:209px;
}

ul.dropdown ul li {
width: 199px;
background-color:#1f5a95;
background-image:none;
text-align:left;
float: none;
}

								  

/* style LV for the second level */
ul.dropdown ul li a:link, ul.dropdown ul li a:visited {
display:block !important;
color:#fff;
width:209px;
height:30px !important;
line-height:30px !important;
background-color: #103860 !important;
background-image:none !important;
border:none;
padding-left:10px;
font: 12px Arial, Helvetica, sans-serif;
}


/* style HA for the second level */
ul.dropdown ul li a:hover, ul.dropdown ul li a:active {
display:block;
color:#fff;
width:209px;
height:30px !important;
line-height:30px !important;
background-color: #1f5a95 !important;
background-image:none !important;
border:none;
padding-left:10px;
font: 12px Arial, Helvetica, sans-serif;
}


/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 160px; top: 0; }

/* style LV for the third level */
ul.dropdown ul ul li a:link, ul.dropdown ul ul li a:visited {
display:block;
color:#fff;
width:209px;
height:34px !important;
line-height:34px !important;
background-color: #103860 !important;
border:none;
padding-left:10px;
font: 12px Arial, Helvetica, sans-serif;
}


/* style HA for the third level */
ul.dropdown ul ul li a:hover, ul.dropdown ul ul li a:active {
display:block;
color:#fff;
width:209px;
height:34px !important;
line-height:34px !important;
background-color: #1f5a95 !important;
border:none;
padding-left:10px;
font: 12px Arial, Helvetica, sans-serif;
}

ul.sub_menu li	{
margin-top:-4px !important;
margin-left:-20px !important;
}


HTML:


<!-- begin dropdown menus-->

<script type="text/javascript" src="http://www.ascassociation.org/eweb/jquery-1.3.1.min.js"></script>	
	<script type="text/javascript" language="javascript" src="http://www.ascassociation.org/eweb/jquery.dropdownPlain.js"></script>

<ul class="dropdown">
	<li><a href="http://www.ascaconnect.org/Home/" style="width:70px; text-align:center;">Home</a></li>

	<li><a href="http://www.ascaconnect.org/AboutUs/Mission/" style="width:90px;text-align:center;">About Us</a>


<!--level 2-->
		<ul class="sub_menu">
  		  	<li><a href="http://www.ascaconnect.org/AboutUs/Mission/">Mission</a></li>
			<li><a href="http://www.ascaconnect.org/AboutUs/Governance/">Governance</a></li>
		    <li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/">What is an ASC?</a>
    
		    	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/AboutASCs/">About ASCs</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/History/">History</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/SurgicalCareStories/">Surgical Care Stories</a></li>
				</ul><!--/level 3-->

	    </li>


		    <li><a href="http://www.ascaconnect.org/AboutUs/PressRoom/">Press Room</a></li>
		    <li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/">Related Organizations</a>
    
	        	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AmbulatorySurgeryFoundation/">Ambulatory Surgery Foundation</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AdvancingSurgicalCareCampaign/">Advancing Surgical Care Campaign</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/ASCQualityCollaboration/">ASC Quality Collaboration</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/SafeInjectionPracticesCoalition/">Safe Injection Practices Coalition</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/StateAssociations/">State Associations</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AccreditationOrganizations/">Accreditation Organizations</a></li>
		</ul>
    
		    </li>    
		</ul>

		</li>


		<li><a href="http://www.ascaconnect.org/Membership/" style="width:110px;text-align:center;">Membership</a>


				<ul class="sub_menu"><!--level 2-->
				<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/">Member Types &amp; Benefits</a>
    
	        	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/FacilityMembership/">Facility Membership</a></li>
					<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/VendorMembership/">Vendor Membership</a></li>
				</ul>
    
    </li>
	<li><a href="http://www.ascaconnect.org/Membership/MemberServicesTeam/">Member Services Team</a></li>
   	<li><a href="http://www.ascaconnect.org/Directory/FindaMember/">Member Directory</a></li>
	<li><a href="http://www.ascaconnect.org/Membership/GetInvolved/">Get Involved</a></li>
	</ul>

</li>


<li><a href="http://www.ascaconnect.org/EducationEvents/" style="width:150px;text-align:center;">Education &amp; Events</a>

	<ul class="sub_menu"><!--level 2-->
	<li><a href="http://www.ascaconnect.org/EducationEvents/EventCalendar/">Event Calendar</a></li>
	<li><a href="http://www.ascaconnect.org/EducationEvents/AnnualMeeting/">Annual Meeting</a></li>
   	<li><a href="http://www.ascaconnect.org/EducationEvents/ContinuingEducation/">Continuing Education</a>
         <ul><!--level 3-->
	<li><a href="http://www.ascaconnect.org/EducationEvents/ContinuingEducation/CASC/">CASC</a></li>
		</ul>
    
    </li>
	<li><a href="http://www.ascaconnect.org/EducationEvents/CallforTopicsandSpeakers/">Call for Topics and Speakers</a></li>
    <li><a href="http://www.ascaconnect.org/EducationEvents/PastEvents/">Past Events</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/FederalRegulations/Overview/" style="width:150px;text-align:center;">Federal Regulations</a>

	<ul class="sub_menu"><!--level 2-->
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Overview/">Overview</a></li>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/">Medicare</a>
    
    
	<ul><!--level 3-->
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/ConditionsforCoverage/">Conditions for Coverage</a>
        
    </li>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/Payments/">Payments</a>    
    </li>
    
   	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/QualityReporting/">Quality Reporting</a></li>
	</ul>

    
    </li>
   	<li><a href="http://www.ascaconnect.org/FederalRegulations/HIPAA/">HIPAA</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/GovtAdvocacy/" style="width:170px;text-align:center;">Government Advocacy</a>

	<ul class="sub_menu"><!--level 2-->
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/GovernmentAffairsUpdate/">Government Affairs Update</a></li>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/">Legislation</a>
    
	<ul><!--level 3-->
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/ASCQualityAccessAct/">ASC Quality &amp; Access Act of 2011</a></li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/PolicyBriefs/">Policy Briefs</a></li>
	</ul>
    
    </li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/ASCPAC/">ASCPAC</a></li>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/">Take Action</a>
    
    <ul>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/SendLetterstoCongress/">Send Letters to Congress</a></li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/BecomeanASCChampion/">Become an ASC Champion</a></li>
	</ul></li>
    <li><a href="http://www.ascaconnect.org/GovtAdvocacy/Grassroots/">Grass Roots</a></li>
    <li><a href="http://www.ascaconnect.org/GovtAdvocacy/StateAdvocacyCenter/">State Advocacy Center</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/ResourceCenter/" style="width:130px; text-align:center;">Resource Center</a>

	<ul class="sub_menu"><!--level 2-->
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForPhysiciansOwners/">For Physicians/Owners</a></li>
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/">For Administrators/Operators</a>
    
    <ul>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/DeliveryofPatientCare/">Delivery of Patient Care</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/Quality/">Quality</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/Benchmarking/">Benchmarking</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/FinancialBusinessDevelopment/">Financial Business Development</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/HumanResources/">Human Resources</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/CareerCenter/">Career Center</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/VendorBusinessDirectory/">Vendor Business Directory</a></li>

	</ul>
    
    </li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForStateAssociations/">For State Associations</a>
    
    <ul>
  	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/StateAdvocacyCenter/">State Advocacy Center</a></li>
	</ul>
    
    </li>
    
    
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/">For Vendors</a>
    
    <ul class="sub_menu">
  	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/AdvertisingSponsorships/">Advertising &amp; Sponsorships</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/VendorBusinessDirectory/">Vendor Business Directory</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/CareerCenter/">Career Center</a></li>
	</ul>
    </li>
    
    
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForPatients/">For Patients</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/">Publications</a>
    
    <ul>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/ASCFocusMagazine/">ASC Focus Magazine</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/Bookstore/">Bookstore</a></li>
    <li><a href="http://www.ascaconnect.org/Directory/FindaMember/">Member Directory</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/VendorBusinessDirectory/">Vendor Business Directory</a></li>
	</ul>
    
    </li>
	</ul>



</li>

<li><a href="http://www.ascaconnect.org/asca/Home/" class="ascaconnectred" style="width:115px; text-align:center;">ASCA Connect</a></li>

</ul>



<!--/ dropdown menus-->

Open in new window

LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
as long as you are using an obsolete doc tyrpe you are going to have the errors in box rendering to deal with.  Your best approach is to use Javascript to adjust the styling after the load.



Cd&
0
COBOLdinosaurCommented:
The scripts HERE will help you detect IE.

Cd&
0
Eric BourlandAuthor Commented:
Cd&, thanks for this very helpful reply.

>>>Your best approach is to use Javascript to adjust the styling after the load.

Cool. I see how I can use the javascript you mentioned to detect MSIE.

>>>Your best approach is to use Javascript to adjust the styling after the load.

Hmm. I need a little more guidance, if you have time. I am not sure how exactly to apply the dropdown menu styles after the page loads. Do you mean, I need to apply a javascript that will fool MSIE 9 into thinking that the DOCYTPE is XHTML 1 transitional?

Thank you again for your help, COBOL.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
No I'm talking about modifying the style values.  Where the text is cutoff on the left you can fix it with padding-left.  With a little experimentation you can determine the number of pixels they need to be shifted of IE.

Unfortunately looking at the code most of the elements do not have either a class or id, so it is going to take a little work.

First you will need to create a class in the CSS for the padding and a non-padding version to find your targets:

.nopadding { }
.padding li {padding-left:20px} // apply padding to all li element inside a ul with class="padding"

Open in new window


Then all the ul tags for sub-menus with the problem need a class added like this <ul class="nopadding">

Now you are set up to do the scripting at page load time:

<script type="text/javascript"
function initMenu()
{
 // here you have your code to detect ie
if (IE)
{
   clsArr=document.getElementsByClassName('nopadding');
   for (i=0;i<clsArr.length; i++)
   {
      clsArr.className='padding';
   }
}

onload=initMenu;
</script>

Open in new window




Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
This makes sense. I will work on this andget back to you tomorrow. Thank you as always, Cd& . Hope you are well.
0
COBOLdinosaurCommented:
I'll be online all day so if you need any help with it just kick the thread.


Cd&
0
Eric BourlandAuthor Commented:
COBOLdinosaur,

Thanks again for a useful, well-articulated solution. It turns out that we figured out a way to add a Cross User Agent Compatibility Statement to the HEAD tag

<meta http-equiv="X-UA-Compatible" content="IE=9" />


... and this has resolved most of our problems. I have a new set of problems now =) ... but I am working through those (and migth ask another question in this forum).

I really appreciate your time.

Eric
0
COBOLdinosaurCommented:
Oh that is nice.  I guess it gets around the problem of the old doctype.

Glad to help anytime.



Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.