Hi,
The list items in the footer of this site:
Look fine in IE8+, but in IE7 they have weird alignment (see attached). Is there some IE7-specific bug that is causing this?
Thx,
Ben
Hi,
I don’t have access to IE6/7 at the moment but the first thing I would try is hasLayout.
#footer ul li {
margin: 0 0 5px;
padding: 0;
[B]zoom: 1;[/B]
}
If that doesn’t fix it I would trying float to fix.
[B]#footer ul { width: 100%; overflow: hidden }[/B]
#footer ul li {
margin: 0 0 5px;
padding: 0;
width: 100%;
[B]float: left;[/B]
}
All the best,
Switching #footer .col ul from the shorthand list-style property list-style: none outside none; to list-style-position: outside; fixes it, in the IE Developer Tools at least.
The rule is in the stcroix-layout.css stylesheet.
Seems IE7 isn’t biting on the shorthand for some reason. As the shorthand property is declared elsewhere on #footer ul, switching the property shouldn’t create problems in other browsers.
#footer .col ul {
list-style-position: outside; /* changed */
margin: 0 0 5px;
padding: 0;
}
I copied and pasted your #footer html and applied the following css and it looks fine in my IE7.
I haven’t played with the font-sizes etc, but the lists all line up.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
[COLOR=#006400]<style type="text/css">
.col {
width: 16%;
float: left;
}
#footer ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer ul li {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}
</style>[/COLOR]
</head>
<body>
<div id="footer">
<div class="col">
<ul>
<li><a href="/">Home</a></li>
</ul>
<h2>Social Media</h2>
<ul>
<li><a href="http://www.facebook.com/#!/SCRMC">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="http://youtube.com/stcroixregional">YouTube</a></li>
<li><a href="http://www.smallhospitalbigheart.blogspot.com/">Blogger</a></li>
</ul>
<ul>
<li><a href="/sitemap">Site Map</a></li>
</ul>
</div>
<div class="col">
<h2>About SCRMC</h2>
<ul>
<li><a href="http://scrmc.iapplicants.com/" target="_blank">Career Opportunities</a></li>
<li><a href="http://scrmc.iapplicants.com/" target="_blank">Physician Opportunities</a></li>
<li><a href="http://www.scrmc.org/about/history">History</a></li>
<li><a href="http://www.scrmc.org/about/hours-and-locations">Hours and Locations</a></li>
<li><a href="http://www.scrmc.org/about/legal-notices">Legal Notices</a></li>
<li><a href="http://www.scrmc.org/about/make-a-gift">Make a Gift</a></li>
<li><a href="http://www.scrmc.org/about/mission-vision-values">Mission and Values</a></li>
<li><a href="http://www.scrmc.org/about/volunteer-partners">Volunteer Partners</a></li>
</ul>
</div>
<div class="col">
<h2>Medical Services</h2>
<ul>
<li><a href="/providers">Providers</a></li>
<li><a href="http://www.scrmc.org/medical-services/patient-services">Patient Services</a></li>
<li><a href="http://www.scrmc.org/medical-services/pharmacy">Pharmacy</a></li>
<li><a href="http://www.scrmc.org/medical-services/quality">Quality, Customer Service, and Outcomes</a></li>
</ul>
</div>
<div class="col">
<h2>The BirthPlace</h2>
<ul>
<li><a href="http://www.scrmc.org/the-birth-place/birthing-options">Birthing Options</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/classes-and-support-groups">Classes and Support Groups</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/experienced-obstetric-nurses">Experienced OB Nurses</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/infertility-concerns">Infertility Concerns</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/kind-words">Kind Words</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/lactation-services">Lactation Services</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/midwife-services">Midwife Services</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/obstetrics-providers">Obstetrics Providers</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/photo-tour">Photo Tour</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/special-services">Special Services</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/the-birthplace">The BirthPlace</a></li>
<li><a href="http://www.scrmc.org/the-birth-place/web-nursery">Web Nursery</a></li>
</ul>
</div>
<div class="col">
<h2>Patients and Visitors</h2>
<ul>
<li><a href="http://www.scrmc.org/patients-and-visitors/community-links">Community Links</a></li>
<li><a href="http://www.scrmc.org/patients-and-visitors/contact-us">Contact Us</a></li>
<li><a href="http://www.scrmc.org/patients-and-visitors/patient-visitor-guide">Information Guide</a></li>
<li><a href="http://www.scrmc.org/patients-and-visitors/make-an-appointment">Make an Appointment</a></li>
<li><a href="http://www.scrmc.org/patients-and-visitors/pay-your-bill">Pay Your Bill</a></li>
<li><a href="http://www.scrmc.org/patients-and-visitors/release-of-information">Release of Information</a></li>
</ul>
<h2>Education</h2>
<ul>
<li><a href="http://www.scrmc.org/education/conference-center">Conference Center</a></li>
<li><a href="http://www.scrmc.org/education/health-links">Health Links</a></li>
</ul>
</div>
<div class="col">
<h2>Recent News</h2>
<ul>
<li><a href="http://www.scrmc.org/about/news-item/scrmc-welcomes-rebecca-gray-nurse-midwife-and-family-nurse-practitioner">SCRMC Welcomes Rebecca Gray, Nurse Midwife and Family Nurse Practitioner</a> </li>
<li><a href="http://www.scrmc.org/about/news-item/volunteer-partners-love-lights">Volunteer Partners Love Lights</a> </li>
<li><a href="http://www.scrmc.org/about/news-item/scrmc-launches-new-diabetes-care-clinic">SCRMC Launches New Diabetes Care Clinic</a> </li>
</ul>
<h2>Recent Newsletters</h2>
<ul>
<li><a href="http://www.scrmc.org/about/newsletter-item/november-2011">November 2011</a></li>
<li><a href="http://www.scrmc.org/about/newsletter-item/april-2011">April 2011</a></li>
<li><a href="http://www.scrmc.org/about/newsletter-item/december-2011">December 2010</a></li>
</ul>
<h2>Find a Provider</h2>
<ul>
<li><a href="/search/providers">Provider search</a></li>
</ul>
</div>
</div>
</body>
</html>
(If DS60 stumbles across this thread while on his patrol, I’m sure he’ll suggest a better way of doing it :))
Thanks for the help, guys.