[css] forefox a ie - czemu jest rozne, zagniezdzenie divow czyzby powodowalo problemy? Opcje

[conip]

witam serdecznie,
od niedawna zaczalem bawic sie css i mam problem z zagniezdzeniem div (pod ie jest wszystko ok ale pod ff i opera np juz nie)

nie wiem dlaczego w ff nie jest powtarzany w pionie obrazek "srodek.jpg" zaleznie od wysokosci zagniezdzonego diva classy glowne lub menu.

obrazek srodek.jpg to:



pokaze moze juz konkretnie

chce uzyskac taki efekt (to mam w ie):



niestety pod ff i opera mam tak:



zagniezdzilem to w kodzie tak:

[HTML] pobierz, plaintext 
<div id="srodek">
		<div class="glowne">	
			<div class="menu">
				<div>
					<div class="menu_gora">MENU</div>
					<div class="linki">
						<a href="#" >Strona główna</a>
						<a href="#" >o mnie</a>
 
						<a href="#" >Galeria</a>
								</div>
					<div><img src="images/menu_dol.jpg" alt="" /></div>
				</div>
			</div>		
			<div class="glowne_prawe">
				<div class="tresc"><p>tresc strony</p></div>
			</div>
		</div> 
 
  </div>
[HTML] pobierz, plaintext 

a caly moj css wyglada nastepujaca:

[HTML] pobierz, plaintext 
body{
	background:url('images/bg.gif') repeat-x #2e447d;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
 
#pds{
	position:relative;
	width:800px;
	margin:auto;
 
}
 
#flagi{
 
	padding:0px 5px 7px 650px;
}
 
#srodek{
	background-image:url(images/srodek.jpg);
	background-repeat:repeat-y;
	position:relative;
	width:800px;
	height:auto;
	overflow: visible;
}
 
.glowne{
	margin-left:5px;
	position:relative;
	}
 
.menu{
	float:left;
	width:204px;
	margin-left:30px;
}
 
.glowne_prawe{
	position:absolute;
	float:right;
	width:500px;
	top: 46px;
	left: 266px;
}
 
.linki a{
	background:url(images/menu_srodek.jpg) no-repeat;
	color:#822A2A;
	width:180px;
	font-size:13px;
	display:block;
	text-decoration:none;
	padding: 10px 12px 10px 12px;
	text-align:center;
	}
.linki a:hover{
	background:#6678a0;
	color:#fff;
}
 
.menu_gora{
	background:url(images/menu_gora.jpg) no-repeat;
	font-size:16px;
	font-weight:bold;
	padding: 23px 60px 15px 60px;
	text-align:center;
}
 
.menu_srodek{
	background:url(images/menu_srodek.jpg) no-repeat;
}
 
.tresc{
	font-size:13px;
	color:#000;
	padding:6px 35px 5px 10px;
	text-align:justify;
}
[HTML] pobierz, plaintext 

bardzo ale to bardzo prosze o pomoc i porady - juz oczoplasow dostaje od gapienia sie w to i kombinowania czemu to nie dziala

pozdrawiam serdecznie i dzieki

Ten post edytował conip 23.07.2007, 00:35:46

[Zajec]

Temat poruszany tuż przed Twoim: http://forum.php.pl/index.php?showtopic=73433

[conip]

dzięki bardzo za szybka odpowiedz

prawie pomoglo

dodalem overflow:auto do div klasy srodek i efekt jest nastepujacy:



obciete wszystko jest na bank dobrze a skad ta przerwa miedzy divami?
diva klasy glowne chcialem recznie przesunac o kilka pikseli ale wtedy znika caly srodek. Jakies sugestie?

Jeszcze raz dzieki za pomoc.
pozdrawiam serdecznie

poki co rozwiazalem to tak ze przesunalem div klasy srodek 3px w gore
tylko niestety wtedy pojawila sie dokladnie taka sama przerwa na dole przed dolnym zaokregleniem rogow. Wiec i tamten dol przesunalem w gore o 3px.

Wydaje mi sie to jednak nieeleganckie. Mozna to rozwiazac jakoś inaczej?

[Kreton]

dodaj sobie regułe : * { margin: 0px; }

[conip]

nie sadzilem ze bede musial wracac do tego watku ale niestety - i tez sorki ze tak pozno ale mialem baaardzo dlugi wyjazd

tak jak poradzil Zajac we wskazanym linku to pomoglo w firefoxie i operze, ale niestety znow sie sypie w ie
nie zauwazylem tego bo przewaznie ie dobrze interpretuje ale np klikajac na link "strona glowna" 5 razy z rzedu potrafi dac taki efekt:



probowalem inne opcje overflow ale nici
css wlasciwie jest tak jak poprzednio wkleilem i znowu obrazek zamykajacy glowna ramke idzie zaraz pod gorna i wszystko sie sypie

jakies sugestie i tym razem ?

poniewaz jestem swiezak z css - dlaczego rozne przegladarki inaczej to interpretuja? myslalem ze css zostal wprowadzony aby wlasnie to znormalizowac.

pozdrawiam i z gory dzieki za rady

[conip]

Ok wrocilem do etapu sprzed wypowiedzi Kretona czyli ze jest jeden maly pasek na gorze - tak jak radzil Kreton

margin:0

nie zalatwilo sprawy a probowalem go chyba we wszystkich divach, inaczej mozna sie tego pozbyc?
To co mialem poprzednio - przesuniecie o 3px juz terea znie dziala nie wiedziec czemu.

Please pomoz ktos bo osiwieje z podirytowania

pozdrawiam

[bmL]

Może padding: 0
Chociaż nie wydaje mi się, że pomoże

Ten post edytował bmL 15.08.2007, 12:09:51

[conip]

dzieki za odzew na pomoc

padding probowalem - nici

ale udalo mi sie rozwiazac to inaczej

zamiast
<div ><img src="images/gora.jpg" alt="" /></div>

dalem

<div style="width:801px; margin:0px; background:url('images/gora.jpg') no-repeat; height:18px"></div>

i problem rozwiazany

ale mnie to nerwow kosztowalo ze szok - jednak jak sie nei siedzi dlugo w css to pracuje sie z tym makabrycznie ale poczatki wszystkiego sa trudne

pozdrawiam

[1010]

ale jak już opanujesz standardy to tabelki będą dla ciebie masakrycznie

[Kreton]

Powiem Ci, że to co wyświtla Firefox jest jak najbardziej poprawne. Dlatego, że twój obrazek zachowuje się jak element pływający. Tak ma sie zachowywać, identycznie jak tekst. Wszystkie elementy pływające, o ile nie ustawisz w stylach, że są elementami blokowymi, są umieszczane na lini bazowej. Zauważ, że tekst nie jest wyrównywany do samego dołu. Zostawione jest tam miejsce na ogonki literek.

To co ty zrobiłeś, to utworzyłeś element blokowy. Dlatego zachowuje się poprawnie. Rozwiązaniemw wcześniejszego problemu było nadanie obrazkowi

Kod

display: block;

Gotowe.

Lepiej zobrazuje obrazek:

Wcześniej nie podałeś, że w kodzie wcześniej masz obrazek :/

Ten post edytował Kreton 15.08.2007, 20:18:56