SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7/IE8 conflict on <li> alignment

    Hi,

    The list items in the footer of this site:

    http://scrmc.org/

    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
    scrmc-ie7.jpg
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I don't have access to IE6/7 at the moment but the first thing I would try is hasLayout.
    Code:
    #footer ul li {
        margin: 0 0 5px;
        padding: 0;
        zoom: 1;
    }
    If that doesn't fix it I would trying float to fix.
    Code:
    #footer ul { width: 100%; overflow: hidden }
    #footer ul li {
        margin: 0 0 5px;
        padding: 0;
        width: 100%;
        float: left;
    }
    All the best,

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.


    Code CSS:
    #footer .col ul {
        list-style-position: outside; /* changed */
        margin: 0 0 5px;
        padding: 0;
    }

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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>
            <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>
    
        </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 )

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, guys.
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com


Tags for this Thread

Bookmarks

Posting Permissions

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