Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horz Drop Down Menu IE6 issue

    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:


    And, when opening the site in IE6, this is what you get:


    The CSS code for the menu:

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

    Code:
    @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):

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

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    /*Sub level menu list items*/
    .horizontalcssmenu ul li ul li{
    	display: inline;
    	float: left;
    }
    Code:
    /* 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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't quite work...I replaced the float: with clear: and most of the sub-sub level disappeared.

    This is how it should appear:

    And this is with the change:


    As you can see, only the last <li> in the sub-sub level appears. Thanks for trying Harbinger

  • #4
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed issue

    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.

    Code:
    #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;
    }
    Code:
    <div id="horizontalcssmenu">


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •