Zablokowane Szablon na IE

[Piczer]

Mam taki szablon i myślę, że jest źle napisany CSS, dlatego się niepoprawnie wyświetla strona na IE

 

CSS:

body, table{
  font-family: Tahoma, Verdana;
  font-size: 9px;
}
.menu{
  text-decoration: none;
  border: 0px;
  color: black;
}
div.menu:hover{
  background-color: #8EE5EE;
}
a{
  text-decoration: none;
}
input.text{
  height: 16px;
  border: 1px solid black;
  font-size: 9px;
  font-family: tahoma;
}
input.text:hover,input.text:focus{
  border: 1px solid blue;
}
td.space{
  width: 10px;
}

(Chodzi dokładnie o div.menu:hover)

[Tymon]

Co znaczy "niepoprawnie"?

 

body, table, input.text{
  font-family: Tahoma, Verdana;
  font-size: 9px;
}
.menu{
  text-decoration: none;
  background-color: transparent;
  border-width: 0px;
  color: black;
}
.menu:hover{
  background-color: #8EE5EE;
}
a{
  text-decoration: none;
}
input.text{
  height: 16px;
  border: 1px solid black;
}
input.text:hover,input.text:focus{
  border: 1px solid blue;
}
td.space{
  width: 10px;
}

Poprawiłem to co mi się rzucało w oczy.

[Piczer]

W IE, po przejechaniu na diva o tej klasie, nie zmienia koloru i nie da sie kliknąć, a w FF da się i zmienia kolor. Już daję HTML:

     <a href="#"><div style="width: 85%;" border="0" class="menu"><table><tr><td><img src="arrow.gif" border="0" /></td><td><b>Strona główna</b></td></tr></table></div></a>
     <a href="?page=login"><div style="width: 85%;" border="0" class="menu"><table><tr><td><img src="arrow.gif" border="0" /></td><td><b>Zaloguj</b></td></tr></table></div></a>
     <a href="?page=reg"><div style="width: 85%;" border="0" class="menu"><table><tr><td><img src="arrow.gif" border="0" /></td><td><b>Zarejestruj się</b></td></tr></table></div></a>
     <a href="#"><div style="width: 85%;" border="0" class="menu"><table><tr><td><img src="arrow.gif" border="0" /></td><td><b>Czytaj więcej...</b></td></tr></table></div></a>

 

EDIT: Zauważę też, że po usunięciu div.menu, nie zmienia się kolor diva. Dziwne

[gnysek]

IE obsługuje :hover tylko dla elementów a

 

btw. ten kod jest jakiś niepoprawny... czemu a jest na zewnątrz tabelki, a nie w środku ? cała tabelka ma być łączem ?

[Piczer]

Ale jak elementowi a dam klasę menu i zmienię w css na a.menu:hover i a.menu to się nie zmienia kolor. Muszę to chyba w JS zrobić?

 

@UP: Tak, bo chodzi mi, ze blok jest łączem, a nie sam tekst.

[Tymon]

<div class="menu">
     <a href="#"> Strona główna</a>
</div> 
<div class="menu">
     <a href="?page=login"> Zaloguj</a>
</div>
<div class="menu">
     <a href="?page=reg"> Zarejestruj się</a>
</div>
<div class="menu">
     <a href="#"> Czytaj więcej...</a>
</div>

body, table, input.text {
     font-family: Tahoma, Verdana;
     font-size: 9px;
}
.menu {
     width:200px;
}
.menu a {
     display: block;
     width:100%;
     height:16px;
     line-height:16px;
     padding-left: 20px;
     background-color: transparent;
     background-position: 2px center;
     background-repeat: no-repeat;
     background-image: url(arrow.gif);
     font-weight: bold;
     text-decoration: none;
     color: #000;
}
.menu a:hover {
     background-color: #8EE5EE;
}
input.text {
     height: 16px;
     border: 1px solid black;
}
input.text:hover, input.text:focus {
     border: 1px solid blue;
}
td.space {
     width: 10px;
}

Jak już tak bardzo chcesz. :P

[gnysek]

to chyba .menu a:hover bo a.menu:hover to jest najechanie na element .menu (np. div) w elemencie a, a element a nie ma ustawionego na hover nic.

A jeśli blok ma być łączem to nie lepiej .menu a{display: block; width: 100%;} ??

 

Edit: Tymon mnie wyprzedził :P

[Piczer]

Może i działa, ale moim szablonem można teraz sobie pupę podetrzeć :P

[Tymon]

To sobie dostosuj, ja nie miałem Twojego szablonu by to zrobić.

[Piczer]

Właśnie próbuję, ale inaczej się wyświetla w IE, a inaczej w FF...

[Tymon]

http://hurkel.gmclan.org/piczer/

Nie wydaje mi się. ;)

[Piczer]

Chodzi mi o zasrane "paddingi". Przed tymi robótkami było wszystko spox.

 

@EDIT: Dobra, poradziłem sobie ;) Zamykam