Fehlerhafte Darstellung von CSS-formatierten Links

Status
Nicht offen für weitere Antworten.
N

nero_85

Erfahrenes Mitglied
Hi @ll!

Kann mir einer erklären was hier falsch läuft? Ich will Links mit Hilfe von CSS wie grafische Buttons behandeln (soll nämlich mit PHP dynamische Beschriftung erhalten, nur so am Rande bemerkt). An und für sich kein Problem. Hab ich auf anderen Seiten schon gemacht, nur hier funktionierts nicht wirklich. Der Link der ganz links Angezeigt wird wird unterhalb teilweise wiederholt (siehe Anhangsbild). Was mache ich falsch?

index.php:
HTML: 
<table width="100%" height="585,2" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="112"><img src="../bilder/lager.jpg" width="567" height="114"></td>
  </tr>
  <tr> 
    <td height="8,4" bgcolor="#FFFFFF"></td>
  </tr>
  <tr> 
    <td height="16,8" bgcolor="#002F71">
<a href="#" class="nav_vert">produkte</a>
<a href="#" class="nav_vert">kontakt</a>
<a href="#" class="nav_vert">links</a>
<a href="#" class="nav_vert">profil</a>
<a href="#" class="nav_vert">partner</a>
<a href="#" class="nav_vert">news</a>
<a href="#" class="nav_vert">support</a>
</td>
  </tr>
  <tr> 
    <td height="420" background="../bilder/hg-li.jpg" align="center">
    </td>
  </tr>
  <tr> 
    <td height="28" bgcolor="#002F71"></td>
  </tr>
</table>

style.css
Code: 
/*style.css*/

.nav_vert{

  display:block;
  float:right;
  width:81px;
  height:20px;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  color:#FFF;
  background-color:transparent;
  font-size:10pt;
  border:1px solid #FFF;

}
 
Hi,

gib dem gesamten Navigationsbereich mal eine feste Breite, da der von Dir dargestellte Effekt nur Auftritt, wenn das Browserfenster zu schmal wird, da dann Teile der Navigation in die nächste Zeile umbrechen.

Ich würde die gesamte Navigation in einen Div-Bereich stecken, dem eine feste Breite geben, dann passiert das nicht mehr.

z.B.:

HTML: 
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style media="all" type="text/css">
  .nav_vert {
    display:block;
    float:right;
    width:81px;
    height:20px;
    text-align:center;
    vertical-align:middle;
    text-decoration:none;
    color:#FFF;
    background-color:transparent;
    font-size:10pt;
    border:1px solid #FFF;
  }
</style>
</head>

<body>
<table width="100%" height="585" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="112"><img src="../bilder/lager.jpg" width="567" height="114" /></td>  
  </tr>
  <tr>
    <td height="8" bgcolor="#FFFFFF">&nbsp;</td>  
  </tr>
  <tr>
    <td height="17" bgcolor="#002F71">
      <div style="width:584px; float:right;">
        <a href="#" class="nav_vert">produkte</a> 
        <a href="#" class="nav_vert">kontakt</a> 
        <a href="#" class="nav_vert">links</a> 
        <a href="#" class="nav_vert">profil</a> 
        <a href="#" class="nav_vert">partner</a> 
        <a href="#" class="nav_vert">news</a> 
        <a href="#" class="nav_vert">support</a>
      </div>
    </td>
  </tr>
  <tr>
    <td height="420" background="../bilder/hg-li.jpg" align="center">&nbsp;</td>
  </tr>
  <tr>
    <td height="28" bgcolor="#002F71">&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
Zuletzt bearbeitet:
Soweit stimmt das, habs mittlerweile auch so gelöst! Aber trotzdem stimmt da etwas ganz und gar nicht. Denn die Navigation besteht aus 7 Buttons. Wenn du dir den Anhang ansiehst dann sind in der ersten Zeile 7 Buttons und in der 2. Zeile steht pport! Was jedoch ein Teil des Buttons darüber, also des Buttons support ist.

FF funktioniert übrigens ganz normal! (was eigentlich niemanden wundern dürfte. typisch IE)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück