[CSS] IE und Firefox unterschied

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [CSS] IE und Firefox unterschied

    Hi, ich habe ein Test-Layout entworfen, jedoch habe ich Probleme mit der Browserkompatibilität. Bei Firefox sieht alles super aus, jedoch mag IE mein Layout nicht (wie immer). Hoffe mir kann jemand helfen.

    Das layout kann man hier sehen: http://jandinger.ja.funpic.de/layout/

    layout.css:

    Quellcode

    1. #header {
    2. height: 80px;
    3. left: 16px;
    4. margin: 10px;
    5. background-color: #ffff00;
    6. }
    8. #left {
    9. position: absolute;
    10. top: 100px;
    11. left: 16px;
    12. width: 204px;
    13. height: 300px;
    14. background-color: #FFFFFF;
    15. }
    17. #right {
    18. position: absolute;
    19. top: 100px;
    20. right: 16px;
    21. width: 160px;
    22. height: 300px;
    23. background-color: #ffff00;
    24. background-color: #FFFFFF;
    25. border: 1px solid #000000;
    26. border-style: dotted;
    27. border-right-color: #000000;
    28. border-bottom-color: #000000;
    29. border-left-color: #000000;
    30. border-top-color: #000000;
    31. }
    33. #content {
    34. width: auto;
    35. margin: 0px 224px;
    36. background-color: #FFFFFF;
    37. border: 1px solid #000000;
    38. border-style: dotted;
    39. border-right-color: #000000;
    40. border-bottom-color: #000000;
    41. border-left-color: #000000;
    42. border-top-color: #000000;
    43. }
    Alles anzeigen


    menu.css (habe ich nicht alleine gemacht, da hatte ich etwas Hilfe)

    Quellcode

    1. /* Root = Vertical, Secondary = Vertical */
    2. ul#navmenu,
    3. ul#navmenu li,
    4. ul#navmenu ul {
    5. margin: 0;
    6. #border: 0 none;
    7. border: 1px solid#FFF;
    8. border-collapse: separate;
    9. padding: 0;
    10. width: 100px; /*For KHTML*/
    11. list-style: none;
    12. }
    14. ul#navmenu:after /*From IE 7 lack of compliance*/{
    15. clear: both;
    16. display: block;
    17. font: 1px/0px serif;
    18. content: ".";
    19. height: 0;
    20. visibility: hidden;
    21. }
    23. ul#navmenu li {
    24. float: left; /*For IE 7 lack of compliance*/
    25. display: block !important; /*For GOOD browsers*/
    26. display: inline; /*For IE*/
    27. position: relative;
    28. }
    30. /* Root Menu */
    31. ul#navmenu a {
    32. border: 1px solid #FFF;
    33. border-style: dotted;
    34. #border-collapse: separate;
    35. border-right-color: #000000;
    36. border-bottom-color: #000000;
    37. border-left-color: #000000;
    38. border-top-color: #000000;
    39. padding: 0 6px;
    40. display: block;
    41. background: #FFFFFF;
    42. color: #666;
    43. font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
    44. text-decoration: none;
    45. height: auto !important;
    46. height: 1%; /*For IE*/
    47. }
    49. /* Root Menu Hover Persistence */
    50. ul#navmenu a:hover,
    51. ul#navmenu li:hover a,
    52. ul#navmenu li.iehover a {
    53. background: #CCC;
    54. color: #FFF;
    55. }
    57. /* 2nd Menu */
    58. ul#navmenu li:hover li a,
    59. ul#navmenu li.iehover li a {
    60. background: #FFFFFF;
    61. color: #666;
    62. }
    64. /* 2nd Menu Hover Persistence */
    65. ul#navmenu li:hover li a:hover,
    66. ul#navmenu li:hover li:hover a,
    67. ul#navmenu li.iehover li a:hover,
    68. ul#navmenu li.iehover li.iehover a {
    69. background: #CCC;
    70. color: #FFF;
    71. }
    73. /* 3rd Menu */
    74. ul#navmenu li:hover li:hover li a,
    75. ul#navmenu li.iehover li.iehover li a {
    76. background: #FFFFFF;
    77. color: #666;
    78. }
    80. /* 3rd Menu Hover Persistence */
    81. ul#navmenu li:hover li:hover li a:hover,
    82. ul#navmenu li:hover li:hover li:hover a,
    83. ul#navmenu li.iehover li.iehover li a:hover,
    84. ul#navmenu li.iehover li.iehover li.iehover a {
    85. background: #CCC;
    86. color: #FFF;
    87. }
    89. /* 4th Menu */
    90. ul#navmenu li:hover li:hover li:hover li a,
    91. ul#navmenu li.iehover li.iehover li.iehover li a {
    92. background: #EEE;
    93. color: #666;
    94. }
    96. /* 4th Menu Hover */
    97. ul#navmenu li:hover li:hover li:hover li a:hover,
    98. ul#navmenu li.iehover li.iehover li.iehover li a:hover {
    99. background: #CCC;
    100. color: #FFF;
    101. }
    103. ul#navmenu ul,
    104. ul#navmenu ul ul,
    105. ul#navmenu ul ul ul {
    106. display: none;
    107. position: absolute;
    108. top: 0;
    109. left: 100px;
    110. }
    112. /* Do Not Move - Must Come Before display:block for Gecko */
    113. ul#navmenu li:hover ul ul,
    114. ul#navmenu li:hover ul ul ul,
    115. ul#navmenu li.iehover ul ul,
    116. ul#navmenu li.iehover ul ul ul {
    117. display: none;
    118. }
    120. ul#navmenu li:hover ul,
    121. ul#navmenu ul li:hover ul,
    122. ul#navmenu ul ul li:hover ul,
    123. ul#navmenu li.iehover ul,
    124. ul#navmenu ul li.iehover ul,
    125. ul#navmenu ul ul li.iehover ul {
    126. display: block;
    127. }
    Alles anzeigen


    menu.js

    Quellcode

    1. navHover = function() {
    2. var lis = document.getElementById("navmenu").getElementsByTagName("LI");
    3. for (var i=0; i<lis.length; i++) {
    4. lis[i].onmouseover=function() {
    5. this.className+=" iehover";
    6. }
    7. lis[i].onmouseout=function() {
    8. this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    9. }
    10. }
    11. }
    12. if (window.attachEvent) window.attachEvent("onload", navHover);
    Alles anzeigen


    Ich denke mal das sind mehr oder wenig nur kleinigkeiten, jedoch habe ich nicht so die Ahnung was Browserkompatibilität angeht.

    Danke für die Hilfe.

    so long

    JFoX
    Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert, der letzte Netzknoten kommerzialisiert, die letzte Newsgroup moderiert wird, werdet Ihr merken, dass man mit Geld allein nicht programmieren kann.