CSS <Ul> <Li> Gap in Ie7

CSS ul li gap in IE7

If you're displaying the <li> elements inline (to create a horizontal menu) the line-breaks between the sibling <li>s are being converted into a single white-space. You can either comment-out the spaces, or put all the siblings on the same line:

commenting-out:

...<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...

or:

...<li>element One</li
   ><li>element Two</li
   ><li>element Three</li>...

(in the latter example note the closing > of the <li> tags on the next line immediately preceding the next sibling)

or you can use same-line siblings:

...<li>element One</li><li>element Two</li><li>element Three</li>...

You could also just use float: left on the li elements, which takes them out of the inline document flow. Possibly a negative left-margin to move the li left to 'cover' the preceding whitespace, though it would likely take trial and error to find a suitable measurement to cover the space without covering the preceding li element.

CSS gap between list items in IE7

float the li too

li
{
    list-style-type: none;      
    width: 100%;
    float: left;    
    margin: 0px;
    padding: 0px;   
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;          
}

this will fix IE7 (it's a known issue in IE7) but it will also get other browsers to contain the child floats at the same time - (which they weren't doing)

added: ### Working Example ###

IE7 - UL LI menu with 'extra' padding - Why zoom:1 (`hasLayout`) makes it work?

Lists

Lists are affected by layout applied either to the list (ol, ul) or to the list elements (li). Different versions of IE react differently. The most evident effects are on the list markers (fully customized lists where the markers are not required won't have these problems.) The markers are probably created by internally adding some elements that are somewhat “attached” to the list elements (usually hangs out of them) and seems rather unstable. Unfortunately, being “internal” only objects, they cannot be accessed to try to correct mis-behaviours.

The most evident effects are:

Layout applied to a list makes the markers to disappear or to be differently/wrongly positioned.

Sometimes they can be restored by changing margins on the list elements. This looks like a consequence of the fact that a layout element tends to crop internal elements hanging out of it.

Layout applied to list elements creates the same problems as above, and more (extra vertical space between list items)

A further problem is that (in ordered lists) any list element with layout seems to have its own counter. Let's say we have an ordered list with five elements where only the third has layout. We'll see this:

1... 2... 1... 4... 5...

Moreover when a list element with layout displays on multiple lines the marker is vertically aligned at the bottom (not at the top, as expected.)

Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. If it's necessary to apply some dimension, this is better applied to other elements: for example a width can be applied to an external wrapper, and a height to the content of each list item.

Another common problem with lists in IE occurs when the content of any li is an anchor with display: block. In these conditions the white space between list items is not ignored and usually displayed as an extra line for each li. One of the methods to avoid this extra vertical space is to give layout to the block anchors. This also has the benefit of making the whole rectangular area of the anchors clickable.

For more detail visit : http://www.satzansatz.de/cssd/onhavinglayout.html

Gap Between ul and div in IE7

It's your H1 margin that "spills" under the ul.
Replace it with a padding :

h1 {
  margin: 0;
  padding: 0px 0px 10px 0px;
  font-size: 120%;
  color: #01305E;
}

You could also add zoom to trigger haslayout

#center-panel ul {
  padding: 0px;
  margin: 0px;
  zoom:1;
 }

IE7 - UL LI menu with 'extra' padding - Why zoom:1 (`hasLayout`) makes it work?

Lists

Lists are affected by layout applied either to the list (ol, ul) or to the list elements (li). Different versions of IE react differently. The most evident effects are on the list markers (fully customized lists where the markers are not required won't have these problems.) The markers are probably created by internally adding some elements that are somewhat “attached” to the list elements (usually hangs out of them) and seems rather unstable. Unfortunately, being “internal” only objects, they cannot be accessed to try to correct mis-behaviours.

The most evident effects are:

Layout applied to a list makes the markers to disappear or to be differently/wrongly positioned.

Sometimes they can be restored by changing margins on the list elements. This looks like a consequence of the fact that a layout element tends to crop internal elements hanging out of it.

Layout applied to list elements creates the same problems as above, and more (extra vertical space between list items)

A further problem is that (in ordered lists) any list element with layout seems to have its own counter. Let's say we have an ordered list with five elements where only the third has layout. We'll see this:

1... 2... 1... 4... 5...

Moreover when a list element with layout displays on multiple lines the marker is vertically aligned at the bottom (not at the top, as expected.)

Some of these problems cannot be cured, so when the markers are desired it's better to avoid layout on lists and list elements. If it's necessary to apply some dimension, this is better applied to other elements: for example a width can be applied to an external wrapper, and a height to the content of each list item.

Another common problem with lists in IE occurs when the content of any li is an anchor with display: block. In these conditions the white space between list items is not ignored and usually displayed as an extra line for each li. One of the methods to avoid this extra vertical space is to give layout to the block anchors. This also has the benefit of making the whole rectangular area of the anchors clickable.

For more detail visit : http://www.satzansatz.de/cssd/onhavinglayout.html

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

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.

Need to center a ul within a div ie6 & ie7

IE 6 and IE 7 do not support display:inline-block

You can override this with a IE CSS hack to the inline-block elements

zoom: 1;
*display: inline;

I would put those wrapped in IE conditional comments to target IE only.

Demo at http://www.jsfiddle.net/gaby/qArVS/2

list items spacing issue in IE7

Link Normalize CSS in your HTML page and your page should render the same in all major browsers.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Edit:

There can be an issue with the margin and padding, keep it to 0-

ul, li{
  margin: 0;
  padding: 0;
}

LI under UL width not 100% on IE7

CSS:

#menu .submenu li {
    display: block;
    width: auto;
    float: none;
}

Control Height of li in IE 7

The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding font-size:0 and line-height:0 to .menu ul li.separator.

A better solution would be to add a thicker bottom border to the <li> that is before the separator.

.menu ul li.sep {border-bottom-width:6px}

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="sep"><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>

---

Related Topics