ugrás a tartalomhoz

CSS - HTML probléma Firefox böngészőn

Anonymous · 2006. Szep. 18. (H), 11.36
Helló !
Van egy CSS - HTML problémám.

Intranetre fejlesztek egy web lapot. Én Firefox böngészőt használok, de mivel a cégnél több száz gépen IE6 van, azon tesztelem.
Definiáltam egy #doboz azonosítójú DIV elemet. Különböző színekkel akarom kitölteni osztály hozzárendeléssel, valamint kattinthatóvá akarom tenni, úgy hogy ha rajta van a kurzor, változzon meg a színe.
Tudtommal csak szabványos CSS és HTML elemeket használtam.
Legnagyobb megdöbbenésemre IE azt hozza amit szeretnék, de a Firefox nem. Amikor osztályokra hivatkozok, eltűnik a doboz!
Mit rontottam el ?
Javascriptel meg tudnám oldani, de sokkal bonyolultabb lenne a kód.
Van valakinek ötlete ? Előre is köszönöm !

A kódrészlet :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="author" content="">
<title>Untitled</title>

<style type="text/css"><!--

#doboz a{
width: 160px;
height: 55px;
border: 1px solid black;
text-align: center;
text-decoration: none;
font-size: 15;
}

.szin1 a {
background-color: #C0FFFF;
}

.szin1 a:hover{
background-color: #80FFFF;
}

.szin2 a {
background-color: #C0FFC0;
}

.szin2 a:hover{
background-color: #80FF80 ;
}

.szin3 a {
background-color: #FFFFC0;
}

.szin3 a:hover {
background-color: #FFFF80;
}
--></style>
</head>
<body>
<center> <h3> Ez a lap címe </h3>
<table width="60%" align="center" cellspacing ="10">
<tr>
<td>
<div id="doboz" class="szin1"> <a href="#" title="első1 doboz">első 1<br>aaa<br><b>11</b></a>
</div>
</td>
<td>
<div id="doboz" class="szin2"> <a href="#" title="második1 doboz">második 1<br>bbb<br><b>21</b></a>
</div>
</td>
<td>
<div id="doboz" class="szin3"> <a href="#" title="harmadik1 doboz">harmadik 1<br>ccc<br><b>31</b></a>
</div>
</td>
</tr>
<tr>
<td>
<div id="doboz" class="szin1"> <a href="#" title="első2 doboz">első 2<br>aaa<br><b>12</b></a>
</div>
</td>
<td>
<div id="doboz" class="szin2"> <a href="#" title="második2 doboz">második 2<br>bbb<br><b>22</b></a>
</div>
</td>
<td>
<div id="doboz" class="szin3"> <a href="#" title="harmadik2 doboz">harmadik 2<br>ccc<br><b>32</b></a>
</div>
</td>
</tr>
<tr><td>.<br />.<br />.
</tr>
</table>
</body>
</html>
‹ childNodes[] Firefox alatt bugos? Lightbox JS v2.0 based inline gallery ›
 ■
1

id=azonosito

__Ferus · 2006. Szep. 18. (H), 11.58
Szerintem ff-nek az a baja hogy több elemnek ugyanaz az "id"-je, pedig ha jól sejtem pont arra való hogy megkülönböztesse azokat. :-)
... css ID can be applied to only one tag on the page...
2

talan igy

Anonymous · 2006. Szep. 18. (H), 12.16
Táblázat? Miért?

display
float
clear

Persze ezt még középre kell helyezni...
  1. ...........  
  2. <style type="text/css"><!--  
  3.   
  4. a{display:block;}  
  5.   
  6. .doboz{  
  7. width: 160px;  
  8. height: 55px;  
  9. border: 1px solid black;  
  10. text-align: center;  
  11. text-decoration: none;  
  12. font-size: 15;  
  13. float:left;  
  14. margin:2px;  
  15. }  
  16.   
  17. ...............  
  18. --></style>  
  19. </head>  
  20. <body>  
  21. <h3> Ez a lap címe </h3>  
  22. <div class="szin1 doboz"> <a href="#" title="első1 doboz">első   
  23.   
  24. 1<br>aaa<br><b>11</b></a>  
  25. </div>  
  26. <div class="doboz szin2"> <a href="#" title="második1 doboz">második   
  27.   
  28. 1<br>bbb<br><b>21</b></a>  
  29. </div>  
  30. <div class="doboz szin3"> <a href="#" title="harmadik1 doboz">harmadik   
  31.   
  32. 1<br>ccc<br><b>31</b></a>  
  33. </div>  
  34. <div class="doboz szin1" style="clear:left;"> <a href="#" title="első2   
  35.   
  36. doboz">első 2<br>aaa<br><b>12</b></a>  
  37. </div>  
  38. <div class="doboz szin2"> <a href="#" title="második2 doboz">második   
  39.   
  40. 2<br>bbb<br><b>22</b></a>  
  41. </div>  
  42. <div class="doboz szin3"> <a href="#" title="harmadik2 doboz">harmadik   
  43.   
  44. 2<br>ccc<br><b>32</b></a>  
  45. </div>  
  46. </body>  
  47. </html>  
3

Köszi szépen, de..

Anonymous · 2006. Szep. 18. (H), 14.34
Nagyon köszönöm !
Tökéletesen működik FF alatt, de sajnos az IE alatt nem jó !
Egyrészt a style="clear:left;" máshogy értelmeződik: az első oszlopok jó helyen vannak, de a többi továbbra is az első sor végére kerül, amig az be nem tellik.
A másik probléma IE alatt, hogy nem az egész doboz kattintható, csak a feliratok.

Mindenesetre mégegyszer köszönöm, így is sokat segitett.