Ik heb een site geprogrammeerd en hij is gevalideerd etc.
Werkt goed in FF, IE7, Safari en Opera, maar IE6 gaat helemaal mis.
Ik haal mijn 'hacks' van diverse plekken, maar een mooi overzicht.... nog niet gevonden.
Het zijn floats en ik moet de dubbele margin nog checken, maar...
Waar halen jullie je ie6 hacks vandaan en hoe haal je ze binnen?
*hacks? of <if gte IE6> etc...
Op deze sites staan er een paar. Verder kan je op google gewoon zoeken: IE6 css hacks, dan vind je ook wel wat. Plus dat je pas op een bepaalde hack uitkomt met google als je het probleem in IE6 zoekt op google.
Heb je teovallig een voorbeeldje van je site? Dan kan iedereen meekijken naar je probleem en het misschien wel oplossen. Wie weet leer je dan wel een nieuwe hack waar je nog niet van gehoord hebt. ;)
Zo je site ziet er zeker niet best uit in IE, maar dat komt je elementen met posistion absolute heb geplaatst. Dat meot je ten alle tijde voorkomen. Ik probeer hem nu zonder position absolute hetzelfde te maken zoals hij eruit zag op FF, dan moet jij even kijken of hij er in IE mooi uitziet.
Je moet waarschijnlijk dan nog wel wat aanpassen, maar dat zal wel meevallen.
En waarom gebruik je zoveel IE hacks voor andere breedten?
-edit-
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body{
background-repeat:repeat-x;
background-image:url(../images/backgroundBlue.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#714d29;
}
td{
font-size:11px;}
#container{
position:relative;
background-image:url(../images/bg_canvas.gif);
background-repeat:repeat-x;
height:595px;
width:900px;
margin: 5px auto;
}
#menu_achter{
float:left;
background:url(../images/bg_white_canvas.gif) right bottom no-repeat;
width:190px; /* internet IE box model hack ivm margin!*/
height:570px;
margin:20px;
margin-right:10px;}
#over_praktijk{
margin:10px;
margin-top:50px;
padding:7px;
padding-top:0px;
border: solid 1px #a6c9e3;
width:140px; /* voor IE 150 px*/
}
* html #over_praktijk {/* voor IE 150 px*/
width: 155px;
}
.pijl{
float:right; margin-right:10px; margin-top:-2px;}
* html .pijl {/* voor IE 150 px*/
margin-top:-21px
}
/* MENU */
ul#menu {
list-style:none;
width: 110px;
padding-left:15px; /* ie hack! */
}
* html ul#menu{/* voor IE 125 px*/
margin:0;
padding:0;
width: 105px;
padding-left:10px;
margin-left:10px;
}
ul#menu li {
margin-top: 0;
line-height:21px;
}
* html ul#menu li{/* voor IE 125 px*/
/*margin-left:-30px;*/
}
ul#menu li a {
color: #a6c9e3;
border-bottom: #fa7c00 solid 1px;
display: block;
height: 100%;
width: 100%;
text-decoration:none;
font-weight:600;
}
ul#menu li a:hover {
background: #a6c9e3;
color: black;
display: block;
}
/* einde menu */
a#wouterontwerpt, a:visited#wouterontwerpt, a.hover#wouterontwerpt {
color:#a6c9e3;}
#small_footer{
font-size:9px;
color:#CCCCCC;
width:170px;
text-align:center;
margin-top:25px;
}
/* header */
#header{
margin-top:12px;
float:left;
background:url(../images/bg_header.gif) no-repeat;
width:675px;
height:153px;
}
.headerh1{
display:none;
}
.headerh2{
padding-top:91px;
padding-left:26px;}
.vlak{
margin-left:6px;
float:left;
background:url(../images/bg_white_canvas.gif) right bottom no-repeat;
width:184px;
height:193px;
padding:10px;
padding-right:19px;
overflow:hidden;}
* html .vlak {/* voor IE 150 px*/
width: 215px;
height:212px;
padding-right:10px;
padding-bottom:0px;
}
#content_scroll{
float:left;
padding-left:25px;
padding-right:25px;
padding-bottom:0px;
margin-top:0px;
background:url(../images/bg_white_canvas.gif) bottom right no-repeat ;
width:390px;
height:425px;
margin-left:5px;
line-height:22px;
overflow:auto;
}
* html #content_scroll {
width: 440px;
height:420px;
}
#content{
float:left;
padding-left:25px;
padding-right:25px;
padding-bottom:0px;
margin-top:0px;
background:url(../images/bg_white_canvas.gif) bottom right no-repeat ;
width:390px;
height:425px;
margin-left:5px;
line-height:22px;
}
* html #content {
width: 440px;
height:425px;
}
#vlak1{ /* voor de pagina's de 2 vlakke onder elkaar */
margin-left:9px;
float:left;
background:url(../images/bg_white_canvas.gif) right bottom no-repeat;
width:195px;
height:195px;
padding:10px;
}
* html #vlak1 {
width: 214px;
height:205px;
}
#vlak2{
margin-left:9px;
float:left;
background:url(../images/bg_white_canvas.gif) right bottom no-repeat;
width:195px; /* ivm geen image in vlak1 */
height:190px;
padding:10px;
}
* html #vlak2{
width: 214px;
height:210px;
}
h1{
color:#fa7c00;
font-size:24px;
font-style:normal;
font-weight:100;
line-height:1px;}
* html h1{
line-height:20px;}
h2{
color:#a6c9e3;
font-size:14px;
font-weight:400}
h3{
color:#a6c9e3;
font-size:14px;
font-weight:bold;
line-height:2px;}
h4{ font-size:14px;}
* html h3{
line-height:15px;}
#blauwebloem{
position:relative;
float: right;
right: -15px;
top:-120px;
z-index:100;
}
#wittebloem{
position:relative;
float: left;
top:-600px;
left: -240px;
z-index:100;
}
a {color:#a6c9e3;
font-weight:600;}
a:visited {color:#714d29;
font-weight:600;}
a:hover {
font-weight:600;
color:#C4B5AA;
text-decoration:none;}
.dubbel{
line-height:20px;}
ul.inspring{
margin: 10px 0 10px 20px;
padding: 0;
}
Probeer deze css eens. Ik kan hem alleen in FF testen (lees aanpassen) en niet in IE, dus als jij hem erop zet kan ik pas mijn resultaat zien in IE.
Ik vermoed dat dat evengoed nog beroerd is, maar jij gebruikt zoveel paddings en margins, dat ik door de bomen het bos niet meer zie.
Probeer die ook zo min mogelijk te gebruiken, want IE raakt er erg van in de war. Helaas :S.
erg he? Fijn dat je er even naar wilt kijken. `stop er niet teveel tijd in! kan het zelf ook doen!
Met die hacks heb ik IE7 en FF en Safari onder controle.
Oh oke, maar zie heirboven voor je css. Paar kleine aanpassingen maar hoor. Die position absolutes weggehaald en vervangen voor relative.
Plus nog wat kleine dingetjes.
