[CSS]rózne wyglądy.. Opcje

[Michał90]

Witam,
Dlaczego to jest inaczej pod inną przeglądarką. Jak zrobić, żeby było to tak jak na IE ?

[HTML] pobierz, plaintext 
#logotl{
	background-image : url('images/logotl.gif');
	background-repeat : repeat -x;
	height : 163px;
	margin : 0px 0px 0px 0px;
	width : auto;
}
#logo{
	background-image : url('images/logo.gif');
	background-repeat : repeat -x;
	height : 163px;
	margin : 0px 0px 0px 0px;
	width : 276px;
}
 
#str{
	background-image : url('images/st.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 108px;
}
#grafika{
	background-image : url('images/gr.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 57px;
}
#inne{
	background-image : url('images/inne.gif');
	height : 20px;
	margin : 0px 5px 0px 0px;
	float:right;
	width : 79px;
}
#kontakt{
	background-image : url('images/kontakt.gif');
	height : 20px;
	margin : 0px 20px 0px 0px;
	float:right;
	width : 56px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id = "logotl"><div id = "logo"></div>
<div id = "kontakt"></div>
<div id = "inne"></div>
<div id = "grafika"></div>
<div id = "str"></div>
</div>
[HTML] pobierz, plaintext 

jestem początkującym w css

Pozdrawiam

[no_face]

Tylko dlatego to wyglada inaczej, gdyz przegladarki na wlasny sposob interpretujac kod. By wygladalo to podobnie stosuje sie rozne sztuczki, ktorych zastosowanie nie powinno miec miejsca, wszystkie przegladarki wg mnie powinny reprezentowac b. podobnie stronny www.

[jinchuriki]

Musiał byś zrobić osobne style do IE i FF.

[Gryf]

poco osobne style?
wystarczy dodać br ze właściwością clear ustawioną na both
po #str
tak to jest gdy stosuje się float (a ten efekt wynika ze specyfikacji)

[PawelC]

ja w takim wypadku stosuje dla mozilli normalnie np width:300px; a dla IE *width:280px; oczywiście w tym samym pliku css, bo jakbym dał 300px dla IE to za duże by było. Z tą * tylko IE interpretuje

Ten post edytował ExPlOiT 29.03.2009, 12:34:50

[Michał90]

To czym zamienić float ?
Jak ma wyglądać ten kod, żeby występował ten sam efekt na każdej przeglądarce?

[hiszpanespaniol]

elementy nawigacyjne to nie są div'y lecz odnośniki.
Stwórz listę <ul> odnośników, tylko jej nadaj "id". Kolejnym pozycjom listy nadaj klasę (czyli pozamieniaj np #kontakt na .kontakt) i wtedy:

[HTML] pobierz, plaintext 
#menu {
float: right;
margin: 0;
height: 20px;
clear: both;
padding: 0 20px 0 0;
list-style-type: none;
}
#menu li {
margin: 0;
height: 20px;
float: left; /*żebyś w kodzie nie musiał pisać od końca */
}
#menu li a {
display: block;
height: 100%;
float: left; /* to dla ie6 */;
text-align: left;
text-indent: -999em;
background-position: left top;
background-repeat: no-repeat;
}
[HTML] pobierz, plaintext 

jeśli lelementy są floatowane, to szerokości już nie mają na 100%, każdy ma "auto". teraz używasz tych klas które zrobiłeś z "id" i definiujesz w nich tylko szerokość elementu i obrazek tła.

[HTML] pobierz, plaintext 
li.kontakt a {
background-image: url('images/kontakt.gif');
width: 56px;
}
[HTML] pobierz, plaintext 

jedyne co może się inaczej wyświetlać pod ie i pod Fx, to paddingi i marginesy całej listy. Poczytaj o odpowiednich deklaracjach typu dokumentu i wtedy będzie git wszędzie.

Nie ucz się niewłaściwego stosowania znaczników. Teraz (w Twoim kodzie) jak wyłączysz css, to menu znika, a powinno być czytelne i dostępne.

edit:
jeszcze osobną kwestią pozostaje to, czy jest sens tworzyć obrazki jeśli jest na nich właściwie tylko tekst.

Ten post edytował hiszpanespaniol 29.03.2009, 14:53:57

[Michał90]

Czy będzie ktoś tak miły, uprzejmy i mi sklei laya?

Pozdr.

[hiszpanespaniol]

ja mogę bardzo chętnie, oczywiście nie za darmo. odezwij się na pw jeśli jesteś zainteresowany. Ewentualnie napisz post na giełdzie, ktoś się zainteresuje.