itebob: MouseHover und display:block; im Internet Explorer - funz-t nicht wie erwartet

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="">&nbsp;&nbsp;Suche&nbsp;&nbsp;</a> &nbsp;-Platzhalter im Quellcode realisieren?`

gruss

Gustav

  1. Hallo Gustav,

    <table summary="" width="100%">
        <tr>
           <tr>
              ...
           </tr>
        </tr>
    </table>

    na, fällt dir etwas auf? Ist das korrektes HTML?

    Grüße,

    Jochen

    --
    Heute schon gescribbelt?
    Scribbleboard
    1. 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

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

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

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

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

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

  4. Moinsen,

    a:link     {

    (...)

    a:hover  { (...)

    Verdacht: Definiere auch den Style für besuchte links. Ansonstn gilt was die anderen schon geschrieben haben.

    --
    cu,
    Maz