[Opgelost] Opmaak sites zowel in FF, IE en andere browser gelijk

[wpbremer]

Ik ben wat aan het testen met de opmaak van een test site en nu ziet die er in FF erg goed uit, maar als ik de site in IE8 open ziet hij er niet goed uit.

Weet iemand of er ergens informatie is te vinden waar uitgelegd staat waar je op moet letten met css, zodat je site er in alle browsers goed uitziet?

[Rolf]

Hey Wiebren,

Als je in Google zoekt op 'ie hacks css' dan vind je veel informatie.
Aparte stylesheets voor IE, zoek naar 'stylesheet ie only'

Zomaar even wat puntjes:
- Gebruik geen width: 100% maar width: 99%
- IE6 ondersteunt geen transparante PNG (maar goed, wie ondersteunt er van ons nog IE6  ik niet!)
- Kijk ook eens in de standaard cmsms templates, daar vind je ook al veel IE hacks.

Lees ook:
http://forum.cmsmadesimple.org/index.ph ... 556.0.html

Grt. Rolf

[wpbremer]

Rolf bedankt voor je snelle reactie, ik zal er eens induiken.

Ik weet wel dat ik een menubalk met width: 100% heb en deze in FF goed staat en IE niet, dus dat is bij deze waarschijnlijk opgelost.

[wpbremer]

Ik heb een probleemje waar ik nog niet uitkom en het probleem is het volgende.
Onderaan mijn site heb ik de volgende div gemaakt:

Code: Select all

{*Start kerkdiensten*}
           <div id="kerkdiensten">
              <div id="kerkdiensten_top"></div>

              <div id="kerkdiensten_middel">{news number='2' detailpage='news'}</div>

              <div id="kerkdiensten_bottom"></div>
           </div>

Deze is gestyled met de volgende css style:

Code: Select all

div#kerkdiensten {
        postition: absolute;
        padding-top: 15px;
        padding-bottom: 30px;
}
div#kerkdiensten_top {
        background: url(uploads/opmaak/kerkdiensten_top.png) no-repeat left top ;
        padding-top: 15px;
}

div#kerkdiensten_middel {
        background: url(uploads/opmaak/kerkdiensten_middle.png) repeat-y right top;
        padding:0px 15px 0px 15px;
}

div#kerkdiensten_bottom {
        background: url(uploads/opmaak/kerkdiensten_bottom.png) no-repeat left bottom;
        padding-bottom: 15px;
        margin-top: -1em;
}

Nu is het zo dat in FF en meeste andere browsers er een mooi vak komt te staan met de nieuwsberichten erin terwijl in IE alleen de achtergronden van div top en middel worden getoond. De achtergrond van de onderste div, div bottom wordt niet getoond, wat ik ook probeer in IE er verschijnt niks.

Iemand een idee wat hier mist of mis gaat.

[Rolf]

Heb je ook een link?

®

[wpbremer]

Heb je ook een link?

®

Ja hoor: http://kerk.wpbremer.nl

[Duketown]

wpbremer,

Ik moet zeggen, ik heb me niet zo in je coding verdiept, maar helpt z-index?
Ik vind: http://www.sitemasters.be/tutorials/5/1/210/CSS/Z_index er wel een duidelijke uitleg over geven.

Duketown

[Rolf]

Als je in IE de compatibiliteitsmodus uit zet, dan ziet hij er goed uit.

®

[wpbremer]

Maar dat kan niet in IE7, en het is denk ik niet de bedoeling dat mensen eerst de compatibiliteitsmodus uit moeten zetten.

[Rolf]

Wiebren,

Verwijder eens uit div#kerkdiensten_bottom:

Code: Select all

margin-top: 1em;

Wijzig in .NewsSummary:

Code: Select all

padding: 0.5em 0.5em 1em

in

Code: Select all

padding: 0.5em 0.5em 0

Dan eens weer kijken.

Rolf

[wpbremer]

Das helaas niet de oplossing ik had hier ook al mee zitten stoeien.

Ik had margin-top: -1em meegegeven daar de news een margin van 1em aan de onderkant heeft.

In IE wordt nog steeds de onderste achtergrond afbeelding niet getoond.

[Rolf]

Ik had margin-top: -1em meegegeven daar de news een margin van 1em aan de onderkant heeft.

Dat zag ik idd in Firebug.
Daarom had ik de newssummary ook aangepast, nu blijft alles tenminste binnen de div...

Nu even verder kijken...

®

[Rolf]

Wiebren,

Verwijder eens uit div#kerkdiensten_bottom:

Code: Select all

padding-bottom: 15px;

en voeg toe:

Code: Select all

height: 16px;

®

[wpbremer]

Ook dat is niet de oplossing en nu is de achtergrond in FF ook verdwenen.

[Rolf]

Heb je de height: 16px ook in de div#kerkdiensten_bottom gezet?
Ik zie hem niet in FireBug...

Kom anders even in de IRC >> PM me maar.

®