IE 7 Debug Issue - mystery <li> indent on first line

Question

I am building a website, www.vitaminjdesign.com

In IE7, you will notice that in the footer, the first line of list items are indented a little bit. Does anyone know what CSS fix I need for this? THanks

Answer 1

You could create an IE hack. Create a new stylesheet (e.g. ie-hacks.css) with the following (example class used, use whatever you want):

.ie-hack ul {
margin-left: -5px;
}

You may need to change the value of the margin-left in the style. And in the footer, update the following code:

<ul id="info" class="ie-hack">

        <li class="header">Vitamin J Design</li>
        <li>a web & graphic design studio</li>
        <li><a href="mailto:[email protected]">[email protected]</a></li>
  <li>(609) 238-4513</li>
    </ul>

    <ul id="rfi" class="ie-hack">

        <li class="header" class="ie-hack">Ready To Get Started?</li>
        <li>Fill out our <a href="rfp.html">Request for Proposal</a> form and tell us a little bit about your proejct</li>
        <li style="margin-top:4px"><a href="cost.html">How Much Will My Site Cost?</a></li>

    </ul>

     <ul id="navigate" class="ie-hack">      
        <li class="header">Navigate</li>

        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="blog">Blog</a></li>
    </ul>

And, in the "head" section of your markup, you need to add the following:

<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->

Answer 2

try setting list-style-position: outside on your LI elements. Put it in a conditional stylesheet so it's only seen by IE7.

BTW, there are a lot of typos in your copy throughout the site -- you'll want to clean those up if people are to take your pitch seriously.

Answer 3

You have different css files for IE7. When I load the page in IE I notice there is a warning triangle down in the status bar. It complains about css_ims not being defined at line 55, char 3. Check the IE-specific files for syntax errors (I mean what MS considers syntax errors).