MouseHover und display:block; im Internet Explorer - funz-t nicht wie erwartet
itebob
- css
0 Maxx0 Martin Hölter0 itebob
0 Gernot Back0 Daniel
0 Maz
Hallo,
in dieser Linkliste
<style type="text/css">
<!--
a:link {
font-family:verdana, arial, arial narrow, helvetica,sans-serif;
background-color: #000080;
color: #ffffff;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
white-space:nowrap;
display:block;
text-align: center;
vertical-align: top;}
a:hover {
background-color: #990033;
display:block;
}
-->
</style>
</head>
<body>
<table summary="" width="100%">
<tr>
<tr>
<td><a href="link1" width="25%">Sitemap</a></td>
<td><a href="link2" width="25%">E-Mail</a></td>
<td><a href="link3" width="25%" >Suche</A></td>
<td><a href="link4" width="25%">Impressum</a></td>
</tr>
</tr>
</table>
wird im Internet Explorer nur bei dem 'link1' das MouseHover-Ereignis richtig, wie ich's mir wünsche, abgearbeitet. Das heißt der Mauszeiger wird zur Hand nicht nur, wenn man mit der Maus über die Linkbeschriftung, z.B. 'Sitemap' fährt, aber auch über eine beliebige Stelle der entsprechenden Zelle. Bei den restlichen Links wird der Menüpunkt erste anklickbar, wenn die maus die Linkbeschriftung berührt. Mit Firefox, Mozilla und Netscape wird das MouseHover-Ereignis bei allen Links richtig bearbeitet.
Hat jemand eine Idee, wie man dem Internet Explorer beibringen kann, dass die display:block;-Anweisung für alle Links gelten muß? Oder lässt sich vielleicht diese Funktionalität anders - aber ohne JavaScript und solche <a href=""> Suche </a> -Platzhalter im Quellcode realisieren?`
gruss
Gustav
Hallo Gustav,
<table summary="" width="100%">
<tr>
<tr>
...
</tr>
</tr>
</table>
na, fällt dir etwas auf? Ist das korrektes HTML?
Grüße,
Jochen
na, fällt dir etwas auf? Ist das korrektes HTML?
Sorry, passiert bei Copy& Paste, aber daran liegt es nicht, die korrekte Version bearbeitet IE auch falsch - wie oben beschrieben.
Danke für den Hinweis ;-)
Gustav
Hallo itebob,
na, fällt dir etwas auf? Ist das korrektes HTML?
Sorry, passiert bei Copy& Paste,
Wäre mir neu, dass bei Copy&Paste Inhalte verändert werden...
SCNR,
Daniel
Hi!
Ist deine Navigation eine Tabelle (vom Sinn, nicht vom Aussehen her)? Neine, es ist eher eine Auflistung von Navigationspunkten, also ist das Element deiner Wahl ul. Somit stellt sich die Navigation folgendermassen dar (ohne Rücksicht auf deine Farben zu nehmen):
<style type="text/css">
<!--
a {
display:block;
background-color:#00F;
color:#F00;
width:100%;
}
ul, li
{list-style-type:none;
margin:0;
padding:0;}
li {float:left;
width:25%;
text-align:center;}
-->
</style>
</head>
<body>
<ul>
<li><a href="link1.htm">Sitemap</a></li>
<li><a href="link2.htm">E-Mail</a></li>
<li><a href="link3.htm">Suche</A></li>
<li><a href="link4.htm">Impressum</a></li>
</ul>
</body>
</html>
Was man mit Listen noch so alles machen kann, findest du u.a. bei Listamatic.
Gruß
Martin
Hi!
Ist deine Navigation eine Tabelle (vom Sinn, nicht vom Aussehen her)? Meine, es ist eher eine Auflistung von Navigationspunkten, also ist das Element deiner Wahl
Also mit der Liste hat es wunderbar geklappt - ist auch besser mit Rücksicht auf Accessibility.
Danke an alle!
Gustav
Hallo Gustav,
<tr>
<td><a href="link1" width="25%">Sitemap</a></td>
<td><a href="link2" width="25%">E-Mail</a></td>
<td><a href="link3" width="25%" >Suche</A></td>
<td><a href="link4" width="25%">Impressum</a></td>
</tr>
Wenn du statt der Links die einzelnen Tabellenzellen (besser mit CSS) auf eine Weite von jeweils 25% und dann die auf display:block gestellten Links jeweils noch auf 100% der jeweiligen Tabellenzelle, in der sie sich befindet, sollte es wie gewünscht klappen.
Ne Linkliste wär natürlich schon schöner ...
Gruß Gernot
Hi,
<td><a href="link3" width="25%" >Suche</A></td>
mach da ma ein kleines a hin
Wenn du statt der Links die einzelnen Tabellenzellen (besser mit CSS)
auf eine Weite von jeweils 25% und dann die auf display:block
gestellten Links jeweils noch auf 100% der jeweiligen Tabellenzelle,
in der sie sich befindet, sollte es wie gewünscht klappen.
Jupp, bei mir klappts jetzt auch im IE
MfG
Moinsen,
a:link {
(...)
a:hover { (...)
Verdacht: Definiere auch den Style für besuchte links. Ansonstn gilt was die anderen schon geschrieben haben.