|
|
Posted by Annemie on 09/22/07 13:05
Hi,
CSS script with 3 kolumns and total width of 960px. De 3 kolums are
exact 960px
See how it looks at http://www.naturistart.eu/test/test-1-1-1.html
Computer 1: IE7.0 en resolution 1152x864 (1,33)
gives a right view see the image at http://www.naturistart.eu/test/ie7.html
(breedte=width, I'm Dutch)
Computer 2: IE6.0 en resolution 1288x800 (1,6)
gives a wrong view. The 3e kolumn is now under the first one.
See the image at http://www.naturistart.eu/test/ie6-1.html
After I have given the 3e kolumn a width of 4px less than before. And
now it looks right.
See the image at http://www.naturistart.eu/test/ie6-2.html
Who knows about? What will be the solution?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<div class=centered>
<div id=fullcontainer>
<img class=mainimage src="960x30.jpg" width=960 height=30>
</div>
<div id=column1>
<a class=test HREF=""><img class=mainimage src="259x30.jpg" width=259
height=30></a>
</div>
<div id=column2>
<a class=test HREF=""><img class=mainimage src="358x30.jpg" width=358
height=30></a>
</div>
<div id=column3>
<a class=test HREF=""><img class=mainimage src="331x30.jpg" width=331
height=30></a>
</div>
</div>
CSS:
html, body {
margin : 0;
padding : 0;
width : 100%;
min-width : 960px;
font-family : Arial,sans-serif;
font-size : 100%;
background-color : #FFFFFF;
}
#fullcontainer { /* breedte 960 */
background: red;
height: 60px;
padding: 0 0;
margin: 5px 0 0 0;
}
#column1 { /* breedte 263 */
height: 60px;
background: yellow;
float: left;
padding: 0 0;
margin: 5px 0 0 0;
}
#column2 { /* breedte 362 */
height: 60px;
background: green;
float: left;
padding: 0 0;
margin: 5px 0 0 0;
}
#column3 { /* breedte 335 */
height: 60px;
background: orange;
float: left;
padding: 0 0;
margin: 5px 0 0 0;
}
..mainimage {
display: block;
margin: 0;
border: 0;
border-width: 0 0 0 0;
}
/**********/
a.test:link img { border: 2px solid #FFFFFF; }
a.test:visited img { border: 2px solid #FFFFFF; }
a.test:hover img { border: 2px solid #F04704; }
a.test:hover {background-position: 0 0;}
a.test:active img { border: 2px solid #FFFFFF; }
/*********/
..centered {
margin: 0 auto;
width: 960px;
}
Regards
Loek
Greetings
Loek
[Back to original message]
|