Hello folks, I have a strange css list problem. I am using an expandable box technique; not sure about the proper name (sliding doors?) but the idea is you use the same larger image on li and a for the two sides of the box two sides.

For the sake of debugging I changed the li background property into a green background, so you see what is happening; eventually it'll be the same as the a background, but right aligned.

Firefox: (correct)

alt text

Internet Explorer: (buggy)

alt text

Here is the markup:

<ul id='pages'>
<li  ><a href='servizi.html'><span style='background-image: url(images/icone/servizi.png)'>Servizi</span></a></li>
<li  ><a href='professionisti.html'><span style='background-image: url(images/icone/professionisti.png)'>Professionisti</span></a></li>
</ul>   

And here's the css:

 body #navigation ul#pages {
        margin: 0;
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        margin-left: 10px;
       padding-left: 0;
    }
    body #navigation ul#pages li {
      margin-bottom: 3px;
      margin-left: 0;
      padding-left: 0;
      background: green;
      text-align: left;
    }
    body #navigation ul#pages li a {
        display: block;
        background: url(../images/menu-blu.png) no-repeat left -80px;
        height: 23px;
        color: white;
        padding: 6px 7px 9px 12px;
        margin-right: 20px;
        font-weight: bold;
        font-size: 110%;
        border: "2px solid" !mattone;
    }
    body #navigation ul#pages li a span {
        background-position: top left;
        background-repeat: no-repeat;
        display: block;
        padding: 0 0 0 28px;
        line-height: 14px;
        height: 26px;
    }     

I tried to debug via the IE inspector, but everything seems fine (no unwanted padding/margin etc).

Any idea about where the extra green on the left comes from?

Thanks in advance, Davide

1 answer

danwellman 5600
3
points
This was chosen as the best answer

Try setting the li and a elements to inline-block, this will often fix layout issues such as this. Or try floating the a elements and giving the li a fixed height.

Answered over 6 years ago by danwellman
  • Dude, perfect suggestion! I tried the `inline-block` solution, which worked, then I added a `width` to `li`. Then I removed `inline-block`, realising that the missing `li`'s `width` was the problem. Thanks a million, I was really stuck here. Davide Davide Benini over 6 years ago
  • no worries, glad I could help :D danwellman over 6 years ago