[CSS][HTML]- Problem z pozycjonowaniem bloków Opcje

[Tasilvar]

Witam. Jestem w sumie na etapie wykończenia stronki, jednak testując ją pod kątem różnych przeglądarek zauważyłem, że m.in na chrome element (menu) zostaje inaczej wymarginesowany - inaczej znaczy się - na ekranie wtapia się w sąsiedni bloczek. Próbowałem sprostać to zmianą usustawienia sposobu pozycjonowania ale reszta przeglądarek układała blok "po swojemu" znaczy się wbrew moim oczekiwaniom. Pomyślałem że jedynym skutecznym sposobem byłoby przypisanie warunków z poziomu php co do wyświetlania styli, jednak po głebszym namyśle wydaje się to zbędna operacja która obciążyłaby jedynie stronę.
Podrzucę wam kod fragment kodu css oraz dokumentu html licząc tym na jakieś wskazówki.

Fragment kodu html:

[HTML] pobierz, plaintext 
<div class="menu">
<a href="#" title="Tasjen - Strona Główna" class="a_home"></a>
<a href="#" title="Tasjen - Oferta" class="a_referens"></a>
<a href="#" title="Tasjen - Portfolio" class="a_portfolio"></a>
<a href="#" title="Tasjen - Kontakt" class="a_contact"></a>
</div>
<div class="preview">
<div class="paddinguj_preview">
<div class="projects">
<script type='text/javascript'>document.write('<a href="#"><img src="theme/proj/proj'+rollover(0)+'.jpg" name="view" alt="" class="img_proj"/></a>');</script>
</div>
<div class="comment">Aby w pełni zobaczyć wszystkie moje projekty zapraszam do mojego portfolia :  <a href="#">[portfolio]</a>
</div>
[HTML] pobierz, plaintext 

no i kod css:

[HTML] pobierz, plaintext 
.preview{
	width:600px;
	height:263px;
	float:left;
}
.menu {
        margin:-10px 0px 0px 0px;
	float:left;
	display:inline-block;
	width:528px;
	height:35px;
	overflow:hidden;
	position:static;
	top:-5px;
	}
	.menu a{
	margin:0px 20px 20px 0px;
	}
.a_home {
 
	display:block;
	width:112px;
	height:35px;
	float:left;
	background:url(../theme/images/home.jpg) no-repeat;
}
.a_referens
{
	display:block;
	width:112px;
	height:35px;
	float:left;
	background:url(../theme/images/offerts.jpg) no-repeat;
}
.a_portfolio
{
	display:block;
	width:112px;
	height:35px;
	float:left;
	background:url(../theme/images/portfolio.jpg) no-repeat;
}
.a_contact {
	display:block;
	width:112px;
	height:35px;
	float:left;
	background:url(../theme/images/contact.jpg) no-repeat;
}
.a_contact a {
		display:block;
		padding-top:10px;	
}
.a_contact a:hover {
		display:block;
		padding-top:10px;	
}
.paddinguj_preview
{
	padding:15px 0px 0px 15px;
}
.
 
[HTML] pobierz, plaintext 

Screeny jak to się prezentuje w przypadku chrome i mozilli




Generalnie chcę aby efekt we wszystkich przeglądarkach był jednakowy.

Pozdrawiam.

Ten post edytował Tasilvar 27.11.2010, 22:32:48