[DIV] absolute position in ie6+7 goed in ff niet. - Softwareontwikkeling

dinsdag 31 juli 2007 17:35

Acties:

Verwijderd

Topicstarter

Goeiedag,

Ik ben een layout aan het maken. Ik centreer een plaatje van 1000 bij 4000 in een div.

Cascading Stylesheet:

 body {font-size:62.5%; width: 100%; text-align: center; background-color:rgb(204,205,240);margin-top:0; margin-bottom:10px; margin-left:auto; margin-right:auto; font-family:verdana,arial,sans-serif; color: rgb(255,255,255);} /*Font-size: 1.0em = 10px when browser default size is 16px*/

.header {width:1000px; height:4000px; text-align: center; margin-top:10px; margin-bottom:10px; !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:auto; margin-right:auto; padding:0 0 0; border:solid 0px rgb(150,150,150); background:rgb(255,255,255) url(../_images/bg.gif) no-repeat; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.column1{
 position:absolute;
 top:300px;
 left:200px;
 width:150px;
 height:225px;
 border:dotted 2px rgb(196,97,199);
 margin-bottom:0;
 padding-bottom:0px;
 overflow:hidden;
}

.column2{
 position:absolute;
 top:300px;
 left:425px;
 width:150px;
 height:225px;
 border:dotted 2px rgb(196,97,199);
 margin-bottom:0;
 padding:0 0 0;
 overflow:hidden;
}

.column3{
 position:absolute;
 top:300px;
 left:650px;
 width:150px;
 height:225px;
 border:dotted 2px rgb(196,97,199);
 margin-bottom:0;
 padding:0 0 0;
 overflow:hidden;
}

PHP:

<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" media="screen,projection,print" href="_css/style.css" />
</head>

<body>

<DIV class=header>


  <DIV class=column1>
<A HREF=index.php?picture=1 target=_blank><IMG SRC=tn1.jpg WIDTH=150 HEIGHT=225 BORDER=0></A>
  </DIV>

  <DIV class=column2>
  <A HREF=index.php?picture=2 target=_blank><IMG SRC=tn2.jpg WIDTH=150 HEIGHT=225 BORDER=0></A>
  </DIV>

  <DIV class=column3>
  <A HREF=index.php?picture=3 target=_blank><IMG SRC=tn3.jpg WIDTH=150 HEIGHT=225 BORDER=0></A>
  </DIV>
</DIV>

Firefox (=ff) centreerd het plaatje. Vervolgens positioneerd ff vanuit het venster waardoor de plaatjes te ver naar links staan.
Internet Explorer 6 en 7 (=ie) centreerd ook het plaatje en positioneerd vanuit het plaatje. In ie staat het dus allemaal goed op mijn scherm.
Nu heb ik ook al relative gepositioneerd, maar dan gaat het in ie6 niet goed.

Kan iemand mij vertellen waar het foutgaat en wat ik kan aanpassen om het goed te krijgen.

ik heb het wel online, maar het gaat om een adult site. vandaar dat ik geen url erin zet.

Alvast bedankt, Michel

dinsdag 31 juli 2007 18:01

Acties:

crisp

Devver

Pixelated

Begin eerst eens met een volledige doctype toe te voegen zodat alle browsers in standards-compliant mode renderen (waarschijnlijk gaat het dan in IE ook fout

)

Verder zou ik voor column-based layouts gebruik maken van floats ipv absolute positioning.

Intentionally left blank

Reageer