[XHTML] Problem z IE 7 Opcje

[rafaelpl]

Witam!

Oto kod odpowiedzialny za wyświetlanie topu strony:

[HTML] pobierz, plaintext 
<div id="top1_1"><img src="images/top1_1.png" alt="" /></div>
    <div id="top1_2">Zaloguj :: Zarejestruj :: Zapomniałem hasła</div>
    <div id="top1_3"><img src="images/top1_3.png" alt="" /></div>
    <div id="top2"><img src="images/top2.png" alt="" /></div>
    <div id="top3_1">
      <a href="#">
        <img src="images/top3_1_0.png" onmouseover="this.src='images/top3_1_1.png'" onmouseout="this.src='images/top3_1_0.png'" alt="" style="border:0px;" />
      </a>
    </div>
    <div id="top3_2">
      <a href="#">
        <img src="images/top3_2_0.png" onmouseover="this.src='images/top3_2_1.png'" onmouseout="this.src='images/top3_2_0.png'" style="border:0px;" alt="" />
      </a>
    </div>
    <div id="top3_3">
      <a href="#">
        <img src="images/top3_3_0.png" onmouseover="this.src='images/top3_3_1.png'" onmouseout="this.src='images/top3_3_0.png'" style="border:0px;" alt="" />
      </a>
    </div>
    <div id="top3_4"><img src="images/top3_4.png" alt="" /></div>
    <div id="top4_1"><img src="images/top4_1.png" alt="" /></div>
    <div id="top4_2">
      <div class="top_pop" style="background:url(images/test.gif);">
        <div class="top_black">Kimi Dress Up</div>
      </div>
    </div>
    <div id="top4_3"><img src="images/top4_3.png" alt="" /></div>
    <div id="top4_4">
      <div class="top_pop" style="background:url(images/test.gif);">
        <div class="top_black">Kimi Dress Up</div>
      </div>
    </div>
    <div id="top4_5"><img src="images/top4_5.png" alt="" /></div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#top1_1{
    width:289px;
    height:25px;
    float:left;
}
 
#top1_2{
  background:url(images/top1_2.png);
    width:338px;
    height:25px;
    float:left;
    color:#53729f;
    text-align:center;
    font-weight:bold;
    line-height:23px;
}
 
#top1_3{
    width:141px;
    height:25px;
    float:right;
}
 
#top2{
    width:768px;
    height:105px;
    clear:both;
}
 
#top3_1{
    width:141px;
    height:53px;
    float:left;
}
 
#top3_2{
    width:129px;
    height:53px;
    float:left;
}
 
#top3_3{
    width:129px;
    height:53px;
    float:left;
}
 
#top3_4{
    width:369px;
    height:53px;
    float:left;
}
 
#top4_1{
    width:236px;
    height:128px;
    float:left;
}
 
#top4_2{
  background:url(images/top4_2.png);
    width:171px;
    height:128px;
    float:left;
}
 
#top4_3{
    width:37px;
    height:128px;
    float:left;
}
 
#top4_4{
  background:url(images/top4_4.png);
    width:170px;
    height:128px;
    float:left;
}
 
#top4_5{
    width:154px;
    height:128px;
    float:left;
}
[HTML] pobierz, plaintext 

Pod Firefoxem wszystko wyświetla dobrze, niestety pod IE 7 poszczególnie elementy topu się rozchodzą:



W jaki sposób dostosować top pod Micro$oft IE 7?

Z góry dziękuję za odpowiedź.

[grzesiek_g]

Nie wiem który blok to który obrazek (a nie mam czasu robić dochodzenia), ale to na pewno jest złożone fatalnie. Daj może linka.

[rafaelpl]

Nie wiem który blok to który obrazek (a nie mam czasu robić dochodzenia), ale to na pewno jest złożone fatalnie. Daj może linka.

Oto link: http://www.rafaelpl2.yoyo.pl/

Co do złożenia, to tylko taki miałem pomysł... Wiele w tym topie jest wycinków, np. na logowanie, najnowsze gry itp., więc postanowiłem skonstruować to w ten sposób.

[Pilsener]

[HTML] pobierz, plaintext 
<div id="top1_2">Zaloguj :: Zarejestruj :: Zapomniałem hasła</div><div id="top1_3"><img src="images/top1_3.png" alt="" /></div>
[HTML] pobierz, plaintext 

Hmm.. po co tak sobie utrudniasz życie? I po co tyle divów? Zamiast pierwszego div'a powinien być paragraf. I po co <img>? Stałe elementy layoutu powinny być jako background w CSS.

Po co aż tyle części? Przecież nie ma to się ani rozciągać, opacity też nie widzę. Zrób jeden obrazek jako tło, a resztę nałóż używając float, marginesów oraz pozycjonowania relatywnego - w ostateczności absolutnego.

Twoje menu jest tragiczne, powinno wyglądać tak:

[HTML] pobierz, plaintext 
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
</ul>
[HTML] pobierz, plaintext 

I po co JS aby podmienić obrazek? Taki sam efekt bez problemu można uzyskać w CSS. Samo CSS też słabo wykorzystujesz. Radzę doczytać o semantyce, standardach i wykorzystaniu CSS. W ten sposób się narobisz niepotrzebnie, a strona i tak będzie się rozpadać w niektórych przeglądarkach.

Robienie nowoczesnych i semantycznych stron nie polega na zastąpieniu znaczników <td>, <font> i <center> znacznikiem <div>.

Wg mnie nie ma sensu tego ustawiać - sugeruję koncepcję przemyśleć od nowa.

[rafaelpl]

W zasadzie nigdy dogłębnie nie studiowałem XHTML i CSS, "nauczyłem się" go praktycznie z niczego. Widzę, że muszę zmienić ten aspekt Wielkie dzięki za odpowiedzi. Gdybyś mógł polecić jakieś strony, kursy itp. do nauki byłbym wdzięczny.

Ten post edytował rafaelpl 20.03.2008, 15:18:12