[CSS&HTML] Darstellungsunterschiede IE und Firefox

[MarvinM]

Hallo zusammen!

Ich weis, ich hab ein häufiges problem, aber ich werd es nicht los :-)

Im Hintergrund meiner Homepage (http://marvin.horrem-networkz.de) ist ein weißer Container, dieser Container wird im IE auch schön auf die Textgröße angepasst. So wenn man nun Firefox aufmacht und sich die Seite ansieht, ist der Container auf Mini-Format und passt sich keiner Textgröße an sondern bleibt so klein...

Nun meine Frage an euch: Weiß jemand, woran das liegt?

Danke schonmal!

PS: Hier das Style-Sheet:

Code:

/* Revival.1 */

* {
  padding : 0;
  margin : 0;
}

html, body {
  height : 100%;
}

body {
  text-align : center;
  margin : 0 auto;
  padding : 0;
  color : #000;
  font-style : normal;
  font-variant : normal;
  font-weight : normal;
  font-size : 10px;
  font-family : Verdana, Tahoma, Arial, sans-serif;
  background : #f0f6df;
}

#page {
  width : 810px;
  margin : 0 auto;
  height : auto;
  text-align : left;
}

#header {
  width : 810px;
  height : 120px;
  margin : 0 auto;
  background : url('http://marvin.horrem-networkz.de/images/header.gif') no-repeat;
  padding : 0;
}

#content {
  background : url('http://marvin.horrem-networkz.de/images/content_bg.gif') repeat-y;
  height : 100%;
  padding : 5px 20px 0;
}

/**************************** menu ****************************/

#nav_top {
  background : url('http://marvin.horrem-networkz.de/images/nav_top.gif') no-repeat;
  width : 225px;
  height : 28px;
}

#nav_btm {
  background : url('http://marvin.horrem-networkz.de/images/nav_btm.gif') no-repeat;
  width : 225px;
  height : 28px;
}

#menu {
  float : left;
  width : 225px;
  color : #000;
  background : url('http://marvin.horrem-networkz.de/images/nav_mid.gif') repeat-y;
}

#menu ul {
  list-style : none;
  width : 218px;
  font-size : 12px;
  padding : 0 0 0 3px;
}

#menu li {
  list-style-type : none;
  background : url('http://marvin.horrem-networkz.de/images/bullet.gif') no-repeat 12px 6px;
  margin-bottom : 4px;
  border-bottom : 1px solid #c8e5c7;
  padding : 0;
}

#menu li:hover {
  background : #c8e5c7;
  margin-bottom : 4px;
}

#menu a {
  display : block;
  padding : 0 0 0 20px;
  color : #fff;
  text-decoration : none;
}

#menu a:hover {
  display : block;
  padding : 0 0 0 20px;
  background: #c8e5c7;
  text-decoration : none;
}

#info {
  float : right;
  background : url('http://marvin.horrem-networkz.de/images/content_mid.gif') repeat-y;
  width : 533px;
}

.post_top {
  background : url('http://marvin.horrem-networkz.de/images/content_top.gif') no-repeat;
  width : 533px;
  height : 31px;
}

.post_btm {
  background : url('http://marvin.horrem-networkz.de/images/content_btm.gif') no-repeat;
  width : 533px;
  height : 31px;
}

.post {
  padding : 0 0 15px 25px;
}

img {
  border : 1px solid #fff;
  padding : 5px;
  margin : 3px;
}

a {
  color : #fff;
  text-decoration : none;
}

a:hover {
  color : #000;
  text-decoration : none;
}

h1 {
  color : #fff;
  font-weight : normal;
  font-size : 24px;
  padding : 40px 0 10px 40px;
}

h2 a {
  position : absolute;
  top : 32px;
  color : #666;
  font-size : 16px;
  margin : 0 0 0 575px;
  text-decoration : none;
}

h2 a:hover {
  color : #999;
}

h3 {
  color : #fff;
  font-size : 12px;
  font-weight : bold;
  padding : 5px 0 5px 10px;
}

h4 {
  color : #fff;
  font-size : 20px;
  font-weight : normal;
}

h5 {
  color : #8d8d8d;
  font-size : 10px;
  font-weight : normal;
  padding : 5px;
}

h3 img {
  float : left;
}

/**************************** lists ****************************/

ul {
  list-style : none;
  padding : 0 0 0 3px;
}

li {
  list-style-type : none;
  background : url('http://marvin.horrem-networkz.de/images/bullet.gif') no-repeat 12px 6px;
  padding : 0 0 0 20px;
}

#menu a {
  display : block;
  padding : 0 0 0 20px;
  color : #fff;
  text-decoration : none;
}

#menu a:hover {
  display : block;
  padding : 0 0 0 20px;
  color : #333;
  text-decoration : none;
}

/**************************** footer ****************************/

#footer {
  text-align : center;
  padding : 40px;
  background : url('http://marvin.horrem-networkz.de/images/bottom.gif') no-repeat;
  height : 42px;
}

#footer a {
  color : #000;
}

#footer a:hover {
  color : #fff;
}

[malo]

Wie wärs mit dem HTML-Quelltext? :zwinker:

[MarvinM]

Kein Problem ;-)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >

   <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="de" />
        <meta name ="Author" content="Marvin M&uuml;ller" />
        <meta name ="Publisher" content="Marvin M&uuml;ller" />
        <meta name ="Copyright" content="&copy; 2006 by Marvin M&uuml;ller"/>

        <meta name ="Revisit" content="After 30 days" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name ="Abstract" content="Homepage von Marvin M&uuml;ller# N&uuml;tzliche Programme, Informationen, Links, Scriptarchiv fuer PHP, HTML, Java" />
        <meta name ="audience" content="Alle"/>
        <meta name ="Robots" content="INDEX,NOFOLLOW" />
        <meta name ="Language" content="Deutsch" />
        <link rel="stylesheet" type="text/css" href="./files/style.css" media="screen, projection" />
      <link rel="shortcut icon" href="http://developdaly.com/images/favicon.ico" />      
       <title>Homepage von Marvin Müller | Home</title>

   </head>

   <body>
   
      <div id="page">
   
         <div id="header">
      
            <h1>-=Marvin Müller=-</h1>
            
            <h2>
            <a href="http://www.marvinmueller.de.tf" style="position: absolute; top: 32px; margin-left: 555px">
            www.marvinmueller.de.tf</a></h2>

      
         </div>
         
         <div id="content">
   
            <div id="menu">
            
               <div id="nav_top"></div>
         
               <h3>Home</h3><ul>[*][url="index.php?article_id=31"]Gästebuch[/url][*][url="index.php?article_id=29"]Kontakt[/url][*][url="index.php?article_id=21"]Impressum[/url][*][url="index.php?article_id=22"]Newsletter[/url][*][url="index.php?article_id=30"]News[/url][*][url="index.php?article_id=32"]Statistiken[/url][/list]<h3>Jugend-forscht</h3><ul>[*][url="index.php?article_id=9"]2007[/url][*][url="index.php?article_id=10"]2005[/url][*][url="index.php?article_id=11"]2004[/url][*][url="index.php?article_id=12"]2003[/url][/list]<h3>Programme</h3><ul>[*][url="index.php?article_id=23"]Calculator[/url][*][url="index.php?article_id=24"]FileCopy[/url][*][url="index.php?article_id=25"]CPU-Speed[/url][*][url="index.php?article_id=26"]FileGen[/url][*][url="index.php?article_id=27"]PrimGen[/url][*][url="index.php?article_id=28"]Pwd-Gen[/url][/list]<h3>Scripte</h3><ul>[*][url="index.php?article_id=16"]Visual C++[/url][*][url="index.php?article_id=17"]Delphi[/url][/list]<h3>PC-Glossar</h3><ul>[*][url="index.php?article_id=36"]A - Z[/url][/list]<h3>Tutoriale</h3><ul>[*][url="index.php?article_id=35"]1 & 2[/url][/list]<h3>Links</h3><ul>[*][url="index.php?article_id=34"]A-Z[/url][/list]<h3>Galerien</h3><ul>[*][url="index.php?article_id=33"]Übersicht[/url][/list]            
            <div id="nav_btm"></div>

            
            </div>
               
            <div id="info">
            
               <div class="post_top"></div>
            
               <div class="post">
            
                  <h4>Was gibt es zu entdecken?</h4><div class="image flLeft">[img]./files/delphi3icon.bmp[/img]

</p></div>   

Auf meiner Webseite finden Sie nützliche Programme, die von mir selbst in Delphi programmiert wurden und hier kostenlos als Freeware zum [url="index.php?article_id=3"]Download[/url] bereitstehen.


Weiterhin können Sie meine Aktivitäten bei Jugend forscht verfolgen. Besuchen Sie auch die nützlichen Webseiten, die ich unter Links zusammengetragen habe. 




Dort sind unter anderem auch gratis-Downloads zu finden. 
</br> Weiterhin können Sie als Entwickler im [url="index.php?article_id=4"]Scriptarchiv[/url] nach Scripten suchen. Wenn Sie eigene Scripte haben, die Sie gerne veröffentlichen würden, schicken Sie mir eine E-Mail (), dann werde ich die Scripte online stellen.
</br> Im Moment gibt es Scripte in Delphi bzw. Pascal und in Microsoft Visual C++. In Planung sind auch Java Scripte bzw. Javascript und PHP.
</br> Wenn Sie immer über neue Downloads und Veränderungen informiert werden wollen, tragen Sie sich in den [url="index.php?article_id=22"]Newsletter[/url] ein und Sie bleiben immer aktuell.
</br>Mittlerweile hat sich eine kleine Sammlung von sog. [url="index.php?article_id=6"]Tutorials[/url] zusammengestellt, 




also Anleitungen, wie man z.B. ein Netzwerk einrichtet. Diese können Sie sich 


herunterladen.
</br>
</br>
</br></p>


 <h4>Brauchen Sie ein Programm?</h4><div class="image flLeft">[img]./files/logo_delphi.gif[/img]

</p></div>   

Brennt Ihnen irgendein Problem unter den Fingernägeln, brauchen Sie ein ganz spezielles Programm was Sie nirgends finden können? Oder haben Sie Ideen für weitere Programme? Dann schicken sie mir doch eine E-Mail. Ich werde versuchen, die Ideen nach Freizeit und Delphi-Kenntnissen umzusetzen. Dies alles natürlich kostenlos, da es sich um ein rein nicht-kommerzielles Angebot handelt. Sollten Sie in den hier angebotenen Programmen Fehler (Beispielsweise Laufzeitfehler, sachliche Fehler oder graphische Fehler) finden, schicken Sie mir bitte eine E-Mail. Wenn Sie einen Screenshot und eine kurze Erläuterung beilegen erleichtern Sie mir die Suche erheblich. So kann ich meine Programme immer auf dem neusten Stand und möglichst fehlerfrei halten. Allerdings hoffe ich natürlich, dass Sie keine Fehler finden werden ;-)


Wenden Sie sich an mich.
</br>
</br>
</br></p>


 <h4>Hat Ihnen die Seite gefallen?</h4><div class="image flLeft">[img]./files/mail.png[/img]

</p></div>   

Wenn Ihnen diese Seite gefällt, dann lassen Sie mich das doch bitte durch einen Eintrag in meinem Gästebuch wissen. Aber auch wenn Ihnen die Seite nicht gefallen hat, oder Sie Verbesserungsvorschläge haben, hinterlassen Sie mir bitte einen Eintrag, oder schicken Sie mir eine E-Mail. Ohne Feedback kann ich nichts verbessern. Ich bin offen und dankbar für jede Art von Kritik!




Waren die Informationen/Programme auf dieser Seite nützlich für Sie? &#8211; Dann empfehlen Sie die Seite doch auch Ihren Kollegen/Freunden/Verwandten!
</br>
</br>
</br></p>


 <h4>Fragen?</h4><div class="image flLeft">[img]./files/question.jpg[/img]

</p></div>   

Sollten Sie Fragen/Anregungen haben können Sie mir diese auch direkt über E-Mail mitteilen.</p>


             
               </div>

               
               <div class="post_btm"></div>

               
            </div>
   
         </div>
         
         <div id="footer">
         
            © 2006 by Marvin Müller - <a href="index.php?article_id=21">
            Impressum</a>
</br>
Sie befinden sich hier: [url="/index.php"]Startseite[/url] </div>
           
      </div>

           
   
                
   </body>

</html>

[OregonGhost]

Wenn ich das richtig sehe, haben sowohl der Kasten mit dem Menü als auch der Kasten mit dem Seiteninhalt das Attribut float gesetzt, der eine auf left, der andere auf right. Ist es dann nicht normal, dass der umliegende Kasten sich dann nicht entsprechend vergrößert? Das Verhalten habe ich jedenfalls schon öfter gesehen.
Zumindest eine mögliche Lösung für das Problem wäre, wenn du für den rechten Kasten das float entfernst und dafür margin-left auf 235px setzt.

[MarvinM]

Danke für deine schnelle Antort!

Ich hab das jetzt mal so geändert, das Ergebnis kannst du auf der Seite sehen, der Container wird angepasst, aber Rest ist etwas verrutscht...

Css Code sieht nun so aus:

Code:

[...]
#info {
  margin-left : 235px
  background : url('http://marvin.horrem-networkz.de/images/content_mid.gif') repeat-y;
  width : 533px;
}
[...]

[Thorben77]

Zitat:

Zitat von MarvinM

CSS-Code sieht nun so aus:

Code:

[...]
margin-left: 235px;

Das kann nicht sein, dass das schon drinne ist, denn dann müsste es auch wieder so aussehen, wie es soll :wink: .
Bei Deinem Beitrag hast Du ein Semikolon hinter margin-left: 235px vergessen, ist das in der Datei vielleicht auch so? Dann wär das die Lösung.

Nachtrag:
Hab kurz nachgeguckt, das Semikolon fehlt tatsächlich.

[MarvinM]

Ja es war das Semikolon...

Es funktioniert, Danke!!

Aber... gaaanz zufrieden bin ich noch nicht ;-)

Jetzt passt sich der weiße Container dem Text an, wenn aber nun der Text kürzer ist, als die Navigation (z.B. auf dieser Seite http://marvin.horrem-networkz.de/ind...?article_id=22 ) steht die Navigation "über".

Wenn ihr da auch noch eine Lösung für wüsstet, wäre das genial! :-)

[Thorben77]

Du könntest für den content-Block eine Mindesthöhe definieren:

Code:

min-height: 655px;

(Die 655 Pixel müssten sogar einigermaßen stimmen.)
Allerdings „versteht“ der IE diese Eigenschaft nicht. Ich weiß aber nicht, ob es dafür eine (andere) Lösung gibt.

Nur nebenbei: Dein Layout kommt ganz schön durcheinander, wenn man im Browser eine andere Schriftgröße eingestellt hat.

[MarvinM]

Hm... schade eigentlich :-)

ann könnte hab ich jetzt ein funktionierendes Stylesheet für Firefox und eins für den IE (da zeigt der die Container jett versetzt an...)

Ist es realisierbar, dass die IE Besucher das eine Stylesheet und die Firefox-Besucher (und Opera) das andere sehen?

//Edit:

das hab ich mal zum Browser auslesen gefunden, viellcith hilft das, ich weis jetzt nicht direkt was ich damit machen soll...

Code:

$HTTP_USER_AGENT=$_SERVER['HTTP_USER_AGENT'];
if (ereg("Opera",$HTTP_USER_AGENT)) $browser = 'Opera';
elseif (eregi("Firefox",$HTTP_USER_AGENT)) $browser = 'Firefox';
elseif (ereg("MSIE 6\.0",$HTTP_USER_AGENT)) $browser = 'Internet Explorer 6';
elseif (ereg("MSIE 5\.5",$HTTP_USER_AGENT)) $browser = 'Internet Explorer 5.5';
elseif (ereg("MSIE 5\.",$HTTP_USER_AGENT)) $browser = 'Internet Explorer 5.0-4';
elseif (ereg("MSIE 4\.",$HTTP_USER_AGENT)) $browser = 'Internet Explorer 4.x';
elseif (ereg("Netscape/7\.",$HTTP_USER_AGENT)) $browser = 'Netscape 7.x';
elseif (ereg("Netscape6/6\.",$HTTP_USER_AGENT)) $browser = 'Netscape 6.x';

[3_of_8]

Ja, einfach den Useragent parsen.

[MarvinM]

Zitat:

Zitat von 3_of_8

Ja, einfach den Useragent parsen.

Ähm... und wie mach ich das?

[Thorben77]

Zitat:

Zitat von 3_of_8

Ja, einfach den Useragent parsen.

Das geht auch einfacher mit „Conditional Comments“.

Zitat:

Zitat von MarvinM

ann könnte hab ich jetzt ein funktionierendes Stylesheet für Firefox und eins für den IE (da zeigt der die Container jett versetzt an...)

Also wenn Du in dem einen einfach nur die Mindesthöhendefinition rauslassen willst, kannst Du Dir das sparen.
Browser überspringen Eingenschaften, die sie nicht kennen. Zumindest sollten sie es tun.

[MarvinM]

Ich hatte auch darauf gehofft, das der IE die min-heigth ignoriert, weil er sie nicht kennt. Dem is aber leider nicht so, im Moment ist die CSS-Datei mit dem min-heigth auf der Webseite und der IE versetzt jetzt die Container...

Ich versuch mal das über Useragent parsen zu umgehen...

[MarvinM]

WIe muss ich das schreiben?
Ich hab jetzt die Auswahl mal geschrieben und es zeigt sich im IE nix (liegt das vielleicht daran, dass ich Version 7 hab?)

Code:

[...]
<link rel="stylesheet" type="text/css" href="./files/style.css" />
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="./files/alternativ.css" />
<![endif]-->
[...]

Woran scheitert es?

[Thorben77]

Bist Du sicher, dass der IE den Container wegen der Mindesthöhe versetzt? Ich hab es eben mal ausprobiert: Er tut es auch, wenn man diese wieder herausnimmt. Wahrscheinlich liegt es an einer der vorherigen Änderungen.

[MarvinM]

Da hast du recht!

Ich hab jetzt das Ur-Stylesheet eingespielt (das reicht ja für den IE) Link ist ./files/alternativ.css
und ich hab das Stylesheet das sich mit dem Firefox verträgt (./files/style.css).

Was allerdings nicht funktioniert ist das bei SelfHTML angegebene Prozedere:

Code:

<!--[if IE]>
    <style type="text/css">@import url(./files/alternativ.css);</style>
<![endif]-->

//Edit:

Der gesamte Style Bereich sieht jetzt so aus:

Code:

<link rel="stylesheet" type="text/css" href="./files/style.css" />
<!--[if IE]>
  <style type="text/css">@import url(./files/alternativ.css);</style>
<![endif]-->

[Thorben77]

Probier mal folgendes:

1. Nimm die Mindesthöhe wieder aus dem Stylesheet heraus.
2. Füg in Deinem HTML-Dokument hinter
   Code:

   <div class="post_btm"></div>

   folgendes ein:
   Code:

   <div style="clear:both;"></div>

   Kann sein, dass Du in diesen Block noch ein geschützes Leerzeichen einfügen musst ().

Edit: Ups, kleiner Fehler :angel2: . Nicht hinter <div class="post_btm"></div>, sondern hinter den info-Block.

[MarvinM]

Genial, mehr kann ich nicht sagen!
Alles klappt, IE, Firefox, Opera!

Vielen, vielen Dank!

Kannst du mal kurz umreisen, woran das gelegen hat?

[Thorben77]

Zitat:

Zitat von MarvinM

Kannst du mal kurz umreisen, woran das gelegen hat?

Ich kanns versuchen :wink: :
Die Navigation ist ja aus dem normalen Textfluss „herausgerissen“, daher richtet sich der Hintergrund nur nach dem info-Block, der die Navigation „umfließt“.
Der eingefügte Block „umfließt“ die Navigation nicht wegen clear: both, sondern ist auf jeden Fall unter dieser. Und da er im content-Block ist, muss dieser und damit auch dessen Hintergrundbild so weit heruntergezogen werden, dass er auch im content-Block ist.
Gefunden hab ich's bei SELFHTML.

[MarvinM]

Aja... Aber klingt logisch, man muss nur drauf kommen... :-)

Ich übe dann noch ein bisschen :roll:

Danke nochmal!

[Thorben77]

Noch eine Anmerkung zur Deiner Website:
Du hast als Dokumenttyp XHTML 1.1 angegeben, die Dokumente werden vom Server aber als text/html ausgeliefert. Das soll man laut W3 bei XHTML 1.1 nicht tun (XHTML Media Types).

[MarvinM]

Aber im <head> teil steht doch
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

Oder muss ich das an einer anderen Stelle ändern?

[Thorben77]

Der Server sendet im Header aber Content-Type: text/html :wink: .

Änder einfach im Kopfteil den Content-Type in text/html und änder den Dokumenttyp zu XHTML 1.0 Transitional.
Würdest Du die Dateien nämlich vom Server wirklich als application/xhtml+xml ausliefern lassen, würde der IE mal wieder Probleme bereiten :roll: .

[Matze]

Zitat:

Zitat von Thorben77

Würdest Du die Dateien nämlich vom Server wirklich als application/xhtml+xml ausliefern lassen, würde der IE mal wieder Probleme bereiten :roll: .

Oder eben mittels PHP prüfen, was meist funktioniert:

Code:

if (stristr($_SERVER["HTTP_ACCEPT"], 'application/xhtml+xml'))
{
    header('Content-type: application/xhtml+xml');
}
else
{
    header('Content-type: text/html');
}

[alcaeus]

Und dann gleichzeitig die halbe HTTP-Spec weglassen. Guck dir mal das an ;)

Greetz
alcaeus

[jfheins]

Meiner Meinung nach, hat das aber einen kleinen Nachteil ... und zwar wird es als html gesendet, wenn beides ginge ...

Mein Opera sendet folgenden Accept:

Code:

text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

Und der Code von deiner Seite würde mir jetzt text/html senden, obwohl mein browser xhtml ebenso gerne hätte ...

P.S. Ich benutze auch den Code von Matze - wers kann kriegt es, auch wenn ers nicht so gerne mag ... der Inhalt ist eh immer gleich, nur der MIME-Typ unterscheidet sich ja :mrgreen:

[alcaeus]

Falsch. Dein Browser hat HTML lieber. Warum? Weil text/html in der Liste vor application/xhtml+xml steht.

Greetz
alcaeus

[MarvinM]

Zitat:

Zitat von Matze

Code:

if (stristr($_SERVER["HTTP_ACCEPT"], 'application/xhtml+xml'))
{
    header('Content-type: application/xhtml+xml');
}
else
{
    header('Content-type: text/html');
}

Ich hab das gerade im Header von meiner Seite eingebunden, jetzt gibt er nen Fehler aus (XML Verarbeitung), was mache ich falsch?

Zitat:

Zitat von alcaeus

Und dann gleichzeitig die halbe HTTP-Spec weglassen. Guck dir mal das an

Ähm :oops: Ich werd aus dem Text net wirklich schlau... Was ist das?

[MarvinM]

So der Fehler ist jetzt weg (lag am nicht-Validen xHTML...)

Aber dafür macht das Design wieder Probleme :-( Der grüne Hintergrund wird jetzt nicht mehr groß genug angezeigt, wenn man runterscrollt hat, man grauen anstatt grünen Hintergrund.

Ich hab nur den php-Code im header eingefügt, sonst nichts geändert, woran kann das liegen?

[Thorben77]

Nimm mal das auto aus dem Margin für das Body-Element raus und lösch das:

Code:

html, body {
  height: 100%;
}

[MarvinM]

Danke, funktioniert ;-)

Wofür is das denn gut, wenn ich application/xhtml+xml eingebe?