ugrás a tartalomhoz

IE rosszul kezeli a margin-t

Anonymous · 2006. Jan. 18. (Sze), 11.11
Sziasztok!

Van egy ilyenem:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  4. <head>  
  5.   
  6. <title>Home</title>  
  7. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />  
  8. <meta name="author" content="Johnny" />  
  9. <meta name="robots" content="all" />  
  10. <meta name="description" content="" />  
  11. <meta name="keywords" content="" />  
  12.   
  13. <style type="text/css" media="all">  
  14.     @import "style/layout.css";  
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19.     <div id="wrapper">  
  20.         <div id="header">  
  21.         <div id="nav"></div>  
  22.         </div>  
  23.     </div>  
  24. </body>  
  25. </html>  
Hozzá a CSS pedig:
  1. *  
  2. {  
  3.     margin: 0;  
  4.     padding: 0;  
  5. }  
  6.   
  7. a:link  
  8. {  
  9.     color: #3C78B5;  
  10. }  
  11.   
  12. a:visited  
  13. {  
  14.     color: #9F65B2;  
  15. }  
  16.   
  17. a:hover  
  18. {  
  19.     text-decoration: none;  
  20. }  
  21.   
  22. body  
  23. {  
  24.     background: #ccc;  
  25.     color: #4C4C4C;  
  26.     line-height: 1.4em;  
  27.     font-family: "Arial", Helvetica, sans-serif;  
  28.     font-size: 85%;  
  29.     text-align: center;  
  30. }  
  31.   
  32.   
  33. #wrapper  
  34. {  
  35.     width: 780px;  
  36.     height: 100%;  
  37.     margin: 0 auto;  
  38.     text-align:left;  
  39. }  
  40.   
  41.   
  42. /* --- Header layout --- */  
  43.   
  44. #header   
  45. {  
  46.     width: 780px;  
  47.     height: 200px;  
  48.     background: #fff url(images/header.gif) no-repeat bottom left;  
  49. }  
  50.   
  51. #nav  
  52. {  
  53.     float: left;  
  54.     width: 200px;  
  55.     height: 160px;  
  56.     margin: 0px;  
  57.     margin-left: 30px;  
  58.     margin-top: 40px;  
  59.     background-color: #666;  
  60. }  
A gondom a következő: firefox-ban jól jeleníti meg az oldalt, viszont ie-ben a margo joval arrébb kerül. Mi lehet a hiba?
‹ Fix méretű div aljára pozícionálás input text-ek hozzáadása frissítés nélkül ›
 ■
1

dupla margó?

Anonymous · 2006. Jan. 18. (Sze), 11.22
van egy olyan hiba ie-ben, hogy a floatolt divek bal margóját megduplázza. bővebben olvashatsz erről: http://www.positioniseverything.net/explorer/doubled-margin.html
ott megoldásként azt írják, hogy a divhez írjunk még egy display: inline-t is, nálad ez:
  1. #nav  
  2. {  
  3.     float: left;  
  4.     width: 200px;  
  5.     height: 160px;  
  6.     margin: 0px;  
  7.     margin-left: 30px;  
  8.     margin-top: 40px;  
  9.     background-color: #666;  
  10.     display: inline; /* ez a trükk */  
  11. }  
ha másban viszont zavar, akkor rakhatod ie conditional commentbe is.

gex
2

Köszönöm, így műxik

Anonymous · 2006. Jan. 18. (Sze), 11.26
Köszi szépen, ez a megoldás!
3

Következő probléma

Anonymous · 2006. Jan. 18. (Sze), 11.41
A következő gondom az lenne, hogy adott egy div, amelynek az aljára kéne igazítanom egy másikat, amelyben a menu lesz. Erre valami ötlet?
4

nincs köze a marginhoz

Hojtsy Gábor · 2006. Jan. 18. (Sze), 11.52
Ennek nincs köze a marginhoz, más téma.