IE7 List alignment Issues

HTML & CSS
1

I’ve been troubleshooting this issue for a week and have gotten little solved.

I’m experiecing similar issues with horizontal alignment with items lining up properly in IE7

I believe these are all based on the same issue:

  1. The list on the right side panel. The images and text do not align properly.
    http://www.standardizedsupplements.com/tremorsure.html

  2. Same right side panel list alignment:
    http://www.standardizedsupplements.com/purchase_tremorsure.html

  3. Slightly similar issue here: Icons and graph margins seem off.
    http://www.standardizedsupplements.com/supplement-comparison.html

2

@Rayzur - Thank you, it worked like a charm.

The last three issues:

1 ) I have are that the bulleted lists are inconsistent in displaying the “arrow” graphic.

There is a small arrow next to Office of Dietary Supplements but
not next to other resources.
http://www.standardizedsupplements.com/contact-us.html

  1. In the FAQs, at the very top of the page, the numbers and the text
    overlap, when there are double digits.
    http://www.standardizedsupplements.com/faq.html

  2. In Brand Comparison, the images start to shift out of alignment. - possibly the same issue?
    http://www.standardizedsupplements.com/supplement-comparison.html

Can anyone offer any insight or guidance to these issues?

Thanks so much.

3

Hi, Welcome to SitePoint :slight_smile:

On the first link you gave the problem with IE7 is that it does not like the anchor set as display:block sitting beside the floated image. There is a better way to do that though, just set classes on those list items then set each image as a background image.

You are using three separate ULs’ with only one LI item in each one. That just needs to be one UL with three LI items.

You will want to set a left padding on the LI to keep the anchor out of the BG image. I set a margin on the LI items to give them the spacing that you had when using the tree ULs’

Here is a standalone example using your styles that will work if laid beside your assets folder so it can pick up the images.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">
.col-third {
    float:left;
    padding:0 10px;
    width:300px;
    }
    
ul, ol, dl {
    font-size:13px;
    line-height: 19px;
    margin:0;
    padding: 0 0 20px 10px;
    list-style:none;
    }
ul li {
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    padding: 0 0 12px 20px;
    }
ol li {
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif;
    list-style:inside decimal;
    }
.sidebar {
    font-size:14px;
    line-height: 40px;
    padding: 0 0 9px;
    }
    [B].sidebar li [/B]{
        padding-bottom:0;
        [COLOR=Blue]padding-left:63px;
        margin:10px 0;
[/COLOR]        }
   [B] li.download[/B] {
        background:[COLOR=Blue] url(assets/img/download.png) no-repeat 5px 0;[/COLOR]
        }        
   [B] li.help[/B] {
        background: [COLOR=Blue]url(assets/img/help_blue.png) no-repeat 5px 0;[/COLOR]
        }        
   [B] li.purchase[/B] {
        background: [COLOR=Blue]url(assets/img/purchase.png) no-repeat 5px 0;[/COLOR]
        }
    [B].sidebar li a[/B] {
        display:block;
        height: 48px;
        [COLOR=Blue]line-height:48px;
[/COLOR]        color: #007f7f;
        }
        .sidebar li a:hover {
            text-decoration:none;
            }
            
        .sidebar img{
            float: left;
            margin-right: 8px;
            }

        .sidebar li:hover {
            background-color:#f0f0f0;
            text-decoration: none;
            }
    
</style>
</head>
<body>

        <div class="col-third">
            <h3>Product Support</h3>
            <p>You should always keep your physician informed of dietary supplement use. Please download and share this standardized letter regarding the components of TremorSURE with your physician.</p>           
            <[COLOR=Blue]ul class="sidebar">[/COLOR]
                [B]<li class="download">[/B]<a href="tremorsure_supplement-info.pdf">Letter for Physician</a></li>
                [B]<li class="help">[/B]<a href="faq.html">Frequently Asked Questions</a></li>
                [B]<li class="purchase">[/B]<a href="http://www.standardizedsupplements.com/purchase_tremorsure.html">Order Now </a></li>
            [COLOR=Blue]</ul>[/COLOR]                        
        </div>
        <!-- END .COL-THIRD -->

</body>
</html>