✔ Problem mit Darstellung im IE

[djandy]

Mir ist aufgefallen, das wenn ich den DOCTYPE im Quelltext entferne das Layout im Firefox genau so schlecht ist wie im IE.

Kann es sein das der DOCTYPE nicht stimmt?

 

[Maik]

Sorry, aber den Sinn / Zweck dieser Zeile kann ich nicht nachvollziehen:

<div style="overflow:auto; height:341">PHP-Code:</div>

Für eine Textzeile ein scrollfähiges DIV mit 341 Pixel Höhe


Da bei der Höhenangabe die Einheit px fehlt, stellt IE den Abstand zum nachfolgenden Element dennoch dar, FireFox hingegen nicht.

Was das horizontale Scrollen des PHP-Codes im IE angeht, so solltest du für das (zweite) scrollfähige DIV eine Breite definieren.

 

[djandy]

Ich komme den Problem so langsam immer näher! Habe die von dir genannten Zeile gelöscht. Die hatte in diesem Quelltext garnicht verloren.

Bin jetzt soweit das wenn ich eine Breit angebe das Layout im IE auch stimmt - aber noch nicht ganz...

Meine Fragen jetzt sind nur noch:

1. Wie kann ich den <div> an eine Tabellenbreite anpassen?

2. Wie bekomme ich den Scrollbalken rechts weg! (Möchte nur seitlich scrollen können und nicht noch nach oben bzw. unten)


Gruß Andy

 

[Maik]

1. Indem das DIV die entsprechende Tabellenzellenbreite zugewiesen bekommt.
   
   In deinem Fall ist das für den IE aber problematisch, da die relevanten Tabellen- und Zellenbreiten mit %-Angaben dimensioniert sind. Versuch es daher mit festen Angaben, so wie bei den darüberliegenden Tabellen mit einer 600px-Breite.
   
   
2. Formatiere die Schriftgröße für den PHP-Code, denn die Browsers stellen sie bislang unterschiedlich groß dar -> FireFox klein, IE groß.

 

[djandy]

Das Layout ist jetzt in Ordnung. Leider habe ich immer noch dasProblem mit dem Scrollbalken.

Bei overflow:auto

Firefox: zeigt rechts keinen Scrollbalken
IE: zeigt eine und die letzte Zeile muss man scrollen


Bei overflow:scroll

Firefox: zeigt einen Scrollbalken
IE: zeigt einen aber ohne das man ihn benutzen kann. So als wäre eine Seite zu groß aber nicht so groß das man damit runter scrollen könnte


Was soll ich nur tun?

 

[Maik]

Kannst du mal den überarbeiteten HTML- und CSS-Code zeigen?

 

[djandy]

 <table width=\"360\" border=\"0\" align=\"center\" cellspacing=\"0\" class=\"text\">
  <tr>
  <td>PHP-Code:</td>
  </tr>
  </table>
  <table width=\"360\" border=\"0\" align=\"center\" cellspacing=\"0\" class=\"text\">
  <tr>
  <td width=\"30\" valign=\"top\"><code>".$numbers."</code></td>
  <td width=\"330\" valign=\"top\" class=\"text\">
 <div style=\"width:330px; white-space:nowrap; overflow:auto; border:1px solid #87cefa;\"><code>'.highlight_string(stripslashes('$1'), true).'</code>
  </div>
  </td>
  </tr>
  </table>

 

[Maik]

Probier mal folgendes:

.scrollContent
{
width:330px;
white-space:nowrap;
overflow:auto;
border:1px solid #87cefa;
}

* html .scrollContent /* Für IE */
{
overflow-x:scroll;
overflow-y:hidden;
}

<table width=\"360\" border=\"0\" align=\"center\" cellspacing=\"0\" class=\"text\">
  <tr>
  <td>PHP-Code:</td>
  </tr>
  </table>
  <table width=\"360\" border=\"0\" align=\"center\" cellspacing=\"0\" class=\"text\">
  <tr>
  <td width=\"30\" valign=\"top\"><code>".$numbers."</code></td>
  <td width=\"330\" valign=\"top\" class=\"text\">
 <div class=\"scrollContent\"><code>'.highlight_string(stripslashes('$1'), true).'</code>
  </div>
  </td>
  </tr>
  </table>

 

[djandy]

Danke michaelsinterface für den Code!

War auch schon auf die Lösung gekommen, hatteleider nur noch keine Zeit gehabt zu posten.

Nochmals danke an alle.