Page 1 of 2
[Opgelost] Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 10:39 am
by 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?
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 11:03 am
by 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
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 11:28 am
by 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.
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 2:30 pm
by 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.
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 4:31 pm
by Rolf
Heb je ook een link?
®
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 6:45 pm
by wpbremer
Rolf wrote:
Heb je ook een link?
®
Ja hoor:
http://kerk.wpbremer.nl
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 6:52 pm
by 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
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 7:40 pm
by Rolf
Als je in IE de compatibiliteitsmodus uit zet, dan ziet hij er goed uit.
®
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 7:48 pm
by wpbremer
Maar dat kan niet in IE7, en het is denk ik niet de bedoeling dat mensen eerst de compatibiliteitsmodus uit moeten zetten.
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:09 pm
by Rolf
Wiebren,
Verwijder eens uit div#kerkdiensten_bottom:
Wijzig in .NewsSummary:
in
Dan eens weer kijken.
Rolf
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:25 pm
by 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.
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:30 pm
by 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...
®
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:38 pm
by Rolf
Wiebren,
Verwijder eens uit div#kerkdiensten_bottom:
en voeg toe:
®
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:41 pm
by wpbremer
Ook dat is niet de oplossing en nu is de achtergrond in FF ook verdwenen.
Re: Opmaak sites zowel in FF, IE en andere browser gelijk
Posted: Sun Feb 21, 2010 8:46 pm
by 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.
®