[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:

(IMG:http://thenut.eti.pg.gda.pl/~coni_p/css/srodek.jpg)

pokaze moze juz konkretnie

chce uzyskac taki efekt (to mam w ie):

(IMG:http://thenut.eti.pg.gda.pl/~coni_p/css/z.JPG)

niestety pod ff i opera mam tak:

(IMG:http://thenut.eti.pg.gda.pl/~coni_p/css/bez.JPG)

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 (IMG:http://forum.php.pl/style_emoticons/default/wacko.gif)

pozdrawiam serdecznie i dzieki

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

[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: (IMG:http://kret.jogger.pl/files/bazowa.gif)

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

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