El Toro
Legacy Member
Hey allen, ik maak een website in groepswerk, en er is me gevraagd de site te centreren in IE, omdat dit mijn groepsgenoten even niet lukt. Omdat het mij ook niet lukt, smijt ik het hier maar even in de groep!
Een van mijn groepsgenoten heeft dus de CSS volledig zelf geschreven, en zegt dat het in FF wel werkt, maar om de quirks uit de IE versie te halen is er daar een aparte versie voor, die zou moeten geladen worden dankzij:
en de stylesIE houdt dus al het volgende in:
ik heb al vanalles zelf geprobeerd, ik heb ook al de centreer-code van uit de sticky geprobeerd en zoveel andere handige tips, niks lijkt te werken. Ziet iemand iets dat ik niet zie? Ik denk zelf dat er misschien een probleem is bij het inladen van de aparte CSS voor IE, maar zelfs als ik dat probeer op te lossen (door van de stylesIE de hoofd CSS te maken) centreert het nog niet, en gebeuren er allemaal nog raardere dingen.
so....
bedankt 
Een van mijn groepsgenoten heeft dus de CSS volledig zelf geschreven, en zegt dat het in FF wel werkt, maar om de quirks uit de IE versie te halen is er daar een aparte versie voor, die zou moeten geladen worden dankzij:
<!--[if IE ]>
<link rel="stylesheet" type="text/css" media="print" href="stylesIE.css"/>
<![endif]-->
en de stylesIE houdt dus al het volgende in:
Code:
html,body{margin-left:2%;margin-right:1%;padding:0;}
body{font-family: arial, Verdana, sans-serif; font-size: 76%; text-align:center; background:#666;}
a{text-decoration:none;}
a:link {color: #d4d4d4; text-decoration: none;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color:#fff;text-decoration: underline;}
a:active {color:#fff;}
a.left{text-align:left;margin-left:5px}
a.right{text-align:right;margin-left:335px}
ul a{font-weight: bold;color:#CFCFCF;cursor: default;}
ul ul a:link, ul ul a:visited{font-weight: normal;color:#CFCFCF;cursor: pointer;}
ul ul a:hover, ul ul a:active{font-weight: normal;color:#CFCFCF;cursor: pointer;}
ul li{background-color: #000;}
ul ul li{background: #000;}
h3{font-size: 0.8em;text-align:center;}
h4{font-size: 0.7em;text-align:center;}
.button{font-size:0.6em;color:#fff;background:#666;margin:auto;padding:2px;}
.button a:hover{border-color:#fff;}
#header{height:10em;color: #fff; background: #7f0000; Clear:left; width:960px;}
#header h1{font-size: 1em;height:auto;margin:0 3%;}
#header h2{font-size: 0.9em;height:auto;margin:0 3%;}
#container{background: #d4d4d4;width:960px;margin:0 auto;text-align:left;min-height:98em;}
#breadcrumbs{display:inline-block;margin-left:0;width:930px ;z-index:10;background-image:url('bc_bg.gif');background-repeat:repeat-x;padding:0 15px;}
#breadcrumbs a {display:inline-block;padding-right: 15px;}
#breadcrumbs a:link {color: #000; text-decoration: none;}
#breadcrumbs a:visited {color: #000; text-decoration: none;}
#breadcrumbs a:hover {color:#7f0000;text-decoration: underline;}
#breadcrumbs a:active {color:#000;}
#welcome {color:#fff;width:700px;height:225px;background:url(welcome.png) no-repeat;margin-left:10%;overflow:auto;}
#welcome p{max-width:650px;width:auto; font-size:0.6em;padding:0 3em;}
#content h4{max-width:400px;}
#content p{max-width:400px;width:auto; font-size:0.6em;padding-left:1em;}
#content{position:absolute;top:14em;color:#fff;margin-left:3%;width:450px;height:900px;border:none;background:url(dialog1f.png) no-repeat;overflow:auto;}
#form{color:#fff; z-index:9;position:absolute;left:550px;border:none;width:300px;background:url(form.png) no-repeat;}
#form h3{text-align:center;max-width:240px;}
#map{color:#000;position:absolute;top:32em;margin-left:9.9%;border:2px solid #fff;}
#smallmap{color:#000;position:absolute;top:45em;margin-left:50%;border:2px solid #fff;}
#kmi {position:absolute;left:550px;top:590px;width:300px;background:transparent url(form.png) no-repeat;padding:20px 65px;}
#kmi h3{color:#fff;text-align:center;max-width:180px;padding:0px;}
#phototext {color:#fff;position:absolute;top:14em; left:600px; background:transparent url(foto.png) no-repeat;width:300px;height:270px;padding:15px 10px;overflow:auto;}
#pagelink {float:right;position:absolute;top:950px;bottom:40px;text-align:right; width:500px; margin:0 250px}
#footer{position:absolute;bottom:4em;z-index:1;width:960px;background:#000;margin:1em 0;}
#footer p{padding:5px 10px;}
#footer{color:#CFCFCF;}
#wrapper{position:absolute;top:0;background:#999999;width:990px;height:auto;margin-left:3%;}
#nav {width:968px ;z-index:10;background: #000;}
#nav,#nav ul {z-index:100;padding:0;margin:0;list-style: none;}
#nav li {z-index:10;float:left;width:150px;padding-left:5px;}
#nav ul {z-index:10;position: absolute;width: 150px;left:-1000px;}
#nav li:hover ul, #nav li.ie_does_hover ul {z-index:100;left:auto;background-position: 0 0;}
#nav a {z-index:10;display: block;margin: 2px 0px 0px 0px;text-align:center;text-decoration: none;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;}
#nav .home{z-index:10;padding-left:1px;}
ik heb al vanalles zelf geprobeerd, ik heb ook al de centreer-code van uit de sticky geprobeerd en zoveel andere handige tips, niks lijkt te werken. Ziet iemand iets dat ik niet zie? Ik denk zelf dat er misschien een probleem is bij het inladen van de aparte CSS voor IE, maar zelfs als ik dat probeer op te lossen (door van de stylesIE de hoofd CSS te maken) centreert het nog niet, en gebeuren er allemaal nog raardere dingen.
so....
bedankt 
als het het laatste is, IE8
die CSS had je beter onder elkaar geschreven, is niet overzichtelijk zo