[CSS] Template niet goed weergegeven in IE6

[Frigolamptje]

We zijn met enkele studenten journalistiek gestart met een nieuw online mannenblad, waarvoor we gebruik maken van Wordpress omdat het gratis is, eenvoudig en het er nog goed uitziet ook. De link vind je in mijn signature. Het probleem is nu dat de site niet goed gerenderd wordt in IE6, oudere versies kan ik niet testen, IE7 geeft geen probleem. Ik dacht dat het een probleem was met de template. Jammer genoeg is mijn kennis niet groot genoeg om hier veel van te begrijpen, ik heb gezocht, maar het kan makkelijk zijn dat ik op verkeerde trefwoorden zocht wegens de beperkte kennis. Aangezien 50% van de bezoekers IE6 gebruiken zou ik dit liefst zo snel mogelijk verhelpen. Ik kopieer hieronder, hopelijk kunnen jullie mij verder helpen en voldoet dit topic aan de policy...

Cascading Stylesheet:

/*

Theme Name: Man-Oeuvre
Theme URI: http://www.man-oeuvre.be
Version: 1.0b
Description: Man-Oeuvre
Author: Theme Porter
Author URI: http://www.themeporter.com

*/

/*

    SunRise - New Template for sNews 1.5
    by David Herreman
    http://www.free-css-templates.com
    
*/
a img
{
border:none;
}

body { 
    margin:0px 0; 
    padding:0; 
    color:#ccc;  
    background: #343434 url('images/bg.jpg') repeat-x;
    line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Arial, Sans-Serif 
}


.content { 
    background: #FFF url('images/bgmain.jpg') repeat-y center;
    color: #ccc; 
    margin: 0 auto; 
    padding: 0; 
    width: 920px
}

/* HEADER 
---------------------------------------------------------------------------------------------------------------------------------------------------
*/
#header { 
    margin: 0; 
    width: auto; 
    background: #FF9503 url('images/header.jpg') no-repeat center top;  
    height: 195px; 
    color: #FFF 
}

#header .f_search { float: right; padding: 70px 50px 0 0; }
#header .title {    padding: 45px 0 0 50px; }
#header h1 {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 22px; font-weight: bold;
        margin: 0;
        padding: 0; 
}

#header h2 {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 12px; 
        background-image: url('images/none');
        color: #A90000;
        margin: 0;
        padding-left:2px; padding-right:0; padding-top:0; padding-bottom:0
}


/* SUBHEADER 
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#subheader { 
    background: #A90000 url('images/bgmenu.jpg') repeat-y center;
    width: 920px;
    height: 105px;
    color:#FFF; background-color:#A90000
}
#subheader .padding { padding: 10px 15px 10px 15px; }
#subheader h2 { color: #FEAB06; }
#subheader a {color: #FECF5F; }


/* NAVIGATION
---------------------------------------------------------------------------------------------------------------------------------------------------*/
.nav { text-align: left; color:     #7D8085; padding: 20px 0 0 0px; width: 150px; }
.nav li { 
    font-weight: bold; 
    border-bottom: 1px solid #ccc; 
    height: 25px; background: url('images/li.png') no-repeat left;; margin-left:0px; margin-right:0; margin-top:5px; margin-bottom:5px; padding-left:0px; padding-right:0; padding-top:0px; padding-bottom:0
}
.nav li a { color: #546078; text-decoration: none;  padding: 5px 0 0 10px; display: block; height: 25px;}
.nav li a:hover { color: #FFF; text-decoration: none; background: #220400; display: block; height: 25px;}


/* MAIN
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#main { background: #FFF; width: auto; margin: 0 10px 0 10px; color: #808080; }  
#main .left_side { 
    margin:0;
    width: 180px; 
    background: url('images/mright.png') no-repeat right; 
    min-height: 505px; padding-left:10px; padding-right:0; padding-top:0px; padding-bottom:0  
}

#main .left_side .hitems { margin: 0;   padding: 0; }
#main .left_side .hitems ul { 
    margin: 5px 0; 
    padding : 0; 
    color: #a90000;
    list-style-image: url('images/arrow.gif');
}
    
#main .left_side .hitems li { 
    margin: 0 0 2px 20px;
    padding: 0 0 0 0px;
    color: #555;
     
}

#main .right_side { float: right; width: 650px; background: #FFF; padding:15px 15px 0 0; margin:0; }
#main h3 { font: 85% Arial, Sans-Serif; margin: 0 0 10px 0; padding: 0; color: #5f5f5f; background: inherit; 
            border-bottom: 1px solid #FEAB06;
}

#main .box  {   background: #efefef; padding: 5px; border: 1px solid #ccc;}

#main .right_side ul { 
    margin: 5px 0 5px 0; 
    padding : 0; 
    list-style : none; 
    border-bottom: 0px solid #eee; 
    list-style-type: square;
    color: #a90000;
}
    
#main .right_side li { 
    margin: 0 0 2px 15px;
    padding: 0 0 0 0px;
    color: #555;
}


/* FOOTER
---------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer { 
    clear:both;
    height: 34px;
    color:#555;  
    background: #fff url('images/footer.jpg') no-repeat top; 
    font-size:90%; 
    padding: 0; 
    text-align:center 
}

#footer .padding { padding: 10px 0px 0px 0px; }
#footer .right { 
    float:right; 
    clear:right; 
    text-align:right; 
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/

input.search { width: 150px; border: 1px solid #A90000; color: #666; }
input.submit { 
    background: none; 
    color: #A90000;
    border: 0px none;; font-style:normal; font-variant:normal; font-weight:bold; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif
}

input.search:hover {    background: #FFFFF4; }

ul { margin: 0 0 0px 0; padding : 0; list-style : none; }
li {    margin: 0 0 2px 0; padding: 0 0 0 0px;  color: #555; }


p { margin: 0 0 5px 0; padding: 0; color: #808080; background: inherit; }
a { color: #a90000; background: inherit; text-decoration:none; }
a:hover { color:#FC7901; background: inherit; text-decoration:none; }

h1 { 
    padding:0; 
    margin:0; 
    color: #FFF; 
    background: inherit;
    font: bold 1.8em Arial, Sans-Serif; 
    letter-spacing: -1px;
}

h1 a { color: #FFF; background: inherit; }

h2 { 
    background: url('images/h.gif') no-repeat left;
    color:#000;
    font-size:140%; 
    font-weight:bold; 
    margin-left:0px; margin-right:0; margin-top:5px; margin-bottom:5px; padding-left:15px; padding-right:0; padding-top:0; padding-bottom:0 
}

h2 a { background: #FFF; color: #000; }
h2 a:hover { background: #FFF; color: #A90000; }

fieldset {  border: 1px solid #A90000; }
textarea.text { 
    height: 150px; 
    width: 90%; 
    border: 1px solid #A90000; 
    background: #FFF; 
    color: #354D5F;
}

textarea.text:hover { 
    border: 1px solid #A70000; 
    background: #FFFFF4; 
    color: #000;
}

input.field { 
    border: 1px solid #A90000; 
    background-color: #FFFFFF; 
    width: 283px; 
    color: #000;
}

input.field:hover { 
    border: 1px solid #A70000; 
    background: #FFFFF4; 
    color: #000;
}

input.text { 
    border: 1px solid #A70000; 
    margin: 0; 
    width: 150px;
    background: inherit;
    color: #000; 
    padding: 4px;
    
}


input.text:hover { 
    border: 0px solid #A70000; 
}

.date { 
    color: #808080; 
    background: #FFFFFF;
    text-align: right; 
    margin: 4px 0 5px 0; 
    padding: 0.4em 0 0 0; 
    border-top: 1px solid #eee;
}

.comments { 
    padding: 10px 10px 8px 10px; 
    margin: 0 0 7px 0; 
    background: #f8f8f8; 
    color: #000;
}

.commentsbox { 
    padding: 8px 0 10px 10px; 
    margin: 0 0 10px 0; 
    background: #f4f4f4; 
    color: #000;
}

.error {
    color: #990000;
    background-color: #FFF0F0;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px dashed #990000;
}
.error h2 {
    color: #990000;
    background: inherit;
}

.success {
    color: #000000;
    background: #F5FBE1;
    padding: 7px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px dashed #7BA813;
}
.success h2 {
    color: #7BA813;
    background: inherit;
}


/*post stylng*/
.post{margin:0 0 25px 0;}

.post .info{
padding:2px 3px 3px 8px;
border:1px solid #e3e4e4;
background-color:#f5f5f5;
font-size:0.9em;
color:#505050;
}


/*comment styling*/
/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #ffffff;
width: 280px;
}

#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform textarea:hover {
background: #FFFFFF;
border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
background: #ffffff;
border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

[ Voor 0% gewijzigd door BtM909 op 30-01-2007 15:40 ]

[CodeCaster]

offtopic:
Je mag misschien een razendsnelle webhost hebben, maar doe alsjeblieft wat aan de afbeeldingen op je site. Ik weet niet hoeveel bezoekers je wilt gaan trekken, maar een afbeelding van 125 KB op de frontpage kán niet, zeker niet omdat ie in de image-tag geresized wordt. Dan heb ik het bijvoorbeeld over deze afbeelding, die 1154x740 pixels is, en 125 KB groot. Deze wordt vervolgens door de <img>-tag geresized naar 349x226, maar de bezoeker moet alsnog de hele afbeelding downloaden, en de browser resizet een stuk lelijker dan bijvoorbeeld de GD-lib. Hiervoor zit vast wel ondersteuning in WordPress.

En misschien is het handig als je zelf het relevante stukje CSS even knipt en in [ code=css ]-tags zet voor de overzichtelijkheid Ik kan zelf niet testen omdat ik geen IE6 heb.

[ Voor 34% gewijzigd door CodeCaster op 30-01-2007 15:35 ]

[Frigolamptje]

offtopic:
En wat is het relevante stuk dan volgens jou, want zover ben ik nog niet

[BtM909]

Met alleen je CSS code kunnen we niks... Je moet duidelijker aangeven waar je probleem precies ligt. Mooiste is met een kant en klare testcase... Wat je nu doet is een gigantische lap code plaatsen en verwachten dat men het voor je oplost. Zo werkt het (gelukkig) hier niet.

Probeer het rustig opnieuw in een nieuw topic en plaats zo veel mogelijk relevante code. Je kan zelf eerst beginnen met overbodige CSS weg te halen en zo met een basis te komen. Zet het spul online waar men je code live kan testen en / of gebruik printscreens die precies aangeven waar de rendering volgens jou fout gaat.

Overigens kan je CSS code tussen [code=css][/] tags plaatsen. Zie ook dit overzicht: Overzicht van UBB-codes