HTML: Relative Größenangaben im FF - Problem

[malo]

Hi!

Ich bin wieder mal mit einem Webseitenproblem hier... und zwar hab ich folgendes Problem:

Ich habe in einer HTML-Seite einen div-Bereich mit relativer Breiten-Angabe (%). Das Problem ist nun: Ich hab die Angabe auf den IE spezialisiert (da dort getestet). Aber der FF macht damit Probleme...

Und zwar glaub ich, dass der FF bei relativen Angaben immer die komplette Breite der HTML-Seite nimmt, und die Größe dann mehr oder weniger fest auslegt. Demnach erhalte ich bei meiner Seite, wenn ich als Breitenangabe "70%" angebe, einen horizontalen Scrollbalken, weil der Bereich zu viel Platz einnimmt.

Jetzt hab ich aber schon alles mögliche probiert - z.B. hab ich versucht ein "Right-Margin" zu setzen, allerdings hilft das beim FF auch nicht.

Nun bin ich zu der Methode angelangt, dass ich einfach abfrage, welcher Browser benutzt wird, und dementsprechend die Angabe mach. Allerdings funktioniert das dann überhaupt nicht richtig...

Folgender Quellcode:

Code:

<script type="text/javascript">
<!--
  browser=navigator.appName;
  if (browser == "Netscape")
    {
    document.write('<div id="inhalt" style="width: 10%>"');
    }
  else
    document.write('<div id="inhalt" style="width:70%>"');
//-->
</script>
<noscript><div id="inhalt" style="width:70%"></noscript>

Der FF reagiert weder auf die style-Angabe im "if"-Teil, noch auf die im "else"-Teil. Und JS ist auch an.

Folgendes funktioniert aber:

Code:

<div id="inhalt" style="width:10%">

Hat jemand eine Idee, was ich hier falsch mach, bzw. wie ich das auch im FF richtig anzeigen lassen kann? :?

[muRR]

Bist du sicher, dass das Script überhaupt ausgeführt wird? Meiner Meinung nach müsste es mit

Code:

<script language="JavaScript">

beginnen.

Edit:
Ich sah grad, dass man es auch so machen kann. Allerdings sehe ich das Attribut "width" laut http://de.selfhtml.org/navigation/su...uchanfrage=div nicht. Könnte es daran liegen?

Nein, sollte es auch nicht, denn die Universalattribute lassen CSS zu.

[malo]

Zitat:

Zitat von muRR

Bist du sicher, dass das Script überhaupt ausgeführt wird? Meiner Meinung nach müsste es mit

Code:

<script language="JavaScript">

beginnen.

Ja, und es wird auch im FF in den "If"-Teil gesprungen. Bei folgendem Test erscheint oben noch die Schrift "Hallo Welt".

Code:

  if (browser == "Netscape")
    {
    document.write('hallo welt');
    document.write('<div id="inhalt" style="width: 10%>"');

    }

Wobei ich immer dachte, es müsste streng genommen "text/javascript" heißen :gruebel:

[Matze]

"language" gibt es bei XHTML nicht mehr, dort gibt es nur noch type, bei HTML auch language und dann muss es dort auch nur "Javascript" heißen, im Gegensatz zu type, so es "text/javascript" heißen muss.

Also FF hat mit der Breite von Divs keine Probleme. Hier habe ich beidesmal 50% als Breite angegeben und es wird korrekt interpretiert.

[malo]

Zitat:

Zitat von Matze

Also FF hat mit der Breite von Divs keine Probleme. Hier habe ich beidesmal 50% als Breite angegeben und es wird korrekt interpretiert.

Ich fang ja nicht ganz linksbündig an. Ich hab links daneben z.B. noch eine (per CSS ausgerichtete) Liste ([*]), und rechts und links davon noch ein paar Pixelchen Platz, bis mein div-Bereich kommt.

Einmal ein Screenshot, wie das aussehen tut.

Styles etc. natürlich noch nicht fertig, ich experimentiere noch (mir gehts im Moment um das Wichtige - die kreativen Dinge lass ich später von irgendwem machen :mrgreen: ) ;)

edit: Im Screenshot ist die Breitenangabe, wie sie mit dem JS-Quellcode aussieht... ;)

[Matze]

Hast du evtl den Source, der dort dargestellt wird? Also klar du hast ihn, aber kannst du ihn bitte posten? ;)

[malo]

:gruebel: Ich bezweifle, dass der IRGENDWIE helfen wird :roll:

Ich frag mich aber, wieso alle immer den Quelltext haben wollen :gruebel:

Code:

<script type="text/javascript">
<!--
  browser=navigator.appName;
  if (browser == "Netscape")
    {
    document.write('hallo welt');
    document.write('<div id="inhalt" style="width: 10%>"');

    }
  else
    document.write('<div id="inhalt" style="width:50%>"');
//-->
</script>
<noscript><div id="inhalt" style="width:70%"></noscript>





<?
  //echo $mode['mode'];
  $query = 'SELECT content,title FROM ' . $table_prefix . 'index WHERE id="'.$mode['mode'].'"';
  $result = mysql_query($query);
  //if ($result) echo "true "; else echo "false";
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
    {
     echo('<div class="headline">' . $row['title'] . "</div>\n");
     echo('<div class="text">' . $row['content'] . '</div>');
    }
?>



</div>

Auf die "wichtigen" Teile gekürzt.

Das Stylesheet:

Code:

div#Inhalt {
    margin-left: 12em;
    margin-right: 0em;
    padding: 0 1em;
    border: 1px dashed silver;
  }

[Matze]

Zitat:

Zitat von malo

Ich frag mich aber, wieso alle immer den Quelltext haben wollen :gruebel:

Weil's so leichter nachvollziehbar ist. Allerding meinte ich das, was man über "Ansicht" - "Seitenquelltext anzeigen" sehen würde, das wäre übersichtlicher als so. :oops:

[Flocke]

Du hast zwei kleine Tippfehler drin:

Code:

document.write('<div id="inhalt" style="width: 10%[color=red]>"[/color]');
document.write('<div id="inhalt" style="width: 10%[color=blue]">[/color]');

(in der Zeile weiter unten auch noch mal)

Vielleicht nimmt FF die Angaben deshalb nicht?

[malo]

Zitat:

Zitat von Matze

Zitat:

Zitat von malo

Ich frag mich aber, wieso alle immer den Quelltext haben wollen :gruebel:

Weil's so leichter nachvollziehbar ist. Allerding meinte ich das, was man über "Ansicht" - "Seitenquelltext anzeigen" sehen würde, das wäre übersichtlicher als so. :oops:

Ja, das dachte ich mir im Nachhinein auch... aber immer wenn ich den Quellcode abschicken will, streikt der Server :wall:

Auf die wichtigsten Stellen gekürzt:

Code:

<html>

<div style="text-align:center">
<div style="margin:auto"> <img href=http://.de/a.jpg> 
</div>
</div>
<ul id="Navigation">[*][url="index.php?mode=test"]b[/url][*]a
[*][url="index.php?mode=test"]c[/url][*]x[/list]

<script type="text/javascript">
<!--
browser=navigator.appName;
if (browser == "Netscape")
{ document.write('hallo welt');
document.write('<div id="inhalt" style="width: 10%>"');

}
else
document.write('<div id="inhalt" style="width:50%>"');
//-->
</script>
<noscript><div id="inhalt" style="width:70%"></noscript>





<div class="headline">aggg</div>
<div class="text">bggg</div><div class="headline">bbbb</div>

<div class="text">cccc</div>


</div>

edit: :oops:

[malo]

Zitat:

Zitat von Flocke

Du hast zwei kleine Tippfehler drin:

Code:

document.write('<div id="inhalt" style="width: 10%[color=red]>"[/color]');
document.write('<div id="inhalt" style="width: 10%[color=blue]">[/color]');

(in der Zeile weiter unten auch noch mal)

Vielleicht nimmt FF die Angaben deshalb nicht?

:wall:

danke.

[Flocke]

Noch etwas: im Quirks-Mode (ich denke der ist bei deinem Dokument aktiv) interpretiert der IE die Breiten und die Ränder etwas "anders" als andere Browser, man nennt das den "Box-Model-Bug". Mehr Infos findest du bei einer Suche box-model bug.

[malo]

Zitat:

Zitat von Flocke

Noch etwas: im Quirks-Mode (ich denke der ist bei deinem Dokument aktiv) interpretiert der IE die Breiten und die Ränder etwas "anders" als andere Browser, man nennt das den "Box-Model-Bug". Mehr Infos findest du bei einer Suche box-model bug.

Danke, war jedoch nicht ausschlaggebend für mein Problem da
1) Ich den IE 6 verwendet hab (ging ja nur bis 5.5) und
2) Es im Opera wie im IE aussah ;)

[Flocke]

Das stimmt nicht ganz: der IE aktiviert nämlich - je nach der von dir im Header angegebenen HTML-Version - seinen "Kompatibilitätsmodus". Soll heißen: Seiten, die eine HTML-Version aus Zeiten von IE 5 benutzen, werden auch angezeigt wie "damals".

Schau mal auf dieser Seite nach, inbesondere unter "What is Quirks Mode?". Und hier findest du (so in der Mitte) eine Übersicht, bei welchen DOCTYPE-Switches welche Browser welchen Modus aktivieren :stupid:

Am sichersten kommst du nur mit einem relativ modernen, strikten Modus weg - den interpretieren fast alle gleich.

[Nachtrag]

Eine Sache ist mir noch eingefallen: wenn's wirklich am Box-Model-Bug liegt, dann kommst du eigentlich relativ leicht darum herum: packe das div mit Rahmen in ein zweites ohne und gib nur beim äußeren die Breite an, also:

Code:

<div style="width:70%"><div id="inhalt">
...
</div></div>

[malo]

äh, ja...

Ich denke jedoch, dass es sich NICHT um eien IE-Bug handelt, weil der Opera-Browser die Seite genauso angezeigt hat, wie der IE. Es ist halt nur der FF aus der Reihe getanzt ;)

Btw. verwende ich wohl einen "Strict-Mode" mit HTML 4.01 Transitional ;)

Ich werd mir das Ganze demnächst mal genauer ansehen... ;)

Im Moment reicht mir mein Quellcode aber für meine Zwecke :)

[Flocke]

Zitat:

Zitat von malo

Ich denke jedoch, dass es sich NICHT um eien IE-Bug handelt, weil der Opera-Browser die Seite genauso angezeigt hat, wie der IE. Es ist halt nur der FF aus der Reihe getanzt ;)

Eher umgekehrt - Opera macht den IE nach. Du kannst davon ausgehen, dass Firefox CSS besser (d.h. genauer) umsetzt.

Zitat:

Zitat von malo

Btw. verwende ich wohl einen "Strict-Mode" mit HTML 4.01 Transitional ;)

Das widerspricht sich aber eigentlich :zwinker:

P.S. aus meiner Web-Statistik vom September:

Code:

Internet Explorer:   6399  59,1%  (-> 50,4%)
Mozilla (incl. FF):  3601  33,3%  (-> 40,8%)
Opera:                679   6,2%  (->  7,9%)
Sonstige:             134   1,2%

mit steigender Tendenz für Mozilla/Firefox (in Klammern die Werte für Oktober bisher).

[malo]

Zitat:

Zitat von Flocke

Zitat:

Zitat von malo

Ich denke jedoch, dass es sich NICHT um eien IE-Bug handelt, weil der Opera-Browser die Seite genauso angezeigt hat, wie der IE. Es ist halt nur der FF aus der Reihe getanzt ;)

Eher umgekehrt - Opera macht den IE nach. Du kannst davon ausgehen, dass Firefox CSS besser (d.h. genauer) umsetzt.

:gruebel: Also hätte Opera dementsprechen den selben Bug?

Zitat:

Zitat von Flocke

Zitat:

Zitat von malo

Btw. verwende ich wohl einen "Strict-Mode" mit HTML 4.01 Transitional ;)

Das widerspricht sich aber eigentlich :zwinker:

Ich dachte "Quirks-Mode" ist es, wenn kein Doctype angegeben wird? :gruebel:

[alcaeus]

Strict in HTML 4.01 Transitional gibts nicht, es gibt HTML 4.01 Frameset, HTML 4.01 Transitional, und HTML 4.01 Strict :zwinker:

Greetz
alcaeus

[malo]

Zitat:

Zitat von alcaeus

Strict in HTML 4.01 Transitional gibts nicht, es gibt HTML 4.01 Frameset, HTML 4.01 Transitional, und HTML 4.01 Strict :zwinker:

Aber den "Quirks Mode" hab ich dann doch auch nicht aktiviert, weil der ja kein Doctype hätte.

"Quirs Mode" ist doch imho ein Kompatibilitätsmodus für die "alten" HTML-Seiten. Und damals wurde kein Doctype angegeben.

Oder verhau ich mich da grad? :wall:

[alcaeus]

IE wird in den Quirks-Mode gesetzt, wenn du keinen oder einen ungueltigen Doctype angibst.
Siehe auch: http://de.selfhtml.org/html/allgemei...tm#dokumenttyp

Wenn du also irgendwas mit "HTML 4.01 Transitional Strict" verwendet hast: willkommen im Quirks-Mode ;)

Greetz
alcaeus

[malo]

Zitat:

Zitat von alcaeus

Wenn du also irgendwas mit "HTML 4.01 Transitional Strict" verwendet hast: willkommen im Quirks-Mode ;)

Nein, ich hab schon "HTML 4.01 Transitional" (ohne Strict :mrgreen: ) genommen, aber ich war wohl ein wenig verwirrt wegen dem Text, den ich gelesen hatte dazu... hab da wohl was nicht ganz richitg verstanden ;)

[Flocke]

Es geht nicht nur um den Quirks-Mode, das ist nur eine der Auswirkungen.

Probiere mal deine Datei im IE aus, wenn du statt 4.01 nur 4.0 schreibst (auch ein gültiger DOCTYPE). Selbst der allerneueste IE schaltet dann wieder in einen anderen Darstellungsmodus.

Das ist kein Bug, sondern es war ein Bug - und damit die Seiten, die speziell dafür geschrieben wurden, auch weiterhin korrekt angezeigt werden, interpretiert die Browser (also nicht nur der IE) einige Angaben je nach DOCTYPE anders - und das machen leider nicht alle Browser gleich :roll:

Es gibt also nicht nur Quirks-Mode ein oder aus, sondern auch noch Schattierungen - das ist auf jeden Fall meine Erfahrung damit.

Ich benutze übrigens

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

... und der wird unter IE, FF und Opera eigentlich gleich dargestellt.

Kritische Stellen bekommt man (wie schon geschrieben) am besten dadurch weg, dass man zwei (oder mehr) divs ineinander verschachtelt - eine für die äußeren Maße und eine für die Ränder und Abstände.