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

Fobby · #1 05.01.07, 15:46

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

vektorpixel · #2 05.01.07, 16:40

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!

Fobby · #3 06.01.07, 11:13

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

vektorpixel · #4 07.01.07, 19:37

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!

Fobby · #5 07.01.07, 20:05

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.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem bei Webseiten darstellung	most-wanted	Hilfestellung, Tipps und Tricks	16	21.03.09 18:46
Linien darstellung fehlt	chrisTHEgunner	Hilfestellung, Tipps und Tricks	2	17.05.08 10:09
Darstellung im IE und FF unterscheiden sich..	Darkwing-dave	Hilfestellung, Tipps und Tricks	3	01.11.06 17:23
Maraz Design / Comic design	Azzurri	Hilfestellung, Tipps und Tricks	7	04.03.06 01:10
CSS richtig, aber Darstellung falsch?	socke	Hilfestellung, Tipps und Tricks	2	27.09.05 20:11

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)