miles444
asked on
Horizontal Drop Down Menu bar not working correctly in Internet Explorer
I need a horizontal drop down menu to work on our school's website. The CSS and HTML are attached. There are two problems
1) On IE 7, I can not get the menu bar to center on the screen. It always stays to the left.
2) On IE 8, it centers, but then each main heading floats to the right a few pixels. I've attached a picture of this messed up thing.
sure hope you can help me with this. If so, I will remain a subscriber to your group. If not, I'm outta here.
1) On IE 7, I can not get the menu bar to center on the screen. It always stays to the left.
2) On IE 8, it centers, but then each main heading floats to the right a few pixels. I've attached a picture of this messed up thing.
sure hope you can help me with this. If so, I will remain a subscriber to your group. If not, I'm outta here.
#menu {
width: 100%;
background: #c16100;
float: left;
margin:0 auto;
}
#menu ul {
list-style: none;
margin: 0;
padding: 1;
width: 9em;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #000;
background: #ccc;
text-transform: uppercase;
text-align: center;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
HERE'S THE HTML
<div id="menu">
<ul>
<li>
<h2>Parents</h2>
<ul>
<li><a href="file:///C|/Sites/link1.html">Sugar Hill Parent/Student Handbook</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/gcps-mainweb01.nsf/6E13B53355EF364A8525760100710D80/$file/2009-10_K-3_Student_Parent_Handbook.pdf">GCPS
Parent/Student Handbook K-3</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/gcps-mainweb01.nsf/A2E3C801F82CD2F085257601007119BC/$file/2009-10_4-12_Student_Parent_Handbook.pdf">GCPS
Parent/Student Handbook 4-12</a></li>
<li><a href="SCHOOL_COUNCIL.html">School Council</a></li>
<li><a href="https://go2.gwinnett.k12.ga.us/parent/wps/portal">Parent
Portal</a></li>
<li><a href="file:///C|/Sites/link5.html">Parent Visitation Policy</a></li>
<li><a href="file:///C|/Sites/link6.html">Counselors Corner</a></li>
<li><a href="MEDIA.html">Media Center</a></li>
<li><a href="daycare.html">Daycare Providers</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/gcps-instruction01.nsf/pages/PromotionandGraduationRequirements">Promotion
Criteria</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/gcps-mainweb01.nsf/78940A76A22C4D458525764D004E9DAA/$file/2009-10_Student-testing_calendar_REVISED_1-11-10.pdf">Testing
Calendar</a></li>
<li><a href="REG_INFO.html">Registration Information</a></li>
<li><a href="https://www.k12studentinsurance.com/">Student Insurance</a></li>
<li><a href="http://www.northgwinnettschoolsfoundation.org/index.htm">North
Gwinnett Foundation</a></li>
<li><a href="SUPPLY_LISTS.html">School Supply Lists</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>STUDENTS</h2>
<ul>
<li><a href="a">Sugar Hill Parent/Student Handbook</a></li>
<li><a href="http://www.patrickelementary.org/2009-10%20K-3%20Student%20Parent%20Handbook_FINAL.pdf">GCPS
Parent/Student Handbook K-3</a></li>
<li><a href="http://www.patrickelementary.org/2009-10%204-12%20Studen%20Parent%20Handbook_FINAL.pdf">GCPS
Parent/Student Handbook 4-12</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/aks.nsf?OpenDatabase&0-&s-mainweb01.nsf">GCPS
AKS</a></li>
<li><a href="file:///C|/Sites/link17.html">Longhorn Links</a></li>
<li><a href="file:///C|/Sites/link18.html">Clubs & Activities</a></li>
<li><a href="http://sme.gwinnett.k12.ga.us/">SuccessMaker</a></li>
<li><a href="https://www.georgiaoas.org/servlet/a2l">CRCT Online</a></li>
<li><a href="online_books.html">Online Textbooks</a></li>
<li><a href="file:///C|/Sites/link21.html">School Store</a></li>
<li><a href="file:///C|/Sites/link22.html">Ice Cream Sales</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>FACULTY/STAFF</h2>
<ul>
<li><a href="admin.html">Administration</a></li>
<li><a href="file:///C|/Sites/link25.html">Counselors</a></li>
<li><a href="kindergarten.html">Kindergarten</a></li>
<li><a href="1st_grade.html">First Grade</a></li>
<li><a href="2nd_grade.html">Second Grade</a></li>
<li><a href="3rd_grade.html">Third Grade</a></li>
<li><a href="4th_grade.html">Fourth Grade</a></li>
<li><a href="5th_grade.html">Fifth Grade</a></li>
<li><a href="special_education.html">Special Education</a></li>
<li><a href="special_areas.html">Special Areas</a></li>
<li><a href="technology.html">Technology</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="support_staff.html">Support Staff</a></li>
<li><a href="office_staff.html">Office Staff</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>TEACHER LINKS</h2>
<ul>
<li><a href="file:///C|/Sites/link37.html">Sugar Hill Leave Form</a></li>
<li><a href="https://go.gwinnett.k12.ga.us/app/wps/portal">Go Gwinnett</a></li>
<li><a href="https://go.gwinnett.k12.ga.us/app/wps/portal">GCPS Elements</a></li>
<li><a href="http://streaming.discoveryeducation.com/">Discovery Education</a></li>
<li><a href="http://www.gwinnettonlinecampus.com/">Gwinnett Online Campus</a></li>
<li><a href="http://www.gwinnettk12online.net/ec/crs/default.learn?CourseID=3039050&CPURL=www.gwinnettk12online.net&Survey=1&47=4001211&ClientNodeID=404494&coursenav=0&bhcp=1">2000-2004
Exemplars</a></li>
<li><a href="http://www.gwinnettk12online.net/ec/crs/default.learn?CourseID=3039050&CPURL=www.gwinnettk12online.net&Survey=1&47=4001211&ClientNodeID=404494&coursenav=0&bhcp=1">Kindergarten
Exemplars</a></li>
<li><a href="http://gwinnettk12online.net/ec/Courses/31133/CRS-OTHR-3039050/diff_math/start_here.html">Differentiated
Best of Math Exemplars I</a></li>
<li><a href="http://gwinnettk12online.net/ec/Courses/31133/CRS-OTHR-3039050/start_here.html">Differentiated
Best of Math Exemplars II</a></li>
<li><a href="http://gwinnettk12online.net/ec/Courses/31133/CRS-OTHR-3039050/diff_math_3/start_here.html">Best
of Math Exemplars II</a></li>
<li><a href="http://www.gwinnettk12online.net/ec/crs/default.learn?CourseID=3039050&CPURL=www.gwinnettk12online.net&Survey=1&47=4001211&ClientNodeID=404494&coursenav=0&bhcp=1">Gwinnett
Math Online Resource (MOCC)</a></li>
<li><a href="http://www.gwinnettk12online.net/ec/crs/default.learn?CourseID=3039050&CPURL=www.gwinnettk12online.net&Survey=1&47=4001211&ClientNodeID=404494&coursenav=0&bhcp=1">Big
20</a></li>
<li><a href="LA_ACCESS.html">Directions for Accessing LA Online Resource</a></li>
<li><a href="http://www.gwinnett.k12.ga.us/LanguageartsES.nsf">Gwinnett
LA Online Resource</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>SCHOOL CALENDAR</h2>
<ul>
<li><a href="file:///C|/Sites/link52.html">August</a></li>
<li><a href="file:///C|/Sites/link53.html">September</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>NEWSLETTER</h2>
<ul>
<li><a href="file:///C|/Sites/link54.html">August</a></li>
<li><a href="file:///C|/Sites/link55.html">September</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>CAFETERIA</h2>
<ul>
<li><a href="https://www14.mealpayplus.com/default.aspx">Meal Pay</a></li>
<li><a href="file:///C|/Sites/link57.html">Lunch Menu</a></li>
<li><a href="file:///C|/Sites/link58.html">Breakfast Menu</a></li>
<li><a href="file:///C|/Sites/link59.html">Nutrition Facts</a></li>
<li><a href="file:///C|/Sites/link60.html">Nutrition Nuggets</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<h2>PHOTO GALLERY</h2>
<ul>
<li></li>
</ul>
</li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
no reason
http://www.cssplay.co.uk/menus/skeleton.html
Also, make sure your CSS & HTML is valid for your Doctype! If there are problems with the overall or containing layout, there will likely be inherited issues into your dropdown menu.