ugrás a tartalomhoz

IE div pozícionálás hiba

manuelc · 2007. Dec. 11. (K), 12.06
Helló!


Egy fejlécet rakok össze ami balró-jobbról záróképes középen pedig ismétlődő hátteres, mozillában, safariban stb. tökéletes, viszont az Explorer rak egy csúnya hézagot a fejléc div-ek közé. A bal oldali fejléc és az ismétlődő fejléc közé valamint ugyanez jobb oldalt.

Tudtok adni tanácsot, hogyan oldhatom meg a problémát?
oldal: http://www.epitoanyag.net/index.php

A CSS:
body {
	margin: 5px;
	background-color: #0000;
	/* background-image: url(../styleImages/backgrounds/pageBg.gif); */
	background-repeat: repeat-x;
	background-position: top;
	padding-right: 5px;
}
#pageSurround {
	width: 99%;
	margin: 0px auto;
	padding: 5px;

}
#topHeader {
	position: right;
	text-align: right;
	height: 73px;
	padding-right: 20px;
	padding-top: 50px;	
	width: auto;	
	margin: 0px auto;
	/* SKIN VARIABLE IS cAsE SeNsItIvE */
	background-image: url(../styleImages/backgrounds/fejlec_ismetlodo.gif);
	background-repeat: repeat-x;
	background-position: top;
}
#colHeaderRight {
	position: left;
	height:122px;
	width: 177px; 
	float: right;
	background-image: url(../styleImages/backgrounds/fejlec_jobb.gif);
	background-repeat: no-repeat;
}
#colHeaderLeft {
	position: right;
	height:122px;
	width: 386px; 
	float: left;
	background-image: url(../styleImages/backgrounds/fejlec_bal.gif);
	background-repeat: no-repeat;
}
A HTML:
</head>
	<div id="colHeaderRight"></div>
	<div id="colHeaderLeft"></div>
	<div id="topHeader">
		<div>{SEARCH_FORM}</div>
	</div>
	<div>{SITE_DOCS}</div>
<div id="pageSurround">
  <div>...
Köszönöm a segítséget!
‹ Ismétlődő háttér problémája Image Area szövegbuboréka ›
 ■
1

spam

gex · 2007. Dec. 11. (K), 13.23
egy problémát elég egyszer beküldeni...
2

google: 3px

Fraki · 2007. Dec. 11. (K), 19.47
A position: left egy hülyeség. (Ez a "hátha talál"-programozási minta.)

CSS-t meg HTML-t ide bekopizni még szerkesztett formában is fölösleges és értelmetlen. (De ez legalább szépen van formázva.)

Amit láthatunk, az a 3px gap-hiba.

A többi le van írva az oldalon, a te esetedben a legegyszerűbb megoldás (erre egy kis találékonysággal a bug ismerete nélkül is rá lehet jönni):

#colHeaderRight {  
    _margin-left: -3px;
}  
#colHeaderLeft {  
    _margin-right: -3px;
}
Korrigálnod kell még a menüsort is. A ".siteDocs[1]" elem centere szabvány böngészőkben a floatoktól van számítva, IE-ben pedig 100% szélességtől.

Meg tudod kímélni magad ezektől az IE-specifikus korrekcióktól, ha floatolás helyett abszolút pozicionálással (layerezés) oldod meg a feladatot.
3

thx

manuelc · 2007. Dec. 12. (Sze), 10.22
Köszönöm a segítséget és a tanácsokat! Rögtön rámegyek:)