Weer een CSS probleem

Status
Niet open voor verdere reacties.

Systemizer X100

Terugkerende gebruiker
Lid geworden
24 mei 2003
Berichten
1.636
:eek: 't Is toch ook wat? Zit ik weer met een CSS probleempje.
Het zit zo, ik heb nu al een paar dagen gewerkt aan een artblog, de meeste basisfuncties op de hoofdpagina werken al, maar het probleem zit 'm in de layout.
Ik heb ontdekt dat Internet Explorer er weer een zooitje van maakt. Gebeurt ook iedere keer...
Ik heb namelijk wat margins ingesteld (in combinatie met het zetten van een absolute positie) zodat de css boxes goed geplaatst worden. Echter, IE doet er iets raars mee.

Hier wat screenies (let even niet op de scrollbar in de linker box):
http://img72.imageshack.us/img72/6859/weblayoutff4sw.png
Dit is hoe de website eruitziet in Firefox.
En dit is wat Internet Explorer ervan maakt:
http://img72.imageshack.us/img72/3462/weblayoutie0mv.png
Je ziet het. De vertikale posities van de linker en rechterbox kloppen niet, terwijl ik daar toch echt margins heb geplaatst.

Ik zal even de CSS posten. Het linkergedeelte is .latestdrawings en het rechtergedeelte .toolbar

Code:
body {
  background: #1D262F;
  font-family: tahoma,arial,"ms sans serif";
  font-size: 11px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.header {
  background: #7699AD;
  text-align: center;
  margin: 20px 20px 0px 20px;
  border: 5px solid #D9E4EC;
  height: 80px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 70px;
}

html>body .header {
  height: 70px;
}

.latestdrawings {
  background: #7699AD;
  position: absolute;
  top: 100px;
  left: 0px;
  margin: 20px;
  padding: 10px;
  height: 512px;
  border: 5px solid #D9E4EC;
  overflow: auto;
  width: 250px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 220px;
}

html>body .latestdrawings {
  width: 220px;
}

.blogarea {
  background: #9CBBCD;
  margin: 20px 188px 20px 290px;
  padding: 10px;
  border: 5px solid #D9E4EC;
}

.blogentry {
  padding: 10px 0px 15px 0px;
  border-bottom: 1px dotted #444444;
}

.toolbar {
  background: #7699AD;
  position: absolute;
  top: 100px;
  right: 0px;
  margin: 20px;
  padding: 10px;
  border: 5px solid #D9E4EC;
  text-align: center;
  width: 148px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 118px;
}

html>body .toolbar {
  width: 118px;
}

Ik snap het niet meer, deze boxes zijn in principe direct overgenomen van thenoodleincident.com. Heel vaag.
Weet iemand wat ik moet doen om dit goed te krijgen?
 
Aha, ik heb het probleempje opgelost. Ik moest de body margins op 0 zetten. De body margins zijn waarschijnlijk verschillend in IE en FF. Achja. Probleem opgelost :)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan