[HTML / PHP] internet explorer 6
Ik heb een klein probleempje, waneer ik mijn page open in firefox 3 dan laat hij
alles goed zien, maaaaaaar als ik hem in internet explorer 6 open dan komt die site erg lelijk en uitgelijnd en niet het zelfde als in firefox...
dit is het html opening...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="black">
....
</body>
</html>
Iemand een iedee?
' *{ iets } ' of een ' .html{ iets } '
zo iets? :O
wel kan ik zeggen dat elementen die vaak niet goed getoond worden vaak met position:relative goed te zetten zijn in ie6.
a:link { color: #105289; }
a:visited { color: #105289; }
a:hover { color: #D31141; }
a:active { color: #368AD2; }
/* De body */
div#body {
width:790px;
height:370px;
padding:100px;
}
div#main {
background-image:url('img/bg.jpg');
background-position:center;
margin-left:134px;
margin-top:-399px;
width:800px;
height:399px;
background-repeat:no-repeat;
border:solid 0px #FFFFFF;
}
div#view {
background-color:#000000;
background-position:center;
margin-left:134px;
margin-top:-399px;
width:800px;
height:400px;
background-repeat:no-repeat;
border:solid 0px #FFFFFF;
}
div#rules {
width:700px;
height:370px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:-15px;
font-size:13px;
}
div#prog {
width:740px;
height:300px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:0px;
font-size:13px;
}
div#viewvac {
width:740px;
height:364px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:0px;
font-size:13px;
}
div#open {
width:540px;
height:50px;
margin-left:160px;
margin-top:130px;
font-size:32px;
color: #000000;
font-family: "Trebuchet MS";
font-weight: bolder;
font-variant: small-caps;
}
/* De title1 */
div#title1 {
width:753px;
height:90px;
padding:5px;
border:0px solid #FFFFFF;
margin-top: 50px;
margin-left: 16px;
}
/* film */
div#film {
width:755px;
height:366px;
padding:5px;
border:0px solid #FFFFFF;
margin-top: 0px;
margin-left: 16px;
}
/* vac */
div#vac {
width:740px;
height:300px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:0px;
font-size:15px;
font-style: normal;
}
/* info*/
div#info {
width:740px;
height:300px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:0px;
font-size:13px;
}
/* contact */
div#contact {
width:740px;
height:300px;
background-color:#FFFFCC;
margin-left:30px;
margin-top:0px;
font-size:13px;
}
/* --END-- */
/* nav */
div#nav {
width:800px;
height:40px;
margin-left:30px;
text-align: left;
}
div#nav ul {
float:left;
margin:0;
padding:0;
}
div#nav ul li {
display:block;
float:left;
}
div#nav ul li a {
float:left;
border:none;
padding:0px 15px 0 15px;
height:25px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#FFFFFF;
text-decoration:none;
display:block;
font-style: normal;
}
/* links */
a {
text-decoration:none;
color: #FFFFFF;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
/* De paragraph */
p {
margin:2px 0 15px 0;
line-height:1.3em;
}
/* link hover
a:hover {
border-bottom:1px solid #FFFFFF;
background-repeat: repeat-x;
text-decoration: underline;
}
*/
/* Header 1 */
h1 {
font-family: "Trebuchet MS";
font-size: 14px;
font-style: normal;
color: #FFFFFF;
}
/* Header 2 */
h2 {
font-family: "Trebuchet MS";
font-size: 14px;
font-style: normal;
color: #FFFFFF;
text-decoration: underline;
}
background-color: #000;
}
inplaats van dat <body bgcolor="">
Gewijzigd op 01/01/1970 01:00:00 door Nick
Het probleem ligt er alleen aan dat je alle divs geen positie mee geeft, op zich niet erg, hij volgt dan de normale flow van de pagina en zijn al je divs statisch, maar zodra je vervolgens items begint te floaten, weet IE niet meer wat ie er mee aan moet. ik zou eens zoeken op het gebroken box model van IE en je pagina (divs en dergelijke) een vaste positie mee mee geven dmv. position:relative of absolute
Waneer je alles wil gaan floaten, moet je rekening houden met veel debugging en hacking voor IE en een tip mocht je dat willen doen, zorg ervoor dat je onder elke gefloate rij een class mee geeft met clear:both.
<img src="img/t.jpg" height="98" width="150" style="border:#000000 solid 0px; position:relative; clear:both;" />
zo zien all mijn images er uit :(