[CSS] IE8 reserving space for a non-displayed element

Question

I have a simple page with a form and selects. Number of those selects are set invisible and I use Javascript (JQuery) to set visible/invisible the good one.

The CSS to set them invisible is :

select {
   margin:0;
   margin-top:5px;
   padding:0;
   border:0;
   }

.Invisible {
    display:none;
}

It works fine on Firefox, Opera and Chrome, but not, of course, on Internet Explorer 8.

It does render the selects invisible, but it reserves 1 or 2 pixels to each one.

Here is my test page

You can see that there is a big space between "Modèle" and "Budget" ... You can see it better if you play with the "Marque" dropdown.

Answer 1

IE is rendering the space between your </select> and the next start <select> if your remove the newline and any space between these two elements, your mysterious spaces will go away.