[CSS] zagniezdzanie div - rozne interpretacje przegladarek

[conip]

Witam wszystkich
jako swiezak w dziedzinie CSS szukam pomocy na tym forum mam nadzieje ze ktos mi jej udzieli

przez jakis czas walczylem z zagniezdzaniem div aby uzyskac taki efekt:



tak jak w IE7 bylo wszystko ok tak w operze i ff juz nie bardzo i mialem cos takiego:



zagniezdzilem to w kodzie tak:

Kod: Zaznacz cały

	<div ><img src="images/gora.jpg" alt="" /></div>
	<div id="srodek">
		<div class="glowne">	
			<div class="menu">
				<div>
					<div class="menu_gora">MENU</div>
					<div class="linki">
						<a href='index.php' >Strona główna</a>
						<a href='oferta.php' >o mnie</a>
						<a href='galeria.php' >Galeria</a>
						
					</div>
					<div><img src="images/menu_dol.jpg" alt="" /></div>
				</div>
			</div>
<div style="position: relative; top:-3px;"><img src="images/dol.jpg" alt="" /></div>		

a caly moj plik css wyglada tak:

Kod: Zaznacz cały

/* CSS Document */

body{
	background:url('images/bg.gif') repeat-x #2e447d;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	width: auto;
}

#pds{
	position:relative;
	width:801px;
	margin:auto;	
}

.flagi{	
	width: 151px;
	padding-left:650px;
}

#srodek{
	background-image:url("images/srodek.jpg");
	background-repeat:repeat-y;	
	width:801px;
	overflow: auto;
	margin-bottom:0px;	
}

.glowne{
	margin-left:5px;
	margin:0px;
	}

.menu{
	float:left;
	width:204px;
	margin-left:30px;	
}

.glowne_prawe{	
	float:right;
	width:550px;
}

.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 20px 5px 10px;
	text-align:justify;
	position: relative;
}

na innym forum doczytalem podobny temat i do klasy srodek dodalem wlasciwosc

Kod: Zaznacz cały

overflow: auto;

juz bylo wszystko ok (tak myslalem) pod wszsytkimi przegladarkami a jednak klikajac np 7 razy pod rzad na link strona glowna uzyskuje taki efekt i o dziwo tylko w IE (dzieje sie to dosyc rzadko i to raczej przypadkowo)


wiec znow mam rozbierznosc miedzy FF, Opera a IE7.
czy jest jakis sposob zeby to obejsc? juz zaczalem sobie wlosy wyrywac glowkujac dlaczego sa takie rozbierznosci.

z gory dzieki za podpowiedzi

pozdrawiam

[conip]

ok poki co udalo mi sie poprawic ze w IE7 jest ok a w operze i ff prawie

efekt jest taki ze pod opera i ff pokazuje sie maly niebieski pasek pod divem z obrazkiem gornego luku:



czy ktos moze mi pomoc go weliminowac? probowlaem margin:0; w klasie srodek- nic
w divach sasiadujacych tez nic.

baaaardzo prosze o pomoc bo juz wlosy zaczalem sobie wyrywac z nerwow i podirytowania

pozdrawiam

[conip]

ok prosze o zamkniecie tematu

rozwiazalem 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