kostenloser Webspace werbefrei: lima-city

Problem mit Divs im IE und/oder Firefox

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   karpfen

   

   karpfen hat kostenlosen Webspace.

   21:43, 4.4.2007

   Hi zusammen,
   
   ich habe da ein Problem mit divs in meiner neuen Homepage.
   Beim IE wird alles weiter nach rechts raus geschoben und im Firefox normal angezeigt. Ich werde die Homepage gleich mal auf meinen Webspace hier laden und sie verlinken.
   Das ist so natürlich etwas blöd, weiss da eventuell jemand eine Lösung?
   Irgendwie ist das glaub ich ein Problem mit dem margin-left in meiner style.css.
   Damit kann der IE wohl nicht so gut, bzw richtet es an einem anderen Div aus wie der Firefox :(
   
   Vielen Dank schonmal.
   
   Hier der Link:
   
   http://karpfen.lima-city.de/bdo/index.php
   
   Und hier noch der darauf bezogene Auszug aus der CSS-Datei:
   
   

   html{}
   body
   {
   background-color:#3a3632;
   margin:0;
   padding:2% 0 0 0;
   text-align:center;
   }
   
   html>body{}
   
   .bg
   {
     	text-align:left;
   	margin-top: 0px;
   	margin-left:auto;
   	margin-right:auto;
   	margin-bottom:20px;
   	background-color:#3a3632;
   	padding : 0px;
   	width:940px;
   	height:1250px;
   	border:green solid 2px;
   	position:relative;
   
   }
   
   .header
   {
     	text-align:center;
   	margin-top: 2px;
   	margin-left: 2px;
   	background-color:#3a3632;
   	padding : 0px;
   	width:930px;
   	height:150px;
   	position:absolute;
   
   }
   .mainbox
   {
     	font-family:Monotype Corsiva;
     	color:#0000000;
   	font-size:14pt;
     	text-align:left;
   	margin-top:230px;
   	margin-left:5px;
   	background-color:#3a3632;
   	padding : 0px;
   	width:900px;
   	height:1000px;
   	position:absolute;
   	background-image:url(./Bilder/pergament2.jpg);background-repeat:no-repeat;background-position:center;
   	border:red solid 2px;
   
   }
   .luft
   {
     	text-align:center;
   	margin-top:215px;
   	background-color:#3a3632;
   	padding : 0px;
   	width:940px;
   	height:10px;
   	position:absolute;
   }
   .luft2
   {
     	text-align:center;
   	margin-top:850px;
   	background-color:#3a3632;
   	padding : 0px;
   	width:940px;
   	height:10px;
   	position:absolute;
   }
   #headerbild
   {
     margin-top:8px;
     margin-left:8px;
   }
   #left {
   	text-align:center;
   	width: 200px;
   	height: 610px;
   	margin-left:25px;
   	margin-top:5px;
   	float:left;
   	background-color:transparent;
   	position:relative;
     	font-family:Monotype Corsiva;
     	color:#0000000;
   	font-size:16pt;
     	text-align:left;
   	border:blue solid 2px;
   
   }
   #right {
   text-align:left;
   height: 655px;
   width: 100px;
   margin-left:840px;
   margin-top:5px;
   float:left;
   background-color:transparent;
   position:absolute;
   
   
   }
   #content {
       position:relative;
   	text-align:left;
   	width:610px;
   	height: 955px;
   	float:left;
   	margin-left:240px;
   	margin-top:5px;
   	background-color:transparent;
   	position:absolute;
   	color:#000000;
     	font-family:Monotype Corsiva;
     	color:#0000000;
   	font-size:16pt;
     	text-align:left;
   	border:yellow solid 2px;
   
   }

   
   
   Beitrag geaendert: 4.4.2007 21:53:39 von karpfen

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. keiax

   keiax hat kostenlosen Webspace.

   1:26, 5.4.2007

   Lösch das mal raus:
   margin-left:240px;
   
   Der IE interpretiert Meines Wissens nach diese Auszeichnung,
   der FF nicht.
   Der FF will bei sowas
   margin-left-width:240px;
   sehen
   
   Es gibt nicht nur für HTML einen Validator des W3C
   http://jigsaw.w3.org/css-validator/
   
   es ist ohnehin besser statt mit einem Border einen Abstand über eine Positionierung zu realisieren. So wie du das geschrieben hast erübrigt sich das
   position:relative;
   weil es sich nur auf den Bezug der Angaben top,left,right und bottom bezieht.
   
   
   
   Beitrag geaendert: 5.4.2007 1:26:53 von keiax
4. Autor dieses Themas

   karpfen

   

   karpfen hat kostenlosen Webspace.

   6:03, 5.4.2007

   Ah den Validator kannte ich noch nicht.
   Ich werde das mal umsetzen und dann mal schauen.
   
   Vielen Dank keiax.

5. ferdinand24

   

   ferdinand24 hat kostenlosen Webspace.

   18:49, 5.4.2007

   Verschoben nach HTML & Javascript
   
   Bei Rückfragen PN an mich!
6. Autor dieses Themas

   karpfen

   

   karpfen hat kostenlosen Webspace.

   18:56, 5.4.2007

   Lösch ich das raus:
   
   margin-left:240px;
   
   Dann ist es im IE zwar korrekt aber dann eben im FF nicht mehr.
   Dann verschiebt sich der Text nach links über mein Navi
   
   margin-left-width:240px;
   ^^ Da scheint was nicht zu passen, das bringt rein gar nichts.
   
   Edit:
   
   Ursache war in der Tat das position:relative;
   
   Danke für deine Hilfe :)
   
   
   Beitrag geaendert: 5.4.2007 18:58:31 von karpfen

7. timmythom

   timmythom hat kostenlosen Webspace.

   18:30, 17.4.2007

   Ich halte das mit margin-left-width für schwachsinn!
   Es könnte ein Problem mit dem Boxenmodell sein, also einfach ganz am Anfang dieses HTML4 doctype einfügen:
   

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

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?