CODEWITHSUNDEEP
htmlcssinternet-explorercross-browser
TDsouza
TDsouza

Reputation: 938

Remove unnecessary space between li elements in IE

I have an unordered list for horizontal navigation

The code is something like this

   <ul class="headul">
      <li class="headli"><a href="#"><img src="Images/2_03.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_04.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_05.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_06.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_07.jpg"/></a></li>
       <li class="headli"><a href="#"><img src="Images/2_08.jpg"/></a></li>
   <li class="headli"><a href="#"><img src="Images/2_09.jpg"/></a></li>
   </ul>

css

     .headul {
        display:block;
        padding:0px
            }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        border:0px;
            }

      .headli a {float:left;
            display:block; 
            letter-spacing:0;
            float:left;
            border:0;
            }

Ive tried float:left, display:inline, display:block, display:inline-block, etc,

I also tried removing the spaces between the html li elements. ( i.e put all the li elements on the same line in html code)

I also tried letter-spacing:0, font-size:0 for ul , li as well as li a

it looks great on chrome and mozilla but in IE there's a little space between all the li element.. as if IE is giving them a margin of a couple px or something... moreover it's happening on IE9.. (i use IE tester to test on earlier versions of IE but today for some reason it keeps crashing when testing IE7)

Upvotes: 2

Views: 2617

Answers (4)

Sarin Jacob Sunny
Sarin Jacob Sunny

Reputation: 2138

Try this, Added css for img

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.headul {
        display:block;
        padding:0px;
        border:0px;
        margin:0px;
        }

      .headli {
        list-style:none;
        display:block;
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a {
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }

      .headli a img{
        float:left;
        display:block; 
        letter-spacing:0;
        float:left;
        margin:0px;
        border:0px;
        padding:0px;
        }
</style>
</head>
<body>
 <ul class="headul">
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
      <li class="headli"><a href="#"><img src="../images/user.png"/></a></li>
   </ul>
</body>
</html>

Before change

enter image description here

After change

enter image description here

Upvotes: 0

vbachev
vbachev

Reputation: 131

Make sure there are no other style rules affecting any of the ul's child elements. IE9 cannot cause such behaviour by default so I suspect it's some css that's affecting how these li,a,img elements look.

Images in IE sometimes have borders - try setting them to border: 0 none;.

If your list items are inline then the spaces between the html tags can push them apart.

Upvotes: 1

Pramod Kumar Sharma
Pramod Kumar Sharma

Reputation: 8012

Create new css for images 

.headli a img
 {
    border:none;
    margin:0;
    padding:0;

 }

Upvotes: 2

SvenFinke
SvenFinke

Reputation: 1254

Are you sure that the additional space comes from the li element? I made the experience, that images sometimes cause strange 1px gaps if they are not "display:block"...

Try to set "display:block" on the image inside the LI. That may work :)

Upvotes: 0

Related Questions