hallo.
ik heb een style.
Met firefox is het perfect.
Maar met internet explore om te huilen.
is er iets wat automatisch het om zet voor IE?
zo niet zal ik het moeten herschrijven xD
Alvast bedankt!
579 views
Validate je html en css eens.
HTML is wel heel er veel :O
html:
css for firefox.
Er worden dingen nu in het midden gezet.
maar met internet explore gaat het naar links
html:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img {border: none;}
</style>
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->
<!--[if gt IE 7]>
<link href="styleIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
css for firefox.
body{
font-family: Comic Sans MS;
background-image: url(images/bg.png);
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
margin: 0;
padding: 0;
height: 100%;
}
input, option, textarea, select, checkbox {
font-family: Comic Sans MS;
font-size: 8pt;
color: black;
font-weight: none;
border: 1px solid lightgray;
background-color: white;
}
A:link {
color: white;
text-decoration: none;
}
a:link,a:visited {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: darkgray;
}
a:active {
text-decoration: none;
color: white;
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
color: white;
}
.content {
background: lightgray;
width: 920px;
height: 100%;
margin-left: auto ;
margin-right: auto ;
}
.header {
background: lightgray;
padding: 0.5em;
width: 904px;
height: 184px;
background-image: url(images/header.png);
}
.menu {
background: lightgray;
padding: 0.1em;
background-image: url(images/menu.png);
color: White;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
.frame {
background: lightgray;
padding: 0.5em;
background-image: url(images/middle.png);
height: 72%;
}
.footer {
background: lightgray;
padding: 0.5em;
background-image: url(images/footer.png);
text-align: center;
}
.login {
background-image: url(images/login.png);
width: 500px;
height: 500px;
margin-left: auto ;
margin-right: auto ;
margin-top: 50px ;
font-weight: bold;
text-align: center;
font-size: 1.1em;
}
.register {
background-image: url(images/register.png);
width: 500px;
height: 500px;
margin-left: auto ;
margin-right: auto ;
margin-top: 50px ;
font-weight: bold;
text-align: center;
font-size: 1.1em;
}
Er worden dingen nu in het midden gezet.
maar met internet explore gaat het naar links
SanThe schreef op 11.02.2009 23:16Validate je html en css eens.
De bovenstaande css heeft 8 fouten.
Ga daar eerst maar eens aan beginnen.
hoe zie ik de fouten? xD
doe eens een validatie check op http://jigsaw.w3.org/css-validator/
Congratulations! No Error Found.
ok ^^
En nu...?
want het moet voor IE ook goed zijn
body{
font-family: Comic Sans MS;
background-image: url(images/bg.png);
background-attachment: fixed;
background-repeat: repeat;
background-position: top center;
margin: 0;
padding: 0;
height: 100%;
}
input, option, textarea, select, checkbox {
font-family: Comic Sans MS;
font-size: 8pt;
color: #000000;
border: 1px solid #808080;
background-color: #FFFFFF;
}
A:link {
color: #FFFFFF;
text-decoration: none;
}
a:link,a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #696969;
}
a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
color: white;
}
.content {
background: #808080;
width: 920px;
height: 100%;
margin-left: auto ;
margin-right: auto ;
}
.header {
background: #808080;
padding: 0.5em;
width: 904px;
height: 184px;
background-image: url(images/header.png);
}
.menu {
background: #808080;
padding: 0.1em;
background-image: url(images/menu.png);
color: White;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
.frame {
background: #808080;
padding: 0.5em;
background-image: url(images/middle.png);
height: 72%;
}
.footer {
background: #808080;
padding: 0.5em;
background-image: url(images/footer.png);
text-align: center;
}
.login {
background-image: url(images/login.png);
width: 500px;
height: 500px;
margin-left: auto ;
margin-right: auto ;
margin-top: 50px ;
font-weight: bold;
text-align: center;
font-size: 1.1em;
}
.register {
background-image: url(images/register.png);
width: 500px;
height: 500px;
margin-left: auto ;
margin-right: auto ;
margin-top: 50px ;
font-weight: bold;
text-align: center;
font-size: 1.1em;
}
ok ^^
En nu...?
want het moet voor IE ook goed zijn
Het makkelijkste voor ons is een online voorbeeld. Daar kunnen we meer mee.
Zoveel conditional comments heb je trouwens niet nodig. Ik gebruik er meestal alleen één voor ie6 (voor bijv min-height -> _height)
Zoveel conditional comments heb je trouwens niet nodig. Ik gebruik er meestal alleen één voor ie6 (voor bijv min-height -> _height)