ugrás a tartalomhoz

CSS Menü - IE vs. FF

fudom · 2005. Ápr. 8. (P), 20.30
Sziasztok!

Talaltam a neten egy hasonlo kodot mint ez ami itt van csak en egy picit atirtam. az erdekelne hogy vajon miert nem mukodhet FF alatt ?
Ime a kod:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
  2.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >  
  4. <head>  
  1. <style type="text/css">  
  2. .menu {  
  3.     display:none;  
  4.     }  
  5.   
  6.   
  7. .folotte {  
  8.     color:#000;   
  9.     width:81px;   
  10.     height:18px;   
  11.     display:block;   
  12.     background:#dca;   
  13.     border:1px solid #000;   
  14.     text-align:center;   
  15.     float:left;   
  16.     text-decoration:none;   
  17.     font-family:tahoma, vardana, arial, sans-serif; font-size:10px;       
  18.     line-height:18px;   
  19.     overflow:hidden;  
  20.     }  
  21.   
  22. .folotte:hover {  
  23.     height:auto;   
  24.     cursor:pointer;  
  25.     color:#fff;   
  26.     background:#000;  
  27.     }  
  28.   
  29. a.belso, a.belso:visited {  
  30.     display:block;   
  31.     width:81px;   
  32.     border-bottom:1px solid #000;   
  33.     text-decoration:none;   
  34.     color:#000;       
  35.     background:#eee;  
  36.     }  
  37.   
  38. a.belso:hover {  
  39.     background:#add;  
  40.     }  
  41. </style>  
  42.   
  43. <!--[if IE]>  
  44.    <style type="text/css">  
  45.    /*<![CDATA[*/   
  46.   
  47.   
  48. .menu {  
  49.     display:block;   
  50.     position:absolute;  
  51.         margin-left:1px;   
  52.     }  
  53.   
  54. a.kivul, a.kivul:visited {  
  55.     color:#b3daff;   
  56.     width:82px;   
  57.     height:18px;   
  58.     display:block;   
  59.     background:#0a385a;   
  60.     border:1px solid #b3daff;     
  61.     text-align:center;   
  62.     float:left;   
  63.     text-decoration:none;   
  64.     font-family:tahoma, vardana, arial, sans-serif;   
  65.     font-size:10px;   
  66.     line-height:18px;   
  67.     overflow:hidden;  
  68.     }  
  69. a.kivul:hover {  
  70.     color:#b3daff;   
  71.     background:#0a385a;   
  72.     overflow:visible;  
  73.     text-decoration: underline;  
  74.     }  
  75.   
  76. a.kivul:hover table {  
  77.     display:block;   
  78.     background:#0a385a;   
  79.     border-collapse:collapse;  
  80.     }  
  81.   
  82. a.belso, a.belso:visited {  
  83.     display:block;   
  84.     width:78px;   
  85.     height:18px;   
  86.     border-bottom:1px solid #000;   
  87.     text-decoration:none;     
  88.     color:#b3daff;  
  89.     font-family:tahoma, vardana, arial, sans-serif;   
  90.     font-size:10px;   
  91.     text-align:center;  
  92.     background-color:#105182;  
  93.     }  
  94.   
  95. a.belso:hover {  
  96.     background:#b3daff;  
  97.     color: #0053a6;  
  98.     }  
  99.    /*]]>*/  
  100.    </style>  
  101. <![endif]-->  
  1. </head>  
  2.   
  3. <body>  
  4. <div class="menu">  
  5. <a class="kivul" href="#">dadasa1</a>  
  6.   
  7. <a class="kivul" href="#">dadasa2  
  8. </a>  
  9.   
  10. <a class="kivul" href="#">dadasa3  
  11. <table><tr><td>  
  12. <a class="belso" href="#">asd1</a>  
  13. <a class="belso" href="#">asd2</a>  
  14. <a class="belso" href="#">asd3</a>  
  15. <a class="belso" href="#">asd4</a>  
  16. <a class="belso" href="#">asd5</a>  
  17. <a class="belso" href="#">asd6</a>  
  18. <a class="belso" href="#">asd7</a>  
  19. <a class="belso" href="#">asd8</a>  
  20. </td></tr></table>  
  21. </a>  
  22.   
  23. <a class="kivul" href="#">dadasa4  
  24. </a>  
  25.   
  26. <a class="kivul" href="#">dadasa5  
  27. </a>  
  28.   
  29. <a class="kivul" href="#">dadasa6  
  30. <table><tr><td>  
  31. <a class="belso" href="#">asdasd1</a>  
  32. <a class="belso" href="#">asdasd2</a>  
  33. <a class="belso" href="#">asdasd3</a>  
  34. <a class="belso" href="#">asdasd4</a>  
  35. <a class="belso" href="#">asdasd5</a>  
  36. <a class="belso" href="#">asdasd6</a>  
  37. <a class="belso" href="#">asdasd7</a>  
  38. </td></tr></table>  
  39. </a>  
  40.   
  41. <a class="kivul" href="#">dadasa7  
  42. <table><tr><td>  
  43. <a class="belso" href="#">sad1</a>  
  44. <a class="belso" href="#">sad2</a>  
  45. </td></tr>  
  46. </table>  
  47. </a>  
  48. </div>  
  49. </body>  
  50. </html>  
‹ stiliuslap probléma firefox alatt CSS Level 2 használatát nem tudom megoldani Netscape ill. Firefox legújabb verzióival! ›
 ■
1

Nekem így megy.

randomly · 2005. Ápr. 8. (P), 21.37
<style type="text/css">

.menu {
    display:block;
    position:absolute;
        margin-left:1px;
    }

a.kivul, a.kivul:visited {
    color:#b3daff;
    width:82px;
    height:18px;
    display:block;
    background:#0a385a;
    border:1px solid #b3daff;    
    text-align:center;
    float:left;
    text-decoration:none;
    font-family:tahoma, vardana, arial, sans-serif;
    font-size:10px;
    line-height:18px;
    overflow:hidden;
    }
a.kivul:hover {
    color:#b3daff;
    background:#0a385a;
    overflow:visible;
    text-decoration: underline;
    }

a.kivul:hover table {
    display:block;
    background:#0a385a;
    border-collapse:collapse;
    }

a.belso, a.belso:visited {
    display:block;
    width:78px;
    height:18px;
    border-bottom:1px solid #000;
    text-decoration:none;    
    color:#b3daff;
    font-family:tahoma, vardana, arial, sans-serif;
    font-size:10px;
    text-align:center;
    background-color:#105182;
    }

a.belso:hover {
    background:#b3daff;
    color: #0053a6;
    }
   </style>
2

koszi

fudom · 2005. Ápr. 9. (Szo), 15.29
Hali!

Koszi. Van meg egy problemam:
  1. <style type=text/css>   
  2.   
  3. #keret {   
  4. width: 590px;   
  5. height: 270px;   
  6. border: 2px solid black;   
  7. margin-top: 30px;   
  8. margin-left: 0px;   
  9. position: absolute;   
  10. color: white;   
  11. font-weight: bold;   
  12. overflow: auto;   
  13. z-index:1;   
  14. }   
  15.   
  16. #menuhelye {   
  17. width: 590px;   
  18. height: 19px;   
  19. position: absolute;   
  20. border-bottom: 2px solid white;   
  21. margin-left: 180px;   
  22. font-size: 12px;   
  23. color: white;   
  24.   
  25. }   
  26.   
  27. .menu {   
  28. display:block;   
  29. position:absolute;   
  30. margin-left:1px;   
  31. z-index: 500;   
  32. }   
  33.   
  34. a.kivul, a.kivul:visited {   
  35. color:#b3daff;   
  36. width:82px;   
  37. height:18px;   
  38. display:block;   
  39. background:#0a385a;   
  40. border:1px solid #b3daff;   
  41. text-align:center;   
  42. float:left;   
  43. text-decoration:none;   
  44. font-family:tahoma, vardana, arial, sans-serif;   
  45. font-size:10px;   
  46. line-height:18px;   
  47. overflow:hidden;   
  48.   
  49. }   
  50. a.kivul:hover {   
  51. color:#b3daff;   
  52. background:#0a385a;   
  53. overflow:visible;   
  54. text-decoration: underline;   
  55.   
  56. }   
  57.   
  58. a.kivul:hover table {   
  59. display:block;   
  60. background:#0a385a;   
  61. text-align: center;   
  62. border-collapse:collapse;   
  63.   
  64. }   
  65.   
  66. a.belso, a.belso:visited {   
  67. display:block;   
  68. width:78px;   
  69. height:18px;   
  70. border-bottom:1px solid #000;   
  71. text-decoration:none;   
  72. color:#b3daff;   
  73. font-family:tahoma, vardana, arial, sans-serif;   
  74. font-size:10px;   
  75. text-align:center;   
  76. background-color:#105182;   
  77. text-align: center;   
  78. margin-left: 1px;   
  79.   
  80. }   
  81.   
  82. a.belso:hover {   
  83. background:#b3daff;   
  84. color: #0053a6;   
  85.   
  86. }   
  87. </style>   
  88.   
  89. <!--[if IE]>   
  90. <style type="text/css">   
  91. /*<![CDATA[*/   
  92.   
  93. .menu {   
  94. display:block;   
  95. position:absolute;   
  96. margin-left:1px;   
  97.   
  98. }   
  99.   
  100. a.kivul, a.kivul:visited {   
  101. color:#b3daff;   
  102. width:83px;   
  103. height:18px;   
  104. display:block;   
  105. background:#0a385a;   
  106. border:1px solid #b3daff;   
  107. text-align:center;   
  108. float:left;   
  109. text-decoration:none;   
  110. font-family:tahoma, vardana, arial, sans-serif;   
  111. font-size:10px;   
  112. line-height:18px;   
  113. overflow:hidden;   
  114.   
  115. }   
  116. a.kivul:hover {   
  117. color:#b3daff;   
  118. background:#0a385a;   
  119. overflow:visible;   
  120. text-decoration: underline;   
  121.   
  122. }   
  123.   
  124. a.kivul:hover table {   
  125. display:block;   
  126. background:#0a385a;   
  127. border-collapse:collapse;   
  128.   
  129. }   
  130.   
  131. a.belso, a.belso:visited {   
  132. display:block;   
  133. width:78px;   
  134. height:18px;   
  135. border-bottom:1px solid #000;   
  136. text-decoration:none;   
  137. color:#b3daff;   
  138. font-family:tahoma, vardana, arial, sans-serif;   
  139. font-size:10px;   
  140. text-align:center;   
  141. background-color:#105182;   
  142.   
  143. }   
  144.   
  145. a.belso:hover {   
  146. background:#b3daff;   
  147. color: #0053a6;   
  148.   
  149. }   
  150. /*]]>*/   
  151. </style>   
  152. <![endif]-->   
  153.   
  154. </head>   
  155.   
  156. <body>   
  157. <div id=menuhelye>   
  158. <div class="menu">   
  159. <a class="kivul" href="#">dadasa1</a>   
  160.   
  161. <a class="kivul" href="#">dadasa2   
  162. </a>   
  163.   
  164. <a class="kivul" href="#">dadasa3   
  165. <table><tr><td>   
  166. <a class="belso" href="#">asd1</a>   
  167. <a class="belso" href="#">asd2</a>   
  168. <a class="belso" href="#">asd3</a>   
  169. <a class="belso" href="#">asd4</a>   
  170. <a class="belso" href="#">asd5</a>   
  171. <a class="belso" href="#">asd6</a>   
  172. <a class="belso" href="#">asd7</a>   
  173. <a class="belso" href="#">asd8</a>   
  174. </td></tr></table>   
  175. </a>   
  176.   
  177. <a class="kivul" href="#">dadasa4   
  178. </a>   
  179.   
  180. <a class="kivul" href="#">dadasa5   
  181. </a>   
  182.   
  183. <a class="kivul" href="#">dadasa6   
  184. <table><tr><td>   
  185. <a class="belso" href="#">asdasd1</a>   
  186. <a class="belso" href="#">asdasd2</a>   
  187. <a class="belso" href="#">asdasd3</a>   
  188. <a class="belso" href="#">asdasd4</a>   
  189. <a class="belso" href="#">asdasd5</a>   
  190. <a class="belso" href="#">asdasd6</a>   
  191. <a class="belso" href="#">asdasd7</a>   
  192. </td></tr></table>   
  193. </a>   
  194.   
  195. <a class="kivul" href="#">dadasa7   
  196. <table><tr><td>   
  197. <a class="belso" href="#">sad1</a>   
  198. <a class="belso" href="#">sad2</a>   
  199. </td></tr>   
  200. </table>   
  201. </a>   
  202. </div>   
  203. <div id=keret>   
  204. </div>   
  205. </div>   
FF alatt nem mukodik a lenyilo resz olyan ertelemben hogy nem tudom fole vinni az egeret mert eltunik. marmint afole ami a "keret" folott lenne. gondolom vmi z-index kene bele csak nem tom hogyan, addig eljutottam, hogy a .menu -nek kell hogy egyaltalan latszodjon!
Elore is koszi
3

Nekem megy

randomly · 2005. Ápr. 10. (V), 21.24
Hello

Ha csak annyi irok be amit az elöbb beirtam, akkor nekem rendessen megy. FF 1.02 IE6 XP.

rand
4

koszi :-)

fudom · 2005. Ápr. 11. (H), 21.02
Koszi, kicsit atirkaltam, es mostmar nekem is megy. :-)