[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.