✔ verschobene Wiedergabe / zu hoch, IE6/FF

[_fluxus_]

Hallo Forum.

Ich habe eine Frage die mich jetzt schon einige Zeit beschäftigt, ich komme hinten und vorne nicht weiter.

Problem ist der Firefox, im IE6 wird alles richtig angezeigt, in anderen Browsern habe ich bisher nicht getestet.

Im Firefox ist die Navigation viel zu hoch gesetzt und ein Info-Text bzgl. Cookie wird darunter angezeigt. Gewünscht ist, das die Info oberhalb der Navigation erscheint bzw. angezeigt wird. Der Content-Bereich wird im Firefox zu tief angezeigt, so dass der Außenrahmen überlappt wird. Ich habe die entsprechenden Bereiche blau umrahmt.

Hier ein Link, damit ihr euch von meinem Problem direkt selbst überzeugen könnt.

Es wäre klasse, wenn ihr einen Tipp habt.
Beste Grüße

 

[kuddeldaddeldu]

Hi,

also im Quelltext steht es dahinter. Und auf was genau sich jetzt Dein margin-top bezieht... Bei einer 8-9 fachen Verschachtelung der Divs...
Wozu machst Du das so komplex? Das Layout sieht doch recht einfach aus.

LG

 

[Maik]

Hi,

vielleicht solltest du einfach die Reihenfolge der beiden Seitenbereiche (Cookie & Navigation) im HTML-Code tauschen.

Alle mir zur Verfügung stehenden Browser zeigen die Elemente dann in der gewünschten Anordnung an: Cookie oben und die Navigation darunter.

Zudem gehört der HTML- und CSS-Code validiert, denn eine ID muss im HTML-Dokument eindeutig sein, und darf darin nicht mehrmals vergeben werden, und im Stylesheet hab ich beim Überfliegen auch ein paar syntaktische Fehler entdeckt, die in dem einen oder anderen Browser zu Darstellungsfehlern führen dürften:

#nav a:link,
#nav a:visited {
color:#000;
background:#F9F9F9;
padding:5px 13px 5px 13px;
float:left;
width:auto;
border-right:1px solid #DDDDDD;
text-decoration:none;
font:bold 11px Arial, Verdana, Helvetica, sans-serif;
letter-spacing:0.1em;
text-shadow: 2px 2px 2px #<p>555</p>; 
}

div.Article {
  background:
        url(test.gif)
  top left no-repeat;
  margin-left:5px; /* Einheitenangabe fehlt */
  height: 100px;
  }
div.ArticleBodyText {
  background: no: /* den Wert "no" gibt es nicht, sondern "none", und die Eigenschaft wird mit einem Semikolon beendet */
  margin:0;
  margin-top:2em;
  padding-left:260px;
  text-align : left;
  }

Interessant ist auch, dass der PHP-Code nicht geparst und stattdessen im HTML-Code ausgegeben wird.

 

[_fluxus_]

Besten Dank Maik. Anhand deiner Tipps habe ich das genau so hinkriegen können, wie erwünscht. TOP!

Noch eine Sache die mich jedoch beschäftigt. Der Content-Bereich (blau hinterlegt) wird automatisch nach unten hin verlängert, wenn der Text mehr Platz benötigt. Im Firefox jedoch bleibt der Content-Bereich fix und der Text läuft darüber hinaus. Woran kann das liegen? Gibt es die Möglichkeit die Anzeige auch im Firefox so zu gestalten, dass der Content-Bereich automatisch verlängert wird?

Hier ein
LINK

Problem2
Wenn ich per iframe eine Seite einbinden möchte, dann wird der Content-Bereich (blau hinterlegt) nicht automatisch vergrößert, statt dessen muss im iframe gescrollt werden. Kann man auch hier durch einen Trick die Anzeige abändern?

Hier auch ein
LINK


Beste Grüße

.PS: Bzgl. PHP-Code, da habe ich (hier) im PHP-Forum bereits gefragt, evtl. liegt es auch am CSS...muss ich noch mal gucken

 

[Maik]

Hi,

dass der Inhalt die Box am unteren Elementrand überlappt, dürfte an der height-Deklaration für die ineinander verschachtelten DIVs liegen, die von den modernen Browsern als fixe Höhe interpretiert wird.

Entgegen meinem CSS-Tutorial CSS-Layout mit 100%-Höhe, das sich auf ein einzelnes DIV bezieht, gibt es meines Wissens für solch ein ineinander verschachteltes DIV-Konstrukt keine funktionstüchtige und browserübergreifende Möglichkeit, um es im Browerfenster auf eine Mindesthöhe von 100% zu skalieren, die dann mit dem Inhalt auch zunimmt. Entweder besitzt das Modell keine 100%-Mindesthöhe und wächst ordnungsgemäß mit, wie es der Inhalt von ihm abverlangt, oder es wird im Browserfenster in der Vertikalen auf 100% gestreckt und verharrt dort, wenn der Inhalt größer als der Anzeigebereich ist, sodass die Seite senkrecht gescrollt werden muss.

Wenn du die Höhe des iFrames von seinem Inhalt abhängig machen willst, wäre hierfür Javascript erforderlich. Sven hat da mal mit http://www.doktormolle.de/temp/iframe_resize2/ einen Testballon gestartet.

Was die Anzeige des PHP-Codes im HTML-Code betrifft, so sieht es wohl danach aus, dass auf deinem Server *.html-Dateien nicht durch den PHP-Parser geschickt werden.

Entweder notierst du in einer .htaccess-Datei

AddType application/x-httpd-php .htm .html

und lädst sie in das Rootverzeichnis, oder du lädst die Dokumente als *.php-Dateien auf den Server.

 

[_fluxus_]

Hallo Maik
Sorry für das späte feedback, war in den letzten Tagen jedoch verhindert.

Vielen Dank für deine Tipps, ich werde sehen, wie ich das in den gewünschten, für mich akzeptablen, Bereich bekomme...auch wenn mir die 100%-Ansicht natürlich gut gefällt. Naja, ich werde bei Zeiten mich wieder an die Arbeit machen.

Doch bevor ich den Thread als geklärt markiere noch eine kurze abschließende Frage an den Profi. Wie gelingt es mit die kleinen icons, unten rechts, im firefox zu bändigen. Sie befinden sich nicht in einer Reihe...für mich als Pedant nicht so prickelnd.

Es wäre nett, wenn du mir auch hier einen guten Tipp geben könntest.

Beste Grüße

 

[Maik]

Hi,

zeichne die Grafikelemente mit der float-Eigenschaft aus:

a img { float:right; }

 

[_fluxus_]

Hallo Maik.
Vielen vielen Dank für dein fachmännische Hilfe...ich nähere mich immer weiter meinem gewünschten Ergebnis. Besten Dank an dich! Werde deine Beiträge bewerten.

Bzgl. meinem PHP-Problem, das existiert nach wie vor noch, werde dazu direkt in dem thread was schreiben.


Beste Grüße