[CSS]CSS - rozwalanie na różnych przeglądarkach Opcje

[yta]

Witam , mam problem ze stroną .
Otóż 2 elementy rozwalają się na chrome,opera. Przy czym na FF jest wszystko dobrze i za liczo nie mogę dojść co jest nie tak.
Daję screeeny.
Poprawnie jest tak : http://imageshack.us/photo/my-images/845/aktualnosci.jpg/
A na Operze i Chrome wygląda tak : http://imageshack.us/photo/my-images/543/aktualnosci.jpg/

Kod :
Belka - nie podaje bo po co ;p

[CSS] pobierz, plaintext 
 
p.data { text-align:right; font-size:11pt; color:#626262; float:right; margin-top:-345px; font-family:"Arial Narrow"; }
p.naglowek { text-align:left; font-size:14pt; color:#5e5e5e; float:left; margin-top:-345px; text-indent:25px; }
p.tresc { text-align:justify; font-size:10pt; color:#626262; float:left; margin-top:-318px; padding-left:10px; line-height:160%;}
.linia { background:url("./../images/pasekoddzielajacynewsy.png") no-repeat; height:1px; width:635px;  margin-top:-165px; float:left; border:none; margin-left:5px;}
[CSS] pobierz, plaintext 

Ocena serwisu
Poprawnie wygląda tak : http://imageshack.us/photo/my-images/851/ocena.jpg/
A na Operze i Chrome : http://imageshack.us/photo/my-images/24/ocenao.jpg/


kod : (belke nie daję )

[CSS] pobierz, plaintext 
 
.okienko { background:url("./../images/pasekdooceny.png") no-repeat; height:23px; width:261px; float:left; margin-top:30px; margin-left:770px; }
.pasekoceny { background:url("./../images/pasek100.png") no-repeat; height:19px; width:247px; float:left; margin-left:770px; margin-top:-21px; }
.bardzodobry { background:url("./../images/bardzodobry.png") no-repeat; height:17px; width:83px; float:left; margin-top:350px; margin-left:-190px;}
.okienko1 { background:url("./../images/pasekdooceny1.png") no-repeat; height:23px; width:261px; float:left; margin-top:20px; margin-left:770px; }
.pasekoceny2{ background:url("./../images/pasek100-1.png") no-repeat; height:19px; width:247px; float:left; margin-left:770px; margin-top:-21px; }
.dobry { background:url("./../images/dobry.png") no-repeat; height:17px; width:35px; float:left; margin-top:395px; margin-left:-160px;}
.okienko2{ background:url("./../images/pasekdooceny2.png") no-repeat; height:23px; width:261px; float:left; margin-top:20px; margin-left:770px; }
.pasekoceny3{ background:url("./../images/pasek100-2.png") no-repeat; height:19px; width:247px; float:left; margin-left:770px; margin-top:-21px; }
.kiepski { background:url("./../images/kiepski.png") no-repeat; height:17px; width:43px; float:left; margin-top:438px; margin-left:-162px;}
 
[CSS] pobierz, plaintext 

Ten post edytował sakuwbarakushow 27.06.2011, 09:23:10

[lobopol]

Pokaż html, bo co mamy się domyślać jak znaczniki ustawiłeś?

Jak patrzę w css to i w html masz zapewne gigantyczną sieczkę... Czemu p używasz jak divów, na cholerę dodajesz te minusowe marginesy, po diabła te floaty?

Ten post edytował lobopol 26.06.2011, 19:31:52

[yta]

bez wartości - nie szło by w pożądaną stronę
Floaty są do ustawienia elementów.

HTML :

Te akapity z tekstem :

[HTML] pobierz, plaintext 
 
<p class="data"><em>10.12.2011</em></p>
					<p class="naglowek"><em>Dupa Loura Pousi</em></p>
					<p class="tresc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
[HTML] pobierz, plaintext 

Ocena seriwu

[HTML] pobierz, plaintext 
 
<div id="ocena"></div>
							<div class="bardzodobry"></div>
							<div class="dobry"></div>
							<div class="kiepski"></div>
			<div class="okienko"></div>
				<div class="pasekoceny"></div>
			<div class="okienko1"></div>
				<div class="pasekoceny2"></div>	
			<div class="okienko2"></div>
				<div class="pasekoceny3"></div>
 
[HTML] pobierz, plaintext 

Galeria

[HTML] pobierz, plaintext 
 
<div id="galeria"></div>
 
[HTML] pobierz, plaintext 

[lobopol]

Mam takie pytanie, czemu nie zrobiłeś standardowej konstrukcji typu:

[HTML] pobierz, plaintext 
<style>
#banner{background:url() no-repeat; width:x; height:x;}
.news_title div{float:left;width:x}
.news_title .date {width:x;text-align:right}
.news{padding-top:10px;clear:both}
</style>
<div>
<div id="banner"></div>
<div class="news">
 <div class="news_title">
  <div>tytuł</div>
  <div class="date">data</div>
 </div>
 <div>
  tu treść
 </div>
</div>
 
</div>
[HTML] pobierz, plaintext 

minusowe marginesy są całkowicie zbędne w tym wypadku sprawdź walidatorem czy wszystkie tagi masz pozamykane

[yta]

Sprawdziłem walidatorem CSS i HTML i :

Gratulacje! Nie znaleziono żadnych błędów.

Minusowe marginesy nie powinny mieć na to wpływu ..
Konstrukcję trochę inną mam gdyż prócz tego mam takze sporo innych elementów które dodałem do strony

Ej galeria jest dobrze na chrome ;/
na serwerze którym testowałem jest coś nie tak z tymi reklamami i wypchało mi to diva ;p
ale czego się spodziewać po free serwerze.

także problem to odległość akapitów do belki
i te z oceną

Pół nocy z tym siedziałem i nie doszedłem do tego co jest nie tak ...
Może ktoś mi powiedzieć co schrzaniłem ? to nie wina CSS ani XHTML
plik css jest poprawny jako css 2.1
A xhtml 1.0 także ..

I css to za pierwszym podejściem ;] wiedziałem co pisze ,bo raczej ostrzeżenie typu " nazwy czcionek z spacja trzeba dawać w cydzysłowy" nie może wpłynąć na sposób wyświetlenia elementów strony ...

Problem rozwiązany, dzięki za nie pomoc

Ten post edytował sakuwbarakushow 26.06.2011, 20:06:48

[Magic WWW]

Wiesz co, w CSS przewidzieli taką sytuację i stworzyli po to instrukcję warunkową. Przykład użycia:

Kod

<!--[if condition]> HTML <![endif]-->

Kod oczywiście w tagu <head>. Patrząc po twoim kodzie jesteś ciut zielony jeszcze w CSS ale Ci kilka rzeczy podpowiem

Kod

#element {
font-size:11pt;
font-family:"Arial Narrow";
}

Mimo iż działa poprawnie to za optymalne to nie jest Teraz mój kod po przerobieniu powyższego.

Kod

#element {
font: 11pt "Arial Narrow"
}

W tych okienkach praktycznie używasz wszędzie float: left, zrób coś takiego i masz bardzo proste rozwiązanie swojego problemu i także jest optymalniejsze.

Kod

#belka * {
float: left
}

#belka to element w którym znajdują się te wszystkie okienka.

Pozdrawiam Dawid