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...

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

a{display:block;}

.doboz{
width: 160px;
height: 55px;
border: 1px solid black;
text-align: center;
text-decoration: none;
font-size: 15;
float:left;
margin:2px;
}

...............
--></style>
</head>
<body>
<h3> Ez a lap címe </h3>
<div class="szin1 doboz"> <a href="#" title="első1 doboz">első 

1<br>aaa<br><b>11</b></a>
</div>
<div class="doboz szin2"> <a href="#" title="második1 doboz">második 

1<br>bbb<br><b>21</b></a>
</div>
<div class="doboz szin3"> <a href="#" title="harmadik1 doboz">harmadik 

1<br>ccc<br><b>31</b></a>
</div>
<div class="doboz szin1" style="clear:left;"> <a href="#" title="első2 

doboz">első 2<br>aaa<br><b>12</b></a>
</div>
<div class="doboz szin2"> <a href="#" title="második2 doboz">második 

2<br>bbb<br><b>22</b></a>
</div>
<div class="doboz szin3"> <a href="#" title="harmadik2 doboz">harmadik 

2<br>ccc<br><b>32</b></a>
</div>
</body>
</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.