GoldenLine
Zaloguj się
Konrad Gos

Konrad Gos jestem jaki jestem

Temat: Różny wygląd w różnych przeglądarkach

Witam tworzę projekt strony, po mimo poprawnej walidacji strona wygląda inaczej pod internet exploler a inaczej w Mozilla
Na stronie mam ustawioną szerokość na 693 piksele

W Mozilla zajmuje 75% ekranu a w Internet Exploler 60% wysokości
Co może być przyczyną?
Jaka jest najlepsza rozdzielczość dla strony?
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Na ogół jest tak, że czasami inaczej wszystko wygląda w FF, inaczej w IE i w takim wypadku możesz dla IE zrobić osobny styl :) Tu masz tego najlepszy przykład:http://www.e-invision.pl/layout/ zobacz sobie kod strony, jest link dla IE do osobnego stylu. W tym osobnym stylu dla IE, nie musisz kopiować całej zawartości style.css, tylko kopiujesz kod tych elementów, które wyglądają inaczej w IE, niż FF. Dalej to już chyba wiesz co robić.Paweł Cyrklaf edytował(a) ten post dnia 08.12.10 o godzinie 23:39
Link do wypowiedziLink
Dominik Marczuk

Dominik Marczuk Remote Team Lead w
Sonalake

Temat: Różny wygląd w różnych przeglądarkach

Z opisu nadal nie kumam, co wygląda inaczej. Jaki jest kod. Która przeglądarka renderuje go poprawnie?

Poza tym, potwierdzam, co pisze Paweł.

Przykłady:
- IE nie radzi sobie ze stylowaniem elementów formularza. Pola tekstowe wymagają oddzielnego ustawienia dopełnienia (padding).
- FF w tabelach używa box-sizing: border-box zamiast content-box, wbrew zaleceniom W3C - i nikt nie wie, dlaczego.
- Chrome nadpisuje stylowanie pól tekstowych z autofillem (wstawia żółte tło - ma wewnętrzny CSS z atrybutem !important i od ponad dwóch lat nikt tego nie chce usunąć)
- Opera nie używa systemowych widżetów w formularzach, tylko własnych (radio, checkbox)
Link do wypowiedziLink
Konrad Gos

Konrad Gos jestem jaki jestem

Temat: Różny wygląd w różnych przeglądarkach

OTO CSS strony I ZRÓDŁO STRONY NIE WIEM CO MAM ZROBIĆ BY W INTERNET EXPLOLER I MOZILLI WYGLADAŁY TAK SAMO

body {
text-align:center;
background-color: #c0c0c0;
}
#calosc{
width:693px;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image: url(images/tlo.gif);
padding-top: 5px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
}
#caloscwew {
background-color: #bfb59c;
}
#naglowek {
background-image: url(images/naglowek.png);
height: 98px;
background-repeat: no-repeat;

}

#stopka {
width:100%;
clear:both;
background-color: #000000;
}

#tresc_wew {
margin-top: 1em;
margin-right: 0.5em;
margin-bottom: 0.5em;
margin-left: 0.5em;
}
#nawigacja {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
background-image: url(images/przycisk.png);
font-style: inherit;
text-align: center;
height: 40px;
background-repeat: no-repeat;
}

#nawigacja ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#nawigacja li {
display: inline;
}
#nawigacja a:link, #nawigacja a:visited {
color: #FFFFFF;
text-decoration: none;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 3px;
padding-left: 30px;
}
#nawigacja a:hover {
color: #FF0000;
}
#animacja{
margin-top: 5px;
}
<title>moja strona</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="calosc">
<div id="caloscwew">
<div id="naglowek">

</div><!-- koniec elementu naglowek -->
<div id="nawigacja">

<ul>
<li><a href="#">O MNIE </a></li>
<li><a href="#">PROJEKTY</a></li>
<li> <a href="#">KONTAKT</a></li>
</ul>
</div>
<!-- koniec elementu nawigacja -->

<div id="animacja"><img src="images/ANIMACJA.gif" alt="" width="693" height="200" /></div>
<!-- koniec elementu animacja -->
<div id="tresc">
<div id="tresc_wew">

Jakaś sobie treść strony.Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony. Jakaś sobie treść strony.
</div><!-- koniec elementu tresc_wew -->
</div><!-- koniec elementu tresc -->

<div id="stopka">
<div id="stopka_wew">
<p>To jest stopka.</p>
</div><!--koniec elementu stopka wew-->
</div><!--koniec elementu stopka-->

</div><!--koniec elementu caloscwew-->
</div><!--koniec elementu caloscwew-->

</body>
</html>
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Według mnie pod IE powinieneś ustawić większą wysokość :) Najlepiej będzie jak pokażesz gdzieś online tą stronę, to Ci powiem co i jak.

Sprawdź coś takiego, dla DIV-a który inaczej wygląda w FF i IE, ustaw stałą wysokość, to Cie bardzo nakieruje, bo będziesz wiedział, co masz zmienić, aby wszystko grało.Paweł Cyrklaf edytował(a) ten post dnia 09.12.10 o godzinie 09:48
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Pisanie stylów zacząłbym od dołączenia pliku resetującego domyślne style przeglądarki (http://meyerweb.com/eric/tools/css/reset/), takie jak marginesy, paddingi, wielkość czcionki. Otrzymasz wtedy "punkt zerowy", od którego możesz spokojnie zacząć pisać własne style nie obawiając się o rozbieżności w domyślnych stylach przeglądarek.
Pozdrawiam.
Link do wypowiedziLink
Mateusz K.

Mateusz K. miszcz wwwujitsu

Temat: Różny wygląd w różnych przeglądarkach

Dariusz Pobożniak:
Pisanie stylów zacząłbym od dołączenia pliku resetującego domyślne style przeglądarki

Jest różnica w resecie wszystkich elementów przy użyciu
* { style; } a body, div, span ... {style;} ?

ps. zlinkowany resecik nie uwzględnia znaczników html5 ;)
Link do wypowiedziLink
Marek Karnecki

Marek Karnecki rozwijamy się ;)

Temat: Różny wygląd w różnych przeglądarkach

dałbym głowę, za "pisanie styli" a nie "stylów" ...

natomiast np: "ćwiczenie stylów walki" a nie "styli walki"...
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Marek Karnecki:
dałbym głowę, za "pisanie styli" a nie "stylów" ...
To nie dawaj głowy, bo mógłbyś ją stracić :P Poprawny zwrot to: kaskadowe arkusze stylów.
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Wojciech J.:

ps. zlinkowany resecik nie uwzględnia znaczników html5 ;)

Zgadza się, nie uwzględnia znaczników html5, wyłącznie xhtml. Do serwisów, które koduję w html5 używam tego resecika http://html5doctor.com/html-5-reset-stylesheet/.
Wojciech J.:

Jest różnica w resecie wszystkich elementów przy użyciu
* { style; } a body, div, span ... {style;} ?

Uniwersalny selektor (*) powoduje wolniejsze renderowanie, gdyż schodząc w dół kodu html, każdy element jest przeszukiwany i nadawane mu są odpowiednie style. Zalecane jest nadawanie stylów poprzez wymienienie po przecinku tagów, dla których mają one obowiązywać.
Link do wypowiedziLink
Konrad Gos

Konrad Gos jestem jaki jestem

Temat: Różny wygląd w różnych przeglądarkach

Czyli najpierw musiałbym zapisać choćby coś takiego jako np reset.css

Oto przykład pliku resetującego reset.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }

póżniej dołączyć pliki ze swoimi stylami
Poprawcie mnie bo nie wiem czy dobrze myślę że wyglądał by to mniej wiecej tak

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Generalnie ja nigdy nie musiałem niczego resetować, wystarczyło zawsze zrobić osobny style dla IE, i problem z głowy.
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Umiesc kod z reset.css w style.css - po co rozbic dodatkowe, niepotrzebne wywolanie?
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Konradzie, zgadza się, najpierw style resetujące muszą zostać załadowane. Możesz załączyć je na górę swojego arkusza stylów jak pisze Michał, lub jak podałeś w przykładzie, osobnym pliku, który w kodzie html wywołujesz jako pierwsze. Ja korzystam z reseta w osobnym zewnętrznym arkuszu css, gdyż nie chce mieszać je ze swoimi stylami.
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Paweł Cyrklaf:
Generalnie ja nigdy nie musiałem niczego resetować, wystarczyło zawsze zrobić osobny style dla IE, i problem z głowy.

Nienajlepsza praktyka - przy kazdej zmianie musisz poprawiac dwa pliki.
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Paweł Cyrklaf:
Generalnie ja nigdy nie musiałem niczego resetować, wystarczyło zawsze zrobić osobny style dla IE, i problem z głowy.

Trzeba pamiętać, że nie tylko IE różni się w wyświetlaniu od innych przeglądarek. Każda, czy to jest FF, Chrome, Opera, ma swoje style, które dołącza, aby w razie niezaładowania Twojego arkusza, dokument był czytelny.
"Resetowanie" likwiduje różnice w tych właśnie stylach i daje Ci podstawę do wyświetlania strony w jednakowy sposób we wszystkich browserach. Oczywiście trzeba także wziąć pod uwagę różne bugi w IE6 i IE7 i ewentualnie dołączać warunkowo przygotowane dla nich style, ale w większości wypadków dobrze napisany kod minimalizuje takie ryzyko :)
Link do wypowiedziLink
Konrad Gos

Konrad Gos jestem jaki jestem

Temat: Różny wygląd w różnych przeglądarkach

Czy możecie podać przykłady dobrych stylów resetujących w internecie jest ich mnóstwo i nie wiem który z nich jest najlepszy?
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Konrad Gos:
Czy możecie podać przykłady dobrych stylów resetujących w internecie jest ich mnóstwo i nie wiem który z nich jest najlepszy?

We wcześniejszych postach podałem linki:
- reset stylów dla xhtml http://meyerweb.com/eric/tools/css/reset/
- reset stylów dla html5 http://html5doctor.com/html-5-reset-stylesheet/
Link do wypowiedziLink

konto usunięte

Temat: Różny wygląd w różnych przeglądarkach

Jak korzystam z http://html5boilerplate.com/
W paczce masz nie tylko style, ale i wszystkie pliki potrzebne do rozpoczecia nowego projektu. Doskonala sprawa.
Link do wypowiedziLink
Konrad Gos

Konrad Gos jestem jaki jestem

Temat: Różny wygląd w różnych przeglądarkach

Dziękuję za pomoc
Gratuluję wiedzy
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj