ugrás a tartalomhoz

CSS div formázási probléma IE alatt

montyx · 2008. Júl. 24. (Cs), 20.22
Helló Bölcsek!

Sokat tanultam már itt, de ehhez hasonlóval még nem találkoztam. Ezért kérem a segítségeteket.

Éppen egy theme-t készítenék, egy már működő php motoromhoz. Minden nagyon szép nagyon jó, csak a kedvenc böngészőm újra közbeszólt. IE alatt a következő html résznél nem értelmezi konténerként a pageheader DIV-et valamiért. És szétcsúszik a design.
  1. <div id="pageheader">  
  2.             <div id="introimage">  
  3.               <img height="120" width="230" alt="" src="./img/intro.jpg" />  
  4.             </div>  
  5.             <div id="intro">  
  6.               <div>  
  7.                 <h1>valami Bemutatkozás, és Egyebek</h1>  
  8.                 <p class="quote">  
  9.                   <span>"Ide kellene idézet!!! Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla"</span>  
  10.                   <br/>  
  11.                   Meg hogy honnan van! XD  
  12.                 </p>  
  13.               </div>  
  14.             </div>  
  15.             <div id="pagetools">  
  16.               <ul>  
  17.                 <li>  
  18.                   <a id="english" lang="en" href="#">in English</a>  
  19.                 </li>  
  20.                 <li>  
  21.                   <a id="deutsch" lang="de" href="#">auf Deutsch</a>  
  22.                 </li>  
  23.               </ul>  
  24.               <p>  
  25.                 <a href="#">Kapcsolat</a>  
  26.               </p>  
  27.             </div>  
  28.           </div>  
A hozzátartozó .css rész a következő:
  1. div#pageHeader {  
  2. background:#F0F0EE none repeat scroll 0% 0%;  
  3. font-size:1.2em;  
  4. overflow:hidden;  
  5. padding:1em 0pt;  
  6. }  
  7.   
  8.   
  9. div#pageHeader div#introImage {  
  10. float:left;  
  11. overflow:hidden;  
  12. width:25.5%;  
  13. }  
  14.   
  15. div#pageHeader div#introImage img {  
  16. display:block;  
  17. margin-left:0.8em;  
  18. }  
  19.   
  20. div#pageHeader div#intro {  
  21. float:left;  
  22. width:50%;  
  23. }  
  24.   
  25. div#pageHeader div#intro div {  
  26. line-height:1.3;  
  27. margin-left:2em;  
  28. }  
  29.   
  30. div#pageHeader div#intro span {  
  31. font-family:georgia,serif;  
  32. font-style:italic;  
  33. font-weight:normal;  
  34. }  
  35.   
  36. div#pageHeader div#intro span {  
  37. display:inline;  
  38. }  
  39.   
  40. div#pageHeader div#pageTools {  
  41. float:left;  
  42. width:24.5%;  
  43. }  
  44.   
  45. div#pageHeader div#pageTools p,  
  46. div#pageHeader div#pageTools ul {  
  47. padding-right:1em;  
  48. }  
  49.   
  50. div#pageHeader div#pageTools ul,  
  51. div#pageHeader div#pageTools p {  
  52. margin-left:1em;  
  53. }  
  54.   
  55. div#pageTools ul {  
  56. list-style-type:none;  
  57. padding:0.1em 0pt 0pt;  
  58. }  
  59.   
  60. div#pageTools ul li {  
  61. margin-bottom:0.35em;  
  62. }  
  63.   
  64. a#english {  
  65. background:transparent url(../img/kellkep.gif) no-repeat scroll left top;  
  66. padding:0.1em 0pt 0pt 20px;  
  67. white-space:nowrap;  
  68. }  
  69.   
  70. a#deutsch {  
  71. background:transparent url(../img/kellkep.gif) no-repeat scroll left top;  
  72. padding:0.1em 0pt 0pt 20px;  
  73. white-space:nowrap;  
  74. }  
Az oldalt felraktam ide, hogy működés közben is meg tudjátok nézni mire gondolok. Remélem tudtok segíteni mert meghülyülök se tudok rájönni, hogy mi a baj. ​

Előre is köszönöm:

Monty
‹ AJAX YUI drag and drop CSS divek - float problema ? ›
 ■
1

mas a pelda

toro · 2008. Júl. 24. (Cs), 21.06
Mas van a linken mint itt, ezt itt fenn at se nezten...

A neten levo cuccban van egy max-width a div#page-ben, amit az IE6 nem kezel le, ezert dobja szet az egesz oldal szelessegre
2

fenebe

montyx · 2008. Júl. 25. (P), 14.34
Igazad van. Bocsi. :(
Nem jól írtam le a problémámat.
Szóval az a gondom, hogy az idézet mögött a div nem szürke. A szélességproblémát meg tudom oldani, azzal nincs gond. De nem bírok rájönni, hogy ott miért nem lesz szürke, és az angol meg a német link miért alá kerül, és miért nem mellé IE alatt. :(
3

haslayout

yaanno · 2008. Júl. 26. (Szo), 01.00
az a legkevesebb, hogy adsz doctype-ot! azután szerintem nézz utána az IE alatti haslayout problémának, érdemes, továbá IE web developer toolbarral is szerelkezz fel, ingyenes; két tipp a megoldáshoz:
  1. #content, #pageheader { height: 1% }  
vagy
  1. #content, #pageheader { zoom: 1 }  
tedd kondiconális kommentbe, hogy csak az IE lássa
4

DOCTYPE

montyx · 2008. Júl. 26. (Szo), 17.28
Köszönöm a tippeket, már nyomozok is a hashlayout és a két css tipped után.

A doctype meglett ami kellene, de az még jobban szétzilálja a header részt.
Közben sajnos a ingyentárhely vacakol, szóval ide raktam fel a dolgokat:
DOCTYPE-pal
DOCTYPE nélkül.

Elképzelésem sincs miért? Az xhtml szabvány szerint dolgoztam pedig! :S
5

Valid

montyx · 2008. Júl. 26. (Szo), 18.03
A w3 validálás szerint tökéletes a doctype-os változat. Akkor miért nem működik??? :(
7

doctype + még egy float

yaanno · 2008. Júl. 26. (Szo), 21.09
doctype az KELL, nem opcionális :) most nem a szabvánnyal jönnék elő, hanem azza, hogy ha nem adsz doctype-ot, akkor később magadat fogod megszívatni...

az #introimage divnek is kellene egy float:left, az rendbeteszi a head részt és nálam pl IE7 / FF3 alatt is ugyanúgy néz ki
8

doctype

montyx · 2008. Júl. 27. (V), 10.36
  1. div#pageheader div#introImage {  
  2.     float:left;  
  3.     overflow:hidden;  
  4.     width:25.5%;  
  5. }  
Elvileg van neki.

A doctype megválasztásáról hol lehet olvasni? Mert én elvileg az xml szabvány szerint próbáltam dolgozni! :S
És az egész széthullik, ha beírom, minden böngészőben. :S
9

doctype olvasnivaló

yaanno · 2008. Júl. 27. (V), 12.22
Szerintem ezt nézd meg mindenképpen. A szétesés miben jelentkezik? "Sajnos" IE6 már nincs a gépemen, ott esik szét?
6

:(

montyx · 2008. Júl. 26. (Szo), 19.08
Nem nyert sajnos a két css változtatás sem. :(
10

KÉSZ!

montyx · 2008. Júl. 27. (V), 13.17
Na sikerült megoldani. Két gond volt. Az egyik a DOCTYPE hiánya, a másik, meg hogy a DT megadása után érzékeny lett a kis- nagy betűkre, ami a cssben el volt írva 3 helyen.