...
PDA

Horz Drop Down Menu IE6 issue

rsandersva
01-15-2008, 11:48 PM
Recent updates to my horizontal drop-down menu have result in IE6 mishandling the CSS. The CSS code works fine in FF, IE7 and Nav. I'm told that Safari is okay too.

This is what I intended the menu to look like:
http://www.fcps.edu/LangleyHS/images/website_ie7.jpg

And, when opening the site in IE6, this is what you get:
http://www.fcps.edu/LangleyHS/images/website_ie6.jpg

The CSS code for the menu:

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align:center;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 72px;
border-left-width: 0;
text-decoration: none;
color: black;
font: bold 10px Tahoma;
height:30px;
background-color: #7e6018;
padding: 2px 2px;
}

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0px;
top: 0px;
position: absolute;
display: block;
visibility: hidden;
z-index: auto;
border-top:1px solid #202020;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: left;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 90px; /*width of sub menu levels*/
display:block;
font-weight: normal;
border-width: 0 1px 1px 1px;
padding-top: 5px;
background-color: #d2a029;
padding-bottom: 5px;
}

/*Sub sub-level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top:0;
position: absolute;
left: 50px;
display: block;
visibility: hidden;
z-index: inherit;
border-top:1px solid #202020;
text-align:center;
}

/*Sub sub-level menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}


/* Sub sub-level menu links style */
.horizontalcssmenu ul li ul li ul li a{
width: 90px; /*width of sub menu levels*/
display:block;
font-weight: normal;
background: #fec232;
border-width:0 1px 1px 1px;
padding-bottom: 5px;
padding-top: 5px;
}

.horizontalcssmenu ul li a:hover{
background-color: #fad16f;
}

.horizontalcssmenu ul li ul li a:hover{
background-color: #fad16f;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */


This is the CSS for the page:

@charset "utf-8";
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #7e6018;
margin: 0px;
}

p {
line-height: 1.4em;
text-align: justify;
margin: 5px;
padding: 0px;
font-size: 13px;
}
hr {
font-size: 1px;
color: #000000;
width: 100%;
}
li {
font-size: 13px;
}
strong {
font-size: 12px;
font-weight: bold;
color: #222211;
}
strong a:link {
font-size: 12px;
font-weight: bold;
color: #222211;
text-decoration: none;
}
strong a:visited {
font-size: 12px;
font-weight: bold;
color: #222211;
text-decoration: none;
}
strong a:hover {
font-size: 12px;
font-weight: bold;
color: #99FFFF;
}
.fullHeight {
min-height: 1200px;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Century Schoolbook", Georgia, "Times New Roman", serif;
}
h1 {
font-size: 20px;
color: #f0f904;
}
h2 {
font-size: 18px;
color: #f0f904;
}
h3 {
font-size: 16px;
color: #f0f904;
}
h4 {
font-size: 14px;
color: #f0f904;
}
h5 {
font-size: 12px;
color: #f0f904;
}
h6 {
font-size: 10px;
color: #F0F904;
}

a:link {
color: #00ffff;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #fff200;
text-decoration: underline overline;
}
img {
padding: 0px;
}


.bottom {
font-size: 10px;
line-height: 2.0em;
color: #f0f904;
margin-bottom: 20px;
}
.alignleft {
text-align: left;
text-indent: 5px;
}

.indentLeft {
left: 5px;
}
.indentRight {
right: 5px;
}
.important {
font-size: 14px;
font-variant: small-caps;
color: #9e0b0f;
}
.boxBorder {
border: 1px solid #000000;
background-color: #CCCCCC;
}
.leftBorder {
background-image: url(images/new_graphics/border_left.gif);
background-repeat: repeat-y;
}
.rightBorder {
background-image: url(images/new_graphics/border_right.gif);
background-repeat: repeat-y;
}
.gold {
color: #FFFFFF;
background-color: #7e6018;
}
.green {
color: #FFFFFF;
background-color: #336633;
}
.blue {
color: #FFFFFF;
background-color: #000066;
}
.important a:link {
font-size: 14px;
font-variant: small-caps;
color: #FF3300;
font-weight: bold;
}
.important a:visited {
font-size: 14px;
font-variant: small-caps;
color: #FF3300;
font-weight: bold;
text-decoration: none;
}
.important a:hover {
font-size: 14px;
font-variant: small-caps;
color: #FF3300;
font-weight: bold;
text-decoration: underline;
}


The html from the index page (only the menu portion to save space):

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F9fc98">
<tr><td>
<table width="870" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td width="15px" class="leftBorder"></td>
<td width="840px">
<table width="840" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#7E6018">
<tr bgcolor="#7E6018"><td><img src="http://www.fcps.edu/LangleyHS/images/new_graphics/banner010208.jpg" alt="langley high school in mclean virginia" width="840" height="138" border="0" usemap="#Map" /></td></tr>
<tr bgcolor="#7e6018"><td><img src="http://www.fcps.edu/LangleyHS/images/new_graphics/address2.gif" alt="langley high school address" width="840" height="6" /></td></tr>
<tr bgcolor="#7E6018"><td height="30" align="center">
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li><a href="http://www.fcps.edu/LangleyHS/index.html">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="http://www.fcps.edu/LangleyHS/pdf/allyouwant.pdf" target="_blank">All You Want To Know Guide</a></li>
<li><a href="history.html">History</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
<li><a href="inthenews.html">In The News</a></li>
<li><a href="map_directions.html">Location &amp; Directions</a></li>
<li><a href="http://www.fcps.edu/suptapps/schoolprofile/profile.cfm?profile_id=020" target="_blank">Profile</a></li>
<li><a href="saxonscope.html">Saxon Scope</a></li>
<li><a href="pdf/school_plan.pdf" target="_blank">School Plan</a></li>
<li><a href="lhs_atoz.html">Site Map</a></li>
<li><a href="vision.html">Vision-Mission Core Values</a></li>
</ul>
</li>
<li><a href="#">Academics</a>
<ul>
<li><a href="approgram.html">AP Program</a></li>
<li><a href="courses.html">Course Offerings</a></li>
<li><a href="department.html">Department List</a></li>
<li><a href="hnsprogram.html">Honors Program</a></li>
<li><a href="onlineart.html">Online Art Gallery</a></li>
</ul>
</li>
<li><a href="#">Activities<br />&amp; Athletics</a>
<ul>
<li><a href="#">Activities</a>
<ul>
<li><a href="clubs.html">Clubs</a></li>
<li><a href="honorsoc.html">Honor Societies</a></li>
<li><a href="nhs.html">NHS</a></li>
<li><a href="sga.html">Student Government</a></li>
</ul>
</li>
<li><a href="#">Athletics</a>
<ul>
<li><a href="http://langleysports.org/" target="_blank">Athletics Home</a></li>
<li><a href="winter_sports_sched_0708.html">Athletic Events</a></li>
<li><a href="winter_athletic_directions.html">Directions to Events</a></li>
<li><a href="sport_coach.html">Sports &amp; Coaches</a></li>
<li><a href="pdf/physical.pdf" target="_blank">Physicals</a></li>
<li><a href="http://www.vhsl.org/" target="_blank">VHSL</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Calendars</a>
<ul>
<li><a href="http://www.actstudent.org/regist/currentdates.html" target="_blank">ACT Test</a></li>
<li><a href="winter_sports_sched_0708.html">Athletic Events</a></li>
<li><a href="http://www.fcps.edu/about/07-08cal.htm" target="_blank">FCPS Calendar</a></li>
<li><a href="gradecal.html">Grading</a></li>
<li><a href="http://www.collegeboard.com/student/testing/sat/calenfees.html" target="_blank">SAT Test</a></li>
<li><a href="pdf/testcalendar.pdf" target="_blank">Testing at LHS</a></li>
</ul>
</li>
<li><a href="#">Offices</a>
<ul>
<li><a href="#">Career Center</a>
<ul>
<li><a href="careercenter.html">About Us</a></li>
<li><a href="ccconline.html">Online Access</a></li>
</ul>
</li>
<li><a href="#">Library</a>
<ul>
<li><a href="http://libcat.fcps.edu/uhtbin/cgisirsi/x/0/0/57/49?user_id=020WEB" target="_blank">Catalog</a></li>
<li><a href="mla.html">MLA Format</a></li>
<li><a href="librarynew.html">New Additions</a></li>
<li><a href="libonline.html">Online Access</a></li>
<li><a href="libpolicies.html">Policies</a></li>
<li><a href="http://www.fairfaxcounty.gov/library/" target="_blank">Public Library</a></li>
</ul>
</li>
<li><a href="#">Student Services</a>
<ul>
<li><a href="studservstaff.html">Counselors &amp; Staff</a></li>
<li><a href="courses.html">Course Selections</a></li>
<li><a href="graduation.html">Graduation Requirements</a></li>
<li><a href="dsscontacts.html">Support Contacts</a></li>
<li><a href="http://www.fcps.edu/DIT/kam/docmgmt/forms/it9.pdf" target="_blank">Transcript Request</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Documents<br />&amp; Policies</a>
<ul>
<li><a href="#">Documents</a>
<ul>
<li><a href="bellschedule.html">Bell Schedules</a></li>
<li><a href="pdf/cap_steps_08.pdf" target="_blank">Capitol Steps- ANGP</a></li>
<li><a href="greengold0708.html">Green &amp; Gold Schedule</a></li>
<li><a href="mla.html">MLA Format</a></li>
<li><a href="pdf/school_plan.pdf" target="_blank">School Plan</a></li>
<li><a href="pdf/handbook.pdf" target="_blank">Student-Parent Handbook</a></li>
</ul>
</li>
<li><a href="#">Policies</a>
<ul>
<li><a href="attendance.html">Attendance Policy</a></li>
<li><a href="dress.html">Dress Code</a></li>
<li><a href="grading.html">Grading</a></li>
<li><a href="honorcode.html">Honor Code</a></li>
<li><a href="makeup.html">Make-Up Work</a></li>
<li><a href="http://www.fcps.k12.va.us/Directives/R2601.pdf" target="_blank">S R &amp; R</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Links</a>
<ul>
<li><a href="#">FCPS Links</a>
<ul>
<li><a href="http://www.fcps.edu/" target="_blank">FCPS.edu</a></li>
<li><a href="http://www.fcps.edu/search.htm" target="_blank">Search FCPS.edu</a></li>
<li><a href="http://www.fcps.edu/news/emerg.htm" target="_blank">FCPS Emrg Ann</a></li>
<li><a href="www.fcps.edu/Directives/index.htm" target="_blank">FCPS Directives</a></li>
<li><a href="https://fcps.medianext.com/langleyhs/start.html" target="_blank">Keep In Touch Emails</a></li>
</ul>
</li>
<li><a href="#">LHS Links</a>
<ul>
<li><a href="http://www.langleybands.com/" target="_blank">Band</a></li>
<li><a href="http://www.langleychorus.com/" target="_blank">Chorus</a></li>
<li><a href="http://www.langleydrama.com/" target="_blank">Drama</a></li>
<li><a href="http://www.langleyorchestra.org/default.aspx" target="_blank">Orchestra</a></li>
<li><a href="http://www.langleyptsa.org/" target="_blank">PTSA</a></li>
</ul>
</li>
<li><a href="#">Other Links</a>
<ul>
<li><a href="http://thecommunityofconcern.org/" target="_blank">Community of Concern</a></li>
<li><a href="http://www.determined2heal.org" target="_blank">Determined 2Heal.org</a></li>
<li><a href="http://www.safecommunitycoalition.net/" target="_blank">Safe Comm. Coalition</a></li>
<li><a href="http://www.gosap.state.va.us/preventioncomesfirst.htm" target="_blank">VA Substance Abuse Prev.</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Our Staff</a>
<ul>
<li><a href="admin1.html">Admin &amp; Support Staff</a></li>
<li><a href="departmentmaster.html">Faculty by Dept</a></li>
<li><a href="newstaff.html">New Staff</a></li>
<li><a href="staff.html">Staff List &amp; Email</a></li>
</ul>
</li>
<li><a href="#">Parents</a>
<ul>
<li><a href="http://www.langleyptsa.org/" target="_blank">PTSA Website</a></li>
<li><a href="attendance.html">Attendance Policy</a></li>
<li><a href="pdf/cap_steps_08.pdf" target="_blank">All Night Grad Party</a></li>
<li><a href="http://www.langleyptsa.org/Class-of-2008.aspx" target="_blank">Class of 2008</a></li>
<li><a href="http://www.langleyptsa.org/Class-of-2009.aspx" target="_blank">Class of 2009</a></li>
<li><a href="http://www.langleyptsa.org/Class-of-2010.aspx" target="_blank">Class of 2010</a></li>
<li><a href="http://www.langleyptsa.org/Class-of-2011.aspx" target="_blank">Class of 2011</a></li>
<li><a href="http://www.fcps.edu/parents.htm" target="_blank">FCPS Parent Resources</a></li>
<li><a href="pdf/parent_blackboard.pdf" target="_blank">Parent Blackboard</a></li>
<li><a href="ptsa_contact.html">PTSA Contacts</a></li>
<li><a href="ptsa_news.html">PTSA Newsletter</a></li>
<li><a href="http://www.safecommunitycoalition.net/" target="_blank">Safe Community Coalition</a></li>
<li><a href="pdf/handbook.pdf" target="_blank">Student-Parent Handbook</a></li>
</ul>
</li>
<li><a href="#">Students</a>
<ul>
<li><a href="http://www.langleyalumni.com/" target="_parent">Alumni</a></li>
<li><a href="attendance.html">Attendance Policy</a></li>
<li><a href="bellschedule.html">Bell Schedules</a></li>
<li><a href="dress.html">Dress Code</a></li>
<li><a href="grading.html">Grading</a></li>
<li><a href="http://www.fcps.edu/parents/print/hslunch01.pdf" target="_blank">Lunch Menu</a></li>
<li><a href="makeup.html">Make-Up Work</a></li>
<li><a href="mla.html">MLA Format</a></li>
<li><a href="onlineart.html">Online Art Gallery</a></li>
<li><a href="saxonscope.html">Saxon Scope</a></li>
<li><a href="sga.html">Student Government</a></li>
<li><a href="pdf/handbook.pdf" target="_blank">Student-Parent Handbook</a></li>
<li><a href="http://www.fcps.k12.va.us/Directives/R2601.pdf" target="_blank">S R &amp; R</a></li>
<li><a href="pdf/yearbook.pdf" target="_blank">Yearbook Info</a></li>
</ul>
</li>
</ul><br style="clear: left;" />
</div>
</td></tr>


I have validated the CSS and HTML. The website is http://www.fcps.edu/LangleyHS

Any clues as to what makes the menu go sideways?

Thanks.

Rob
harbingerOTV
01-16-2008, 02:56 PM
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: left;
}


/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }


all that is probably the culprit. the first one your telling the sublevel li's to float so they are. add tell them to clear: left and they should play along. the holly hack, coming after that rule might reset it though so you might want to move the hack rules up above the sub level rules.
rsandersva
01-17-2008, 12:12 PM
Didn't quite work...I replaced the float: with clear: and most of the sub-sub level disappeared.

This is how it should appear:
http://www.fcps.edu/LangleyHS/images/nochange.jpg
And this is with the change:
http://www.fcps.edu/LangleyHS/images/change1.jpg

As you can see, only the last <li> in the sub-sub level appears. Thanks for trying Harbinger
rsandersva
01-25-2008, 06:15 PM
Just in case anyone has experienced the same problem described in the original post...here's the fix-

There are two css files attached to the page- one that controls the menu and one that controls the page contents. The page content css appeared to be running all over the menu css. All contents of the menu css are listed as "class" items. A div is used on the page to apply the class and form the menu. The fix was to change from class to ID. Fixed.

#horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align:center;
}

/*Top level list items*/
#horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

<div id="horizontalcssmenu">

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum