Photoshop-Cafe.de :: Dein Photoshop-Forum - Web-Design Darstellung Design IE / Firefox

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)

- -

Darstellung Design IE / Firefox (https://www.photoshop-cafe.de/forum/showthread.php?t=2309)

Darstellung Design IE / Firefox

Hallo,

Nach langer Zeit melde ich mich mal wieder mit einem neuen Problem. Ich habe ein neues Design gebastelt, welches im IE auch hervorrangend funktioniert. Nur im Firefox wird es nicht wie gewünscht dargestellt. Woran liegt das? Falsche Reihenfolge der Style-Angaben? Keine Ahnung! Kann jemand helfen?

Hier der Code:

HTML-Code:

<html>

<head>

<style type="text/css">

body {margin:5px 0px 0px 0px;text-align:center;  /* Zentrierung im Internet Explorer */ }



div#seite {text-align:left;margin: 0 auto;width:990px;}

#header {float:left;width:782px;height:85px;background:#EEF3F6;border: #CFD4D7 solid 1px;margin:0px 0px 5px 0px;}

#webcam {width:200px;height:150px;float:right;margin:0px 0px 10px 2px;background:#EEF3F6;border:#cfd4d7 solid 1px;}

#newsdiv {width:200px;min-height:100px;float:right;clear:right;margin:0px 0px 10px 2px;border:#cfd4d7 solid 1px;}

#nav {float:left;clear:left;width:150px;background: #DDE8EB;border: #CFD4D7 solid 1px;margin-top:0px;}

ul#navigation {margin:5px 0px 0px 18px;padding-left:0px;}

ul#navigation li {padding-bottom:3px;padding-left:0px;border-bottom:#CFD4D7 solid 1px;}

#usercount {width:150px;background:#eef3f6;border:#cfd4d7 solid 1px;float:left;clear:left;margin-top:10px;}

#umfragediv {width:200px;float:right;clear:right;margin:0px 0px 10px 2px;border:#cfd4d7 solid 1px;background:#EEF3F6;padding: 5px 0px 5px 0px;}







#content {width:100%;border: #CFD4D7 solid 1px;margin:0px 205px 0px 155px;}



</style>

</head>

<body>



<div id="seite">



<div id="header" align="right">

Header

</div>



<div id="webcam" align="center">

Box Webcam

</div>



<div id="nav">

<ul id="navigation">

<li ><a href="#" >Startseite</a></li>

<li ><a href="#" >Zur Person</a></li>

<li ><a href="#" >Blog</a></li>

<li ><a href="#">Impressionen</a></li>

<li ><a href="#">Links</a></li>

<li ><a href="#">Kontakt</a></li>

<li ><a href="#">Gästebuch</a></li>

</ul>

</div>



<div id="newsdiv">

Box News

</div>



<div id="usercount">

Box Usercount

</div>



<div id="umfragediv">

Box Umfrage

</div>



<div id="content">

Box Content

</div>





</div>



</body>

</html>

Beispiele wie es sein sollte, respektive nicht siehe Anhang!

Tja, Listen haben standardmäßig einen "margin"-Wert, FF auch noch einen "padding-left"-Wert und der unterscheidet sich dummerweise in IE und FF. Mit folgendem Code sieht es in beiden Browsern gleich aus:

Code:

ul {

        list-style:none;

        margin:0px;

        padding:0px;

}

Davon als Basis ausgehend kannst du die entsprechenden Werte hinzufügen. Da du ja bereits margin:5px definierst, sollte es ausreichen, padding-left:0px anzuhängen, also so:

Code:

ul#navigation {margin:5px 0px 0px 18px; padding-left:0px}

Hoffe, geholfen zu haben :)

Ok, damit wäre das Problem mit der verkorksten Navigation bei Betrachtung mit Firefox gelöst, ich danke dir!

Doch was ist mit den falsch positionierten Div-Containern am rechten Rand? Diese sollten oben bündig mit dem längeren Balken beginnen (wie im angehängten Screenshot aus dem IE zu sehen). // ---> edit: Dieses Problem konnte ich beseitigen, die Div-Elemente waren falsch angeordnet. Es bleibt jedoch weiterhin das Problem mit der richtigen Positionierung des Contents. Ich habe den Quellcode oben mal aktualisiert und berichtigt.

Ausserdem sollte der Content-Bereich in der Mitte erscheinen, und nicht verdeckt hinter dem Header gleich am Anfang.

Zur besseren Verständigung habe ich die Boxen noch beschriftet. Siehe Anhänge.

Danke für weitere Tipps!

Ok, ich habs folgendermaßen gelöst ( sieht nu bis auf die Mindesthöhe der News-Box in beiden Browsern gleich aus )

HTML-Code:

<html>

<head>

<style type="text/css">

body {margin:5px 0px 0px 0px;text-align:center; /* Zentrierung im Internet Explorer */ }

div#seite {text-align:left;margin: 0 auto;width:990px;}

#header {float:left;width:782px;height:85px;background:#EEF3F6;border: #CFD4D7 solid 1px;margin:0px 0px 5px 0px;}

#webcam {width:200px;height:150px;float:right;margin:0px 0px 10px 2px;background:#EEF3F6;border:#cfd4d7 solid 1px;}

#newsdiv {width:200px;min-height:100px;float:right;clear:right;margin:0px 0px 10px 2px;border:#cfd4d7 solid 1px;}

#umfragediv {width:200px;float:right;clear:right;margin:0px 0px 10px 2px;border:#cfd4d7 solid 1px;background:#EEF3F6;padding: 5px 0px 5px 0px;}

#nav {float:left;clear:left;width:150px;background: #DDE8EB;border: #CFD4D7 solid 1px;margin-top:0px;}

ul#navigation {margin:5px 0px 0px 18px;padding-left:0px;}

ul#navigation li {padding-bottom:3px;padding-left:0px;border-bottom:#CFD4D7 solid 1px;}

#usercount {width:150px;background:#eef3f6;border:#cfd4d7 solid 1px;float:left;clear:left;margin-top:10px;}

#content {

        border: #CFD4D7 solid 1px;

        margin-left:5px;

        width:625px;

        float:left;

}

#links {

        float:left

}

</style>

</head>

<body>

<div id="seite">

 <div id="header" align="right"> Header </div>

  <div id="webcam" align="center"> Box Webcam </div>

        <div id="links">

           <div id="nav">

           <ul id="navigation">

            <li ><a href="#" >Startseite</a></li>

                <li ><a href="#" >Zur Person</a></li>

                <li ><a href="#" >Blog</a></li>

                <li ><a href="#">Impressionen</a></li>

                <li ><a href="#">Links</a></li>

                <li ><a href="#">Kontakt</a></li>

                <li ><a href="#">Gästebuch</a></li>

                </ul>

           </div>

                <div id="usercount"> Box Usercount </div>

        </div>



        <div id="content"> Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf  Box Content is here etc. pp<br> Du di da del d&ouml; di dei<br> Schrabb schrab schrabb dum di da du do di dei al lal lalal i du j jernfu nru nm urnfuf </div>



  <div id="newsdiv"> Box News </div>

  <div id="umfragediv"> Box Umfrage </div>





</div>

</body>

</html>

Musst mal selbst sehen, was ich verändert habe und ob es dir so passt. Hab ne Weile rumgespielt und hab nicht mehr alle Schritte im Kopf ;)

Ja funktioniert prima. sogar ohne das zusätzliche Div. Hab herausgefunden, dass die Angabe width:100% irgendwie zum Problem geführt hat. Mit der Angabe in Pixel funktioniert alles prima. Wieso weiss ich nicht.

Danke!

Das zusätzliche Div brauchte ich auch erst bei großem Inhalt, bei kleinem ist es egal. Aber vielleicht hast du ja sonst noch was geändert/anders, so dass es bei dir funktioniert.