Witam,

Mam taka stronę: http://www.historie-sukcesu.pl/index.php?show=2

Którą wczoraj trochę przerobiłem głównie wyświetlanie tych dodawanych artykułów. I na Firefoxie jest wszystko OK, natomiast na IE rozjezdza się, czy ktoś może mi pomóc z tym dlaczego tak jest?

Dzięki za pomoc.

W chrome też się rozjeżdża, nie patrzyłem w FF.
Nie sprawdzałem dokładnie, ale te pierwsze pozycje masz jęte w <div class="lista_int"> ... </div> i jest tam jeszcze jeden div który chyba kasuje float <div class="clear">

Później już to pomijasz. Spróbuj to poprawić, powinno pomóc.

Powiem tak, masz nieziemski burdel w kodzie, 3 razy otwierasz html i dajesz nagłówki, tak samo body. Zerknij na walidator w3c

Z tym "burdelem" to wiem, uczę się na tej stronie dlatego to niestety tak wygląda.

A jakieś sugestie odnośnie tego wyświetlania na IE? Zaraz spróbuje wcześniejszą wskazówkę.

PS. Niestety Sposób crocodillo nie działa . Pomóżcie, bo nie wiem co robić

Mówię napraw kod pozbądź się podwójnych html/body, a przede wszystkim przeczytaj jakiś kurs html. Bez podstawowych poprawnych konstrukcji to tu nie ma co naprawiać, można się jedynie dziwić czemu firefox to dobrze wyświetla.

Raczej działa, tylko do tego trzeba całą resztę naprawić tak jak inni wspominali.
ps: ie9 też nie wyświetla tej strony poprawnie

Tak ja cały czas mówię o IE 9, że źle wyświetla.

Właśnie zacząłem poprawiać błędy i widzę postępy . Zobaczę jak będzie po poprawieniu wszystkiego a trochę tego jest. Dzięki za sugestie!

Myślałem o FF a napisałem IE. Chodziło mi, że FF5 też źle wyświetla.

OK, większość posprzątałem (zostało błąd z banerem i formularzem rejestracji) ale i tak nic nie pomogło z wyświetlaniem tych artykułów w pomysłach, dwóch pierwszych, bo są inaczej zrobione a nie tak jak te poniżej które inaczej w divach są umieszczone.

Dalej tylko FF 3.6 wyświetla dobrze... no oprócz FF 5.

Niestety dalej nie wiem o co chodzi

Sprawdziłem stronkę na ff5, ostatnim chrome,ie7,ie9, ostatniej operze, ff3.6, ie6 wszędzie wygląda z grubsza tak samo i nie wiem jaki ty chcesz efekt osiągnąć. Po kodzie ciężko rozpoznać bo masz zbyt duży chaos. Daj screena jak byś chciał aby to wyglądało?

Tak na marginesie, to jeszcze takiego starego ff używasz?

Widzę, że to co Ci się rozjeżdża, masz rozdzielone <hr>.
W stylach dopisz

[HTML] pobierz, plaintext 
hr { clear:left;}
[HTML] pobierz, plaintext 

Powinno Ci wyrównać, aczkolwiek dokładnie nie sprawdzałem bo patrząc na ten Twój kod można się nabawić bólu głowy

Też pamiętam jak miałem problemy początkowo z FLOAT, ale to było dawno...

Możesz też każdy artykuł umieścić w divie, tak jak te początkowe tzn. <div class="lista_int"> ... </div>
i w stylach dopisz do div.lista_int clear:left;

Chciałbym tak jak na Firefox 3.6:

http://i51.tinypic.com/mwplwi.jpg

Te dwa pierwsze artykuły na tej stronie http://www.historie-sukcesu.pl/index.php?show=2 mnie interesują aby byly dobrze wyswietlane tak jak na firefox 3.6. OCzywiscie pozniej reszta ale tam jeszcze inne divy sa ale to pozmieniam zaraz.

Pokażę Ci jak zrobić pojedynczy element:

W stylach odpowiednio dopisujesz (oczywiście zakładam, że wiesz jak to zrobić, jak nie to daj znać):

[HTML] pobierz, plaintext 
    div.lista_int {
        clear:left;
    }
    div.lista_int div.lista_img_horizontal {
        width:160px; /* Zakładamy, że każdy obrazek będzie węższy niż 160 pikseli */
        float:left;
    }
    div.lista_int div.lista_txt {
        margin-left:160px;
    }
[HTML] pobierz, plaintext 

a html na taki wzór:

[HTML] pobierz, plaintext 
<div class="lista_int"> 
    <div class="lista_img_horizontal">
        <img alt="" src="http://www.historie-sukcesu.pl/images/Miernik wody/Miernik w kranie.png" width="150px" height="150px" />
    </div>
    <div class="lista_txt"> 
        <div class="data">
            2011-08-11
        </div> 
        <p>
            <strong>
                <a title="Miernik wody" href="index.php?show=64">Miernik wody przepływającej.</a>
            </strong>
        </p> 
        Ciekawy pomysł zaprezentował Jeon Hwan Soo, który stworzył miernik wody przepływającej. Koncept urządzenia jest przedstawiony na rysunkach poniżej. 
        Jak widać na wyświetlaczu jest ukazane ile wody nalaliśmy do np. garnka.
    </div> 
</div> 
 
[HTML] pobierz, plaintext 

Jeśli teraz przerobisz swój html, żeby każdy element wyglądał tak samo, to Ci się wszystko fajnie wyświetli

Jak widzę na pewno część winy ponosi szerokość kontenerów, TRESC masz dynamiczną szerokość, a lista_int ma stałą (przez wewnętrzne kontenery)

Moje style odpowiadające za te div-y wygladaja tak. Podopisywałem tak jak wspomniałeś, choć nie wiem czy dobrze zrozumiałem dopisanie czegoś takiego:

[HTML] pobierz, plaintext 
div.lista_int div.lista_img_horizontal {
width:160px; /* Zakładamy, że każdy obrazek będzie węższy niż 160 pikseli */
float:left;
}
 
div.lista_int div.lista_txt {
margin-left:160px;
}
[HTML] pobierz, plaintext 

tzn do dwóch div-ów czy stworzyc cos takiego jako nowe?

U mnie to wygląda tak, ale teraz to sie wszystko rozjechalo na stronie. Kod html strony mam taki sam jak wspomniales.

[HTML] pobierz, plaintext 
div.lista_img {
float:left;
padding-bottom:5px;
padding-right:9px;
width:150px;
}
 
div.lista_int
{
width:160px; 
float:left;
border-bottom: 1px solid #EAEAEA;
height: 150px;
margin: 0 0 7px;
margin-left:160px;
padding: 0 0 6px;
clear:left;
}
 
div.lista_txt
{
margin-left:160px;
float:left;
font-size:16px;
text-align:left;
width: 675px;
}
 
div.clear
{
clear: both;
}
 
 
div.lista_img_horizontal {
float:left;
padding-bottom:5px;
padding-right:9px;
width:160px;
}
[HTML] pobierz, plaintext 

Doszedłem Panowie!!! To jest właśnie to co napisał lobopol jedne szerokości były dynamiczne a drugie statyczne.

Ale należą się wam obydwu plusy za pomoc jakiej udzieliliście mi dzisiaj

Wiem, że już Ci działa jak należy, ale tylko chcę pokazać co było źle w Twoim css: (niepotrzebne dałem w komentarze)

[HTML] pobierz, plaintext 
/*div.lista_img { TEGO WOGÓLE NIE UŻYWASZ
float:left;
padding-bottom:5px;
padding-right:9px;
width:150px;
}*/
 
div.lista_int
{
/*width:160px; */
/*float:left;*/
border-bottom: 1px solid #EAEAEA;
height: 150px;
margin: 0px 0px 7px 160px; /* poptawiłem */
padding: 0 0 6px;
clear:left;
}
 
div.lista_txt
{
margin-left:160px;
/*float:left;*/
font-size:16px;
text-align:left;
/*width: 675px;*/
}
 
div.clear
{
clear: both;
}
 
 
div.lista_img_horizontal {
float:left;
padding-bottom:5px; /* to jest niepotrzebne */
/*padding-right:9px;    to też, ponieważ ustawiony jest lewy margines w .lista_int na 160px czyli zdjęcie 150px + 10px odstęp */
width:160px;
}
[HTML] pobierz, plaintext