CODEWITHSUNDEEP
cssinternet-explorer-7
Fred Bergman
Fred Bergman

Reputation: 2020

Gap between list-items with floated elements in IE7 (with isolated test case)

I'm having huge difficulties in removing the gap between list items in IE7.

The problem with gap between the list-items occurs when I am floating elements inside the li:s.

A simple test case is here (with 2 different possible solutions that didn't work): http://jsfiddle.net/UJMr8/1/

...And here is the HTML from the test:

<ul>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="even">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
    <li class="odd">
        <span class="left">left</span>
        <span class="right">right</span>
    </li>
</ul>

With the following css:

li     { height: 30px; line-height: 30px; padding: 0 10px; }
.even  { background: #ccc; }
.odd   { background: #eee; }
.left  { float: left; }
.right { float: right; }

Any suggestions or thoughts on this? Thanks!

Upvotes: 0

Views: 1061

Answers (3)

arnorhs
arnorhs

Reputation: 10429

You will have a lot of problems with styling list items if you don't change their display to block and reset them properly.

Add this to the top of your css:

ul li, ul {
  list-style:None;
  margin:0;
  padding: 0;
  display:block;
}

Upvotes: 0

Sotiris
Sotiris

Reputation: 40066

Edit: Thanks for the comment, I hadn't test it in other browsers. So, you can use conditional comments, to target internet explorer only like this 

<!--[if IE 7 ]>
 li {height:0px;}
<![endif]-->

Or you can use an external css, to target internet explorer 7 for any other problem you may have and you can't find a cross browser solution:

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

Another option is to use an internet explorer hack, like asterisk *. An example is 

*height:0px;

The hack must be below the height:30px to be able to override it.

I suggest you to use conditional comments, instead the hack.

Upvotes: 1

mylesagray
mylesagray

Reputation: 8869

Have you tried using Eric Meyers CSS Reset?

http://www.cssreset.com/downloads/css-resets/eric-meyer-reset-css/eric-meyer-reset.css

It sets all browser default margin and padding to 0

Upvotes: 0

Related Questions