Archief - Centreren in IE, is er iets mis met mijn CSS?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

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:

<!--[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....:help: bedankt :-)

El Toro

Legacy Member
is dat een fout? moet da er bij staan? of vraag je nu aan mij welke IE ik het in test? :D als het het laatste is, IE8

GregoryCo

Legacy Member
Code:
#container{background-color: #d4d4d4; width:960px; margin-left: auto; margin-right: auto; position:relative; text-align:left;}
Probeer dit eens ipv wat je hebt. Zou moeten lukken.
En damn :p die CSS had je beter onder elkaar geschreven, is niet overzichtelijk zo

rumble

Legacy Member
Kzou die media="print" al is media="screen" maken om te beginnen ;)

El Toro

Legacy Member
GregoryCo zei:
Code:
#container{background-color: #d4d4d4; width:960px; margin-left: auto; margin-right: auto; position:relative; text-align:left;}
Probeer dit eens ipv wat je hebt. Zou moeten lukken.
En damn :p die CSS had je beter onder elkaar geschreven, is niet overzichtelijk zo

bedankt, ik zal het meteen eens proberen en zien wat er van komt ;-)

rumble zei:
Kzou die media="print" al is media="screen" maken om te beginnen ;)

zal ik ook meteen proberen, welk verschil maakt dit eigenlijk uit?

Xavez

Legacy Member
"print"-stylesheets worden alleen toegepast als je het document gaat afprinten, "screen"-stylesheets voor schermen, "projection" voor projectors, ... Voor zover die stylesheets werkelijk door de betreffende browsers onderscheiden kunnen worden :-)

adrianhates

Legacy Member
El Toro zei:
bedankt, ik zal het meteen eens proberen en zien wat er van komt ;-)
zal ik ook meteen proberen, welk verschil maakt dit eigenlijk uit?

om het simpel te maken:

screen = wat je in je browser ziet
print = wat je in je print preview ziet ( ctrl + p )

edit : damn you xavez

El Toro

Legacy Member
all right, handig om te weten. Om even terug te komen op die
GregoryCo zei:
En damn :p die CSS had je beter onder elkaar geschreven, is niet overzichtelijk zo
, yes I know, maar mijn groepsgenoot stond erop dat hij de CSS volledig zelf zou uitschrijven, hij vertikt het om Dreamweaver te gebruiken of het iets of wat overzichterlijk te houden voor de rest, heel lastig. Maar dat zijn interne groepsdiscussie, niet nodig hier mijn frustraties te spuien ;-).

nu dus, verdere ontwikkelingen: media:"screen" invoegen heeft inderdaad eindelijk effect, hoera daarvoor, spijtig genoeg komt nu de aap uit de mouw => de regels lijken nog altijd/zitten nog altijd vol fouten (te zitten). (en het centreren lukt nog altijd niet, er is echt iets fout in de rest van de regels :-s)
Bon, ik zal het er verder over hebben met mijn collega's. Als zijn nog eens iets online zetten, kan ik mss hier een linkje plaatsen, dan verstaan jullie beter waar het over gaat.

bedankt tot nu toe allesinds!

janlaureys9

Legacy Member
Met dreamweaver kan je toch perfect u css volledig zelf schrijven ? :p
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan