Verfälschte Anzeige von Elementen mit Webkit (Dreamweaver)

derivon

Ich habe hier mal eine beispielseite erstellt: http://examplesite.ohost.de/
Warum werden die Navigations buttons in einigen Webkitbrowsern abgeschnitten dargestellt?
Also zB in Dreamweaver in der liveview, der standardbrowser auf meinem Android Smartphone und vermutlich auch in Safari.

Wie kann ich das Problem beheben? Ich möchte, dass es in allen Browsern so aussieht wie in Firefox.

Hier mal 2 screenshots:

Die buttons sind im ersten screenshot abgeschnitten und auch minimal breiter, was aber erst richtig auffällt, wenn man die gesamte navigatioßnsleiste mit buttons füllt.

Bandit

Die Ausgabe von Dreamweaver würde ich prinzipiell ignorieren, genauso wie Dreamweaver überhaupt

derivon

Zitat von Bandit

Die Ausgabe von Dreamweaver würde ich prinzipiell ignorieren, genauso wie Dreamweaver überhaupt

Die Ausgabe von Dreamweaver basiert auf Webkit, insofern kann ich das nicht ignorieren. Apple-, Android- und Opera user sollen meine Website immerhin auch betrachten können.
Ich bin vor einiger Zeit von Notepad++ auf Dreamweaver umgestiegen und zwar auf Grund der besseren ftp Implemtierung, der Möglichkeit komplette Website-Ordner ganz einfach als Projekt zu öffnen usw. Wenn du was besseres kennst schieß los.

MrMurphy

Hallo,

ich kann dein Problem an meinem Safari für Windows nachvollziehen, der aber schon etwas veraltet ist, da er seit einiger Zeit nicht mehr weiterentwickelt wird.

Die Ursache konnte ich aber nicht ergründen.

Deshalb habe ich die Seite nur mit den absolut notwendigen CSS-Angaben nachgebaut. Damit trat das Problem im Safari nicht auf.

Die Ursache scheint demnach in deinem recht "verwachsenen" CSS-Angaben zu stecken. Die solltest du mal kräftig aufräumen.

Du kannst dir von deinen Dateien ja mal eine Kopie machen und nach und nach alle nicht benötigten CSS-Angaben löschen. Dabei immer kontrollieren, nach welchem Löschen die Darstellung (hoffentlich) richtig ist.

Gruss

MrMurphy

derivon

Die Navigationsleiste ist halt ein bisschen komplexer. Ich saß da damals echt ewigkeiten dran, bis ich sie so hatte wie ich es wollte.
Ist da echt so viel Müll drin?

Würdest du den Code für die nachgebaute Navigationsleiste teilen, bitte?

djheke

Im StandardBrowser Android funktionierts bei mir. Chrome auch.
Hab dein Navi mal abgespeckt.

HTML

<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>


#nav { 
 margin-bottom:10px;
}


#nav ul {
  margin:0;
  padding: 5px 0px;
  border: 1px #eee;
  border-style: solid none;
  list-style: none ;
}


#nav li {
   list-style: none ;
   display:inline-block;
}


#nav li a {
  display:block;
  padding: 5px 12px;
  color: #08C;
  border-radius: 5px;
  text-decoration: none;
  font-weight:bolder;
 }


#nav li a:hover {
   background:#eee;
}


.home #nav li a.home,
.bilder #nav li a.bilder,
.impressum #nav li a.impressum,
.kontakt #nav li a.kontakt,
.contact #nav li a.contact {
 background:#08c;
  color: #fff;
}


</style>
</head>
<body class="home">

    <nav id="nav" role="navigation">
      <ul>
        <li><a class="home" href="/"> Home </a></li>
        <li><a class="bilder" href="/bilder/"> Bilder </a></li>
        <li><a class="kontakt" href="/kontakt/"> Kontakt </a></li>
        <li><a class="impressum" href="/impressum/"> Impressum </a></li>
      </ul>
    </nav>


</body>
</html>

Alles anzeigen

Pimina

Dreamweaver ausgaben sind nicht immer zu 100% richtig. Am Besten im Browser dann selbst testen und schauen ob es passt.

Tags