css werk niet in IE!

Status
Niet open voor verdere reacties.

timboiscool

Gebruiker
Lid geworden
27 nov 2008
Berichten
205
Hallo lezers,

Ik ,Tim, ben een site aan het maken volledig uit code geen extra programmas alleen notepad++.
maar ik zit nu met hel probleem dat de css het niet doet op IE ik heb wel een aantal dingen gelezen maar ksnap er niks van D:

Weet iemand hoe ik kan zorgen dat de css code gewoon in alle IE versies werken???
 
tsja...

dat wordt gewoon uitzoeken ;-) is geen kant en klare oplossing voor. Elke browser heeft zijn eigen manier van html en css implementeren. En daar is IE helemaal een drama in. Welke browser versie van IE test je je website in?

Wat je kan helpen:
  • CSS valideren, om te kijken of je code wel volgens de regels is.
  • (x)Html valideren, om te kijken of je code wel volgens de regels is.
  • De developer help tools gebruiken in IE om te kijken waar het fout gaat.

CSS validatie
xHTML validatie
 
Bron van index.html
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>

<div id="container">

<div id="header">

<?php
require('header.php');
?>

</div>

<div id="leftnav">

<?php
require('Leftbar.php');
?>

</div>



<div id="body">


<br>
<h2>Hallo, bedankt voor het bezoeken van LeerLord!</h2>

<h3>Hieronder ziet u een samenvatting van wat leerlord is:<br>
	LeerLord is een site waat je kan rekenen, taal en spelling kan doen!<br>
	LeerLord wordt nu nog gemaakt want niet alles werkt perfect.<br>
	Maar natuurlijk krijgt LeerLord ook nog spelletjes om te ontspannen!<br>
	We zijn ook nog van plan schaken erin te zetten,<br>
	en een lijst met mensen die hoog hebben gescoord bij de spellen.<br>
	U moet niet vergeten dat de site nu nog wordt gemaakt en niet klaar is.<br>
	We werken nu op het maken van de reken pagina.<br><br>
	Voor mensen kinderen die zouden willen helpen en enig verstand hebben met computers,<br>
	zouden aan Tim van osch kunnen vragen of hij of zij mag helpen.<br>
	Je kunt het persoonlijk vragen als je me kent maar ook via me e-mail.</h3><br>

<h2>Vriendlijke groet, Tim van osch.</h2>



</div>

<div id="footer">

<div class="footy">

<ul>

<li><h3>Gemaakt door: Tim!<br>Voor Kinderen die leren!</h3></li>

</ul>

</div>
</div>

</div>

</body>
</html>



bron van style.css:

Code:
#container {

width: 900px;

}

#header {

width: 900px;
height: 100;
position: relative;
background-image: url(http://i360.photobucket.com/albums/oo50/timboiscool9/LLBanner.jpg);
border-bottom: 2px solid #000000;
}

#header a {

color: #000000;
text-decoration: underline;
font-weight: bold;
font-family: verdana;
font-size: 14px;

}

#header a:visited {

color: #990099;
text-decoration: underline;
font-weight: bold;

}

#header a:hover {

color: #FF0000;
text-decoration: none;
font-weight: bold;

}

.HoriLink {

position: absolute; top: 60px; left:300px;

}

.HoriLink ul {

margin: 0px;

}

.HoriLink li {

margin: 0px 25px 0px 0px;
list-style-type: none;
display: inline;

}


#leftnav {

float: left;
width: 125px;
height: 900px;
background-image: url(http://i360.photobucket.com/albums/oo50/timboiscool9/LLLeftBanner.png);
background-color: #99CCFF;
border-right: 1px solid #000000;

}

#leftnav p {

text-decoration: underline;
font-weight: bold;
font-family: verdana;
font-size: 18px;

}

#leftnav p:visited {



color: #990099;
text-decoration: underline;
font-weight: bold;

}

#leftnav p:hover {

color: orange;
text-decoration: none;
font-weight: bold;


}

#body{

height: 1024;
background-image: url(http://preview.canstockphoto.com/canstock4555169.png);
color: #003366;
text-align: center;
font-size: 18px;

}

#footer {

position: relative;
background-color: #990099;
border-top: 1px solid #000000;
clear: both;
}


.footy {

position: absolute; top: 10px; left:300px;

}

.footy ul {

margin: 0px;

}

.footy li {

margin: 0px 25px 0px 0px;
list-style-type: none;
display: inline;

}

/* IE6 css fixer v0.95: Thu, 10 Mar 2011 17:53:07 +0100 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
* html #leftnav {display:inline;}

/* add zoom:1 to pos:relative elements */
* html #header,
* html #footer {zoom:1;}

/* add overflow:visible to (submit) buttons */
 * html input, * html button {overflow:visible;}
 
 
 /*---------------------------- */
 
 
_ html #leftnav {display:inline;}

/* add zoom:1 to pos:relative elements */
_ html #header,
_ html #footer {zoom:1;}

/* add overflow:visible to (submit) buttons */
 _ html input, _ html button {overflow:visible;}
 
ik heb alles ff in 1 beatnd gezet voor de makkelijkheid en dit werkt in:
frontpage preview
Google chrome
ie 8.0

deze code gebruik ik dan:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >
<style>
#container {

width: 900px;

}

#header {

width: 900px;
height: 100;
position: relative;
background-image: url(http://i360.photobucket.com/albums/oo50/timboiscool9/LLBanner.jpg);
border-bottom: 2px solid #000000;
}

#header a {

color: #000000;
text-decoration: underline;
font-weight: bold;
font-family: verdana;
font-size: 14px;

}

#header a:visited {

color: #990099;
text-decoration: underline;
font-weight: bold;

}

#header a:hover {

color: #FF0000;
text-decoration: none;
font-weight: bold;

}

.HoriLink {

position: absolute; top: 60px; left:300px;

}

.HoriLink ul {

margin: 0px;

}

.HoriLink li {

margin: 0px 25px 0px 0px;
list-style-type: none;
display: inline;

}


#leftnav {

float: left;
width: 125px;
height: 900px;
background-image: url(http://i360.photobucket.com/albums/oo50/timboiscool9/LLLeftBanner.png);
background-color: #99CCFF;
border-right: 1px solid #000000;

}

#leftnav p {

text-decoration: underline;
font-weight: bold;
font-family: verdana;
font-size: 18px;

}

#leftnav p:visited {



color: #990099;
text-decoration: underline;
font-weight: bold;

}

#leftnav p:hover {

color: orange;
text-decoration: none;
font-weight: bold;


}

#body{

height: 1024;
background-image: url(http://preview.canstockphoto.com/canstock4555169.png);
color: #003366;
text-align: center;
font-size: 18px;

}

#footer {

position: relative;
background-color: #990099;
border-top: 1px solid #000000;
clear: both;
}


.footy {

position: absolute; top: 10px; left:300px;

}

.footy ul {

margin: 0px;

}

.footy li {

margin: 0px 25px 0px 0px;
list-style-type: none;
display: inline;

}

/* IE6 css fixer v0.95: Thu, 10 Mar 2011 17:53:07 +0100 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
* html #leftnav {display:inline;}

/* add zoom:1 to pos:relative elements */
* html #header,
* html #footer {zoom:1;}

/* add overflow:visible to (submit) buttons */
 * html input, * html button {overflow:visible;}
 
 
 /*---------------------------- */
 
 
_ html #leftnav {display:inline;}

/* add zoom:1 to pos:relative elements */
_ html #header,
_ html #footer {zoom:1;}

/* add overflow:visible to (submit) buttons */
 _ html input, _ html button {overflow:visible;}
</style>
</head>
<body>

<div id="container">

<div id="header">

<?php
require('header.php');
?>

</div>

<div id="leftnav">

<?php
require('Leftbar.php');
?>

</div>



<div id="body">


<br>
<h2>Hallo, bedankt voor het bezoeken van LeerLord!</h2>

<h3>Hieronder ziet u een samenvatting van wat leerlord is:<br>
	LeerLord is een site waat je kan rekenen, taal en spelling kan doen!<br>
	LeerLord wordt nu nog gemaakt want niet alles werkt perfect.<br>
	Maar natuurlijk krijgt LeerLord ook nog spelletjes om te ontspannen!<br>
	We zijn ook nog van plan schaken erin te zetten,<br>
	en een lijst met mensen die hoog hebben gescoord bij de spellen.<br>
	U moet niet vergeten dat de site nu nog wordt gemaakt en niet klaar is.<br>
	We werken nu op het maken van de reken pagina.<br><br>
	Voor mensen kinderen die zouden willen helpen en enig verstand hebben met computers,<br>
	zouden aan Tim van osch kunnen vragen of hij of zij mag helpen.<br>
	Je kunt het persoonlijk vragen als je me kent maar ook via me e-mail.</h3><br>

<h2>Vriendlijke groet, Tim van osch.</h2>



</div>

<div id="footer">

<div class="footy">

<ul>

<li><h3>Gemaakt door: Tim!<br>Voor Kinderen die leren!</h3></li>

</ul>

</div>
</div>

</div>

</body>
</html>

suc6 met zoeken!
 
Hoi timboiscool,
Ik heb 'm ook even in een pagina gemonteerd, en daar kwam uit:
  • html-validator (zoals hierboven al gezegd: eerst doen!): de <meta> met een "charset" ontbreekt, een <title>...</title> ontbreekt.
  • css-validator: op twee plaatsen (bij de #header en bij de #body) staat voor de height een getal zonder px er achter; daardoor geeft FF7 geen header te zien. En de eigenschap "zoom" is ongeldige code.
Om met de laatste te beginnen: die staat in de css in het rijtje met IE6-hacks. Maar die zitten er in op een ouderwetse manier, en daardoor heb je er (bv. voor IE8) meer last dan gemak van.
Weg ermee! :)
Ik heb gedaan:
  • Een "charset" en een <title> toegevoegd:
    HTML:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test :: timbo</title>
  • De px achter de height gezet waar die ontbrak;
  • Alle css-regels met IE6-hacks helemaal verwijderd.
  • Het cijfertjes achtergrond-img verplaatst van de #body naar de #container.
Nu is het valid html en valid css, en is er geen verschil tussen Firefox, IE6, IE7, Chrome, Opera en Safari.
Met vriendelijke groet,
CSShunter
___________
PS: de cijfertjes-achtergrond zou ik heel licht houden, anders zijn de letters niet goed te lezen.
 
Laatst bewerkt:
Hoi timboiscool,
Ik kreeg een PM'metje van je met de vraag of ik de bovengenoemde voorbeeld-pagina's van internet wilde halen, omdat ze gevonden kunnen worden door Google.

Nu zet ik normaal in de html altijd het regeltje:
HTML:
<meta name="robots" content="noindex, nofollow"><!-- alleen voor deze testpagina -->
zodat de Google-bot ze overslaat, maar dat had ik deze keer kennelijk niet gedaan. Sorry!
Intussen het regeltje erbij gezet, binnen een paar weken (als de Google-bot weer langs komt) zal de pagina nier meer te Google'en zijn. :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan