Bräuchte Hilfe bei Linkunterstreichung

Gockel

Moin Leute,

hab mal wieder das leidige Problem das was im Ff3 richtig angezeigt wird und im IE7 nicht.

Hab mal einen Test eingestellt.

http://www.schusterjungen-montabaur.de/test/test01.html

Im FF3 wird der Hovereffekt angezeigt und im IE7 nicht. Kann mir einer sagen woran es liegt bzw. liegen könnte?

Hier mal der Quellcode der Seite:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Headtest</title>
<link href="default.css" rel="stylesheet" type="text/css" />


</head>


<body>
<table width="928" height="263" border="0" cellspacing="8" cellpadding="0" background="head-picture.jpg" class="TabelleInnen">
  <tr>
    <td width="568" height="41">&nbsp;</td>
    <td width="50" align="center" valign="bottom"><a href="http://localhost/www/schusterjungen2008_tabelle/index.php" class="NavigationHead">Home</a></td>
    <td width="76" align="center" valign="bottom"><a href="http://localhost/www/schusterjungen2008_tabelle/index.php" class="NavigationHead">Kontakt</a></td>
    <td width="93" align="center" valign="bottom"><a href="http://localhost/www/schusterjungen2008_tabelle/index.php" class="NavigationHead">G&auml;stebuch</a></td>
    <td width="93" align="center" valign="bottom"><a href="http://localhost/www/schusterjungen2008_tabelle/index.php" class="NavigationHead">Impressum</a></td>
  </tr>
</table>


</body>
</html>

Alles anzeigen

Und hier die dazugehörige CSS (abgespeckte Version; enthält nur die Teile für den Test):

Code

Body{
background-color:#666;
}


img {border: 0;}


Table.TabelleInnen{
    width:928px;
    margin:auto;
    vertical-align:top;
}     


a.NavigationHead{
    text-decoration:none;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1.1em;
    font-weight:bold;
    color:#fff;
}    


a.NavigationHead:hover{
    text-decoration:none;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1.1em;
    font-weight:bold;
    color:#fff;
    padding-bottom:1px;
    border-bottom:7px solid #579700;
}

Alles anzeigen

Wäre super wenn mir einer von euch helfen könnte.

Mfg
Gockel

sejuma

Für die Navi brauchst du keine Tabelle. Das kann man besser mit einer Liste machen.
Ich habe dir mal was zusammengebastelt.

CSS:

Code

body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#666;
}


body, ul, li {
margin: 0;
padding: 0;
}


img {border: 0;}


#navi{
width: 928px;
height: 263px;
margin: 0 auto;
font-size:1.1em;
font-weight:bold;
background: url(head-picture.jpg);
}


#navi li {
float: right;
margin-right: 10px;
display: inline;
margin-top: 234px;
}






#navi a:link, #navi a:visited {
color:#fff;
text-decoration: none;
display: block;


}


#navi a:hover{
border-bottom: 7px solid #579700;
}


.clear {
clear: both;
}

Alles anzeigen

HTML:

Code

<body>
<ul id="navi">
<li><a href="http://localhost/www/schusterjungen2008_tabelle/index.php">Impressum</a></li>
<li><a href="http://localhost/www/schusterjungen2008_tabelle/index.php">G&auml;stebuch</a></li>
<li><a href="http://localhost/www/schusterjungen2008_tabelle/index.php">Kontakt</a></li>
<li><a href="http://localhost/www/schusterjungen2008_tabelle/index.php">Home</a></li>
</ul>
<div class="clear"></div>


</body>

Alles anzeigen

Gockel

Hi sejuma,

danke erstmal für deine schnelle Antwort. Werde dich lobend in mein Nachtgebet mit einschliessen.

So funktioniert es sowohl im IE als auch im FF. Allerdings leider nur fast. Der IE stellt die Unterstreichung um 1px nach oben versetzt da. Kann man daran vielleicht auch noch was machen? (Hab mal irgendwo was davon gelesen dass das öfters vorkommt)

Hab die Grundseite jetzt mal komplett online gestellt. Hier der Link:

http://www.schusterjungen-montabaur.de/test/index.php

Die CSS findet sich unter:

http://www.schusterjungen-montabaur.de/test/home/css/default.css

Ausserdem gibt es da noch ein kleines Problem. Und zwar mit vertical-align:top. Im FF wird der Testtext ordnungsgemäss oben angezeigt. Beim IE in der Mitte. Hab jetzt schon alles versucht und find keine Lösung. Könntest du dort auch mal schnell drübergucken?

Mfg
Gockel

sejuma

Definiere mal für body noch eine Schriftart. Es kann sein, dass die unterschiedlichen Browser verschiedene Schriftarten verwenden. Deshalb solltest du für eine einheitliche Darstellung sorgen, z.B. mit:

Code

font-family: Verdana, 'sans-serif';

Dann evtl noch am margin-top-Wert von li etwas drehen.

Gockel

Und nochmal herzlichen Dank.Hast wie immer Recht. Genau daran hat's gelegen.
Haste auch noch ne Idee mit dem Testtext? Warum erscheint der bei FF wie er soll und bei IE in der Mitte?

Mfg
Gockel

sejuma

Das ist mir jetzt zu viel, mich durch dieses Tabellen-Dickicht durchzuwühlen.
Möglicherweise ist jedoch einer oder mehrere dieser 51 Fehler dran schuld: http://validator.w3.org/check?verbose=…est%2Findex.php

Bevor du dir jedoch die Mühe machst, diese zu bereinigen, solltest du dir erst überlegen, ob du die Seite nicht nochmal ganz neu aufsetzt und dabei auf Tabellen generell verzichtest (außer es sind strukturierte Dartstellungen, wie z.b. der Kalender).
Wenn du ein paar Tage (vielleicht auch zwei Wochen) Zeit investierst und CSS lernst, dann hast du am Ende nicht nur einen sehr ordentlichen, tabellenfreien und übersichtlichen Quelltext, sondern wirst auch dauerhaft mehr Spaß an deiner Seite haben und die laufende Pflege wird sich auch viel einfacher gestalten.

Meine Signatur ist dir dabei vielleicht hilfreich.

Gockel

Moin sejuma,

die jetzige Seite beruht ja auf Div's. Ich möchte aber bewusst einen Rückschritt auf Tabelle machen da Seiten die mit Div's erstellt wurden grundsätzlich auf mobilen Endgeräten falsch angezeigt werden. Bestes Beispiel: http://www.perspektivteam.de

Habe jetzt das Problem gelöst und auch den Kopf wieder auf Tabelle umgestellt. Trotzdem danke für deine Hilfe.

Mfg
Gockel

sejuma

Mit der Darstellung auf mobilen Endgeräten habe ich mich noch nicht beschäftigt.
Wenn jedoch dort die Perspektivteam-Seite chaotisch dargestellt werden sollte, dann liegt das sicher daran, dass bei dieser Seite ein flüssiges Layout mit prozentualten Breiten verwendet wurde. Das hielt ich vor einigen Jahren für "modern" und hab's deshalb so gemacht. Mittlerweile gibt es aber derart zahlreiche unterschiedliche Bildschirmgrößen, dass dies wirklich zu Darstellungsproblemen führen kann. Wenn ich mal Zeit (eher Lust) habe, werde ich das mal ändern und ein fixes layout verwenden.

Dass allerdings Seiten mit Div's grundsätzlich falsch dargestellt werden, kann ich nicht so recht glauben. Es kommt wie erwähnt wohl eher darauf an, dass die Div's eine feste und keine relative Größe haben.

Tags