[HTML][CSS]Problem z wyswietlaniem na IE, na Firefox jest ok. Opcje

[gadhet]

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.

[crocodillo]

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.

[lobopol]

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

[gadhet]

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 (IMG:style_emoticons/default/sad.gif) . Pomóżcie, bo nie wiem co robić (IMG:style_emoticons/default/sad.gif)

Ten post edytował gadhet 13.08.2011, 14:39:23

[lobopol]

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.

[crocodillo]

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 (IMG:style_emoticons/default/sad.gif) . Pomóżcie, bo nie wiem co robić (IMG:style_emoticons/default/sad.gif)

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

[gadhet]

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 (IMG:style_emoticons/default/smile.gif) . Zobaczę jak będzie po poprawieniu wszystkiego (IMG:style_emoticons/default/smile.gif) a trochę tego jest. Dzięki za sugestie!

[crocodillo]

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 (IMG:style_emoticons/default/smile.gif) . Zobaczę jak będzie po poprawieniu wszystkiego (IMG:style_emoticons/default/smile.gif) 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.

[gadhet]

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 (IMG:style_emoticons/default/sad.gif)

[lobopol]

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?

[crocodillo]

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

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 (IMG:style_emoticons/default/smile.gif)

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;

Ten post edytował crocodillo 13.08.2011, 19:48:10

[gadhet]

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.

Ten post edytował gadhet 13.08.2011, 20:27:26

[crocodillo]

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

[lobopol]

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

[gadhet]

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 

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

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

[crocodillo]

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