ugrás a tartalomhoz

IE6, CSS, 2 oszlop, +1 pixel, de honnan?

coder · 2006. Júl. 24. (H), 18.51
A téma mindent elárul azt hiszem. Egyszerűen nem tudok rájönni, hogy az alábbi kódrészletben honnan keletkezik Exproller 6-tal +1 pixel rejtélyes margó.

Alapállapotban nem túl számottevő, kicsit beljebb csúszik a szöveg addig, amíg a nav (sárga) rész tart, a screenshoton a "justo" kezdetű sor még beljebb van, az "arcus" kezdetű viszont már jó.

Viszont ahogy kikommentezem a css-ben a "height: 1%;" (#content-en belül) részt jobban láthatóvá válik a bug. Az egész content blokk +1 pixellel elcsúszik (ss). Ha meg a h1-nek 100% szélességet adok (width: 100%;) az egész content blokk lecsúszik a nav aljáig (ss).

Hogy lehet ezt elegánsan, a meglévő kód teljes átalakítása nélkül kiküszöbölni? Szükégem lenne rá hogy két egymás mellett lévő oszlopnak az egyiknek relatív (százalékos) magassága legyen.

A hozzászolásokat előre is köszönöm.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3.   
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu">  
  5. <head>  
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.   <title></title>  
  8.   <style type="text/css" media="screen">  
  9.   /*<![CDATA[*/ 
  10.   #nav { 
  11.     width: 220px; 
  12.     float: left; 
  13.     background: yellow; 
  14.   } 
  15.  
  16.   #content { 
  17.     /*height: 1%;*/ 
  18.     margin-left: 220px; 
  19.     background: green; 
  20.     color: white; 
  21.   } 
  22.  
  23.   h1 { 
  24.     background: blue; 
  25.     /*width: 100%;*/ 
  26.     margin: 0; 
  27.     padding: 0; 
  28.   } 
  29.   /*]]>*/  
  30.   </style>  
  31. </head>  
  32.   
  33. <body>  
  34.   
  35.     <div id="nav">  
  36.   
  37.       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porttitor  
  38.       congue metus. Mauris varius. Donec nec odio. Donec sagittis velit eu quam.  
  39.       Sed facilisis pharetra mauris. Aliquam lacinia, pede et varius elementum,  
  40.       dui neque iaculis risus, sit amet commodo ipsum eros eu magna. Nulla  
  41.       adipiscing sapien a neque.</p>  
  42.   
  43.     </div>  
  44.   
  45.     <div id="content">  
  46.       <h1>head</h1>  
  47.   
  48.       <p>Quisque pellentesque, turpis nec scelerisque gravida, turpis urna  
  49.       sagittis erat, dapibus blandit velit quam at turpis. Ut urna mauris,  
  50.       molestie vel, mattis nec, eleifend in, diam. Vestibulum nonummy facilisis  
  51.       augue. Mauris odio. Curabitur ut leo nec felis convallis condimentum.  
  52.       Maecenas lacinia tincidunt odio. Pellentesque fermentum justo vel metus  
  53.       congue mollis. Duis a pede id arcu vulputate cursus. Aliquam est. Nunc  
  54.       nisl libero, lobortis at, eleifend vitae, tincidunt eu, leo. In nunc.  
  55.       Nullam mollis vehicula nunc. Lorem ipsum dolor sit amet, consectetuer  
  56.       adipiscing elit.</p>  
  57.   
  58.       <h1>head</h1>  
  59.   
  60.       <p>További szöveg...</p>  
  61.     </div>  
  62.   
  63. </body>  
  64. </html>  
‹ IE-ben nem lehet kattintani a linkre Submit kép felirat akkor is, ha nem jelenik meg a kép ›
 ■
1

3px bug

Jano · 2006. Júl. 24. (H), 19.03
Valószínű ez lesz:
The IE Three Pixel Text-Jog
2

Ezaz!

coder · 2006. Júl. 24. (H), 19.32
Köszi! Pont most akartam írni, hogy valójában 3pixel az az 1pixel (csak így nagy felbontásban benéztem), aztán így hogy 3pixelre kerestem meg is találtam ráadásul pont ezt! :)
Szóval a megoldás: #content-nek 1% height, és -3px margó, mindezt úgy, hogy csak IE/WIN lássa. siralmas...

Csak az archívum kedvéért, ezt kell beszúrni a css aljára mondjuk:
  1. /* \*/  
  2. * html #content {  
  3.   height: 1%;  
  4.   margin-left: 217px;  
  5. }  
  6.   
  7. * html #nav {  
  8.   margin-right: -3px;  
  9. }  
  10. */