CSS - HTML probléma Firefox böngészőn
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>
■ 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>
id=azonosito
talan igy
display
float
clear
Persze ezt még középre kell helyezni...
Köszi szépen, de..
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.