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:
  1. body {  
  2.     margin: 5px;  
  3.     background-color: #0000;  
  4.     /* background-image: url(../styleImages/backgrounds/pageBg.gif); */  
  5.     background-repeat: repeat-x;  
  6.     background-position: top;  
  7.     padding-right: 5px;  
  8. }  
  9. #pageSurround {  
  10.     width: 99%;  
  11.     margin: 0px auto;  
  12.     padding: 5px;  
  13.   
  14. }  
  15. #topHeader {  
  16.     position: right;  
  17.     text-align: right;  
  18.     height: 73px;  
  19.     padding-right: 20px;  
  20.     padding-top: 50px;    
  21.     width: auto;      
  22.     margin: 0px auto;  
  23.     /* SKIN VARIABLE IS cAsE SeNsItIvE */  
  24.     background-image: url(../styleImages/backgrounds/fejlec_ismetlodo.gif);  
  25.     background-repeat: repeat-x;  
  26.     background-position: top;  
  27. }  
  28. #colHeaderRight {  
  29.     position: left;  
  30.     height:122px;  
  31.     width: 177px;   
  32.     float: right;  
  33.     background-image: url(../styleImages/backgrounds/fejlec_jobb.gif);  
  34.     background-repeat: no-repeat;  
  35. }  
  36. #colHeaderLeft {  
  37.     position: right;  
  38.     height:122px;  
  39.     width: 386px;   
  40.     float: left;  
  41.     background-image: url(../styleImages/backgrounds/fejlec_bal.gif);  
  42.     background-repeat: no-repeat;  
  43. }  
A HTML:
  1. </head>  
  2.     <div id="colHeaderRight"></div>  
  3.     <div id="colHeaderLeft"></div>  
  4.     <div id="topHeader">  
  5.         <div>{SEARCH_FORM}</div>  
  6.     </div>  
  7.     <div>{SITE_DOCS}</div>  
  8. <div id="pageSurround">  
  9.   <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):
  1. #colHeaderRight {    
  2.     _margin-left: -3px;  
  3. }    
  4. #colHeaderLeft {    
  5.     _margin-right: -3px;  
  6. }    
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:)