List problemen met IE7

[clooner]

Hallo allemaal,

ik zit nu al een tijd te knooien met lists die het onder FF2+ en IE6 het wel goed doen maar onder IE7 niet. Hopelijk weet iemand hier waar het aan ligt.

Dit is de CSS

Cascading Stylesheet:

.list_style_1 {
    width : 352px;
    overflow : hidden;
}
.list_style_1 a:hover {
    text-decoration : none;
}
.list_style_1 h1 {
    font-size : 18px;
    margin : 12px 0px 0px 0px;
    padding : 0px;
}
.list_style_1 h2 {
    font-size : 14px;
    margin : 20px 0px 15px 0px;
    padding : 0px;
}
.list_style_1 ul {
    padding : 0px 0px 0px 0px;
    width : 100%;
    height : 165px;
    margin : 0px 0px 0px 6px;
}
.list_style_1 ul li {
    width : 108px;
    float : left;
    margin : 10px 6px 0px 0px;
    overflow : hidden;
}
.list_style_1 ul li a {
    width : 100%;
    text-align : center;
    display : block;
    padding : 0px;
    text-align : center;
    height : 165px;
}
.list_style_1 ul li a:hover {
    background : url("images/item_back.jpg");
}
.list_style_1 ul li img {
    border : 0;
    background-position : center;
    background-repeat : no-repeat;
    margin : 0px auto 0px auto;
}
.list_style_1_title {
    height : 30px;
    width : 100%;
    font-weight : bold;
    display : block;
    cursor : pointer;
}
.list_style_1_sdesc {
    height : 40px;
    width : 100%;
    display : block;
    font-size : 10px;
    font-weight : bold;
    margin : 0px;
    text-align : left;
    cursor : pointer;
}
.list_style_1 ul li em {
    height : 20px;
    width : 100%;
    display : block;
    font-size : 16px;
    font-weight : bold;
    color : #CE2C2C;
    margin : 0px;
    text-align : right;
    cursor : pointer;
}
}

en de html code

HTML:

<div id="content_main">
      <h3>Maddog </h3><hr/>
      <div class="breadcrumbs"><a href="http://arie.nl">Arie.nl</a> / <a href="http://arie.nl/category/18">Werkschoenen</a> / Maddog </div>

      <div class="list_style_1">
        <ul>
          <li><a href="http://arie.nl/item/18/38/123461"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123461/small_1.jpg);"/><br/><span class="list_style_1_title">2123 </span><span class="list_style_1_sdesc">S3, KLASSIEKE SCHOEN MET MODERN UITERLIJK </span><em>&euro; 101,00</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123462"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123462/small_1.jpg);"/><br/><span class="list_style_1_title">2110 </span><span class="list_style_1_sdesc">S2, NETTE VEILIGHEIDSSCHOEN </span><em>&euro; 84,00</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123463"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123463/small_1.jpg);"/><br/><span class="list_style_1_title">TERMINATOR </span><span class="list_style_1_sdesc">S3, HOGE VEILIGHEIDSSCHOEN </span><em>&euro; 63,00</em></a></li>

          <li><a href="http://arie.nl/item/18/38/123489"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123489/small_1.jpg);"/><br/><span class="list_style_1_title">2304 </span><span class="list_style_1_sdesc">S3, HOGE VEILIGHEIDSSCHOEN </span><em>&euro; 105,00</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123490"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123490/small_1.jpg);"/><br/><span class="list_style_1_title">2145 </span><span class="list_style_1_sdesc">S2, SUPERNETTE VEILIGHEIDSSCHOEN </span><em>&euro; 84,00</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123666"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123666/small_1.jpg);"/><br/><span class="list_style_1_title">TITAN </span><span class="list_style_1_sdesc">-Titan </span><em>&euro; 89,99</em></a></li>

          <li><a href="http://arie.nl/item/18/38/123667"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123667/small_1.jpg);"/><br/><span class="list_style_1_title">VENUS </span><span class="list_style_1_sdesc">Dames Werkschoen </span><em>&euro; 66,99</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123668"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123668/small_1.jpg);"/><br/><span class="list_style_1_title">CALISTO </span><span class="list_style_1_sdesc">-Calisto </span><em>&euro; 71,99</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123669"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123669/small_1.jpg);"/><br/><span class="list_style_1_title">ORION </span><span class="list_style_1_sdesc">-Orion </span><em>&euro; 82,98</em></a></li>

          <li><a href="http://arie.nl/item/18/38/123670"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123670/small_1.jpg);"/><br/><span class="list_style_1_title">HALLEY </span><span class="list_style_1_sdesc">-Halley </span><em>&euro; 71,99</em></a></li>
          <li><a href="http://arie.nl/item/18/38/123671"><img src="http://arie.nl/images/spacer.gif" alt="" width="75px" height="75px" style="background-image:url(http://afbeeldingen.arie.nl/123671/small_1.jpg);"/><br/><span class="list_style_1_title">STING II </span><span class="list_style_1_sdesc">-Sting II </span><em>&euro; 66,99</em></a></li>
          <li>&nbsp;</li>
        <ul>
      </div>

    </div>

Dit is hoe het er uit hoort te zien


en dit is hoe het er uit ziet onder IE7


Hopelijk heeft iemand een oplossing

[ Voor 12% gewijzigd door clooner op 05-04-2008 18:39 ]

[gertvdijk]

Ik denk dat je het probleem moet zoeken in het niet correct omgaan met je floats. Je cleart je float:left op alle plaatjes niet.
En:
list_style_1 = menu_style_1
neem ik aan? fixed

[ Voor 3% gewijzigd door gertvdijk op 05-04-2008 18:45 ]

[clooner]

gertvdijk schreef op zaterdag 05 april 2008 @ 18:36:
Ik denk dat je het probleem moet zoeken in het niet correct omgaan met je floats. Je cleart je float:left op alle plaatjes niet.

Bedankt voor je snelle reactie
Ik weet dat het aan de float ligt maar onder ff2 en ie6 zet ik de float van de li tag op left. en de rest is standaard. Hebben ie6 en ff2 en andere default float dan ie7?

Ik heb het probleem al gevonden!
Ik had de height van de UL tag ingesteld. Ik was de hele tijd bezig met de float tag!

[ Voor 12% gewijzigd door clooner op 05-04-2008 19:00 ]