in Coderen

Margin: 0 auto; in IE7 werkt niet

Als je vaak websites ontwikkelt, dan zal je zeker het probleem om gedeeltes in je website te centreren in IE7 zijn tegen gekomen. En ik ook dus.

De simpele oplossing die op bijna alle browsers werkt om een stuk content te centreren, werk niet op Internet Explorer 7, of de standaard quirks mode van je browser.

Als we ervan uit gaan, dat je een website hebt, met een inlog div in het midden. Je wilt dat je inlog div altijd in het midden van je scherm moet staan, ongeacht de browser of de resolutie van het scherm.

In een normale situatie kon je dit schrijven in je CSS bestand:

#container { }
#inlog { margin: 0 auto;}

En dit dus in je HTML:

<div id="container">
      <div id="inlog">
      Hier plaats je inlog content
      </div>
</div>

Het probleem is dat dit niet werkt voor IE7, hoewel je dit toch via CSS kunt oplossen.

Het HTML gedeelte kun je precies zo laten, maar voor het CSS gedeelte, schrijf dit liever:

#container { text-align: center; }
#inlog { margin-left: auto; margin-right:auto;}

Hier heb je ook een demo:
margin ie7

Een beetje old skool, maar dit heeft bij mij wel gewerkt en hopelijk bij jou ook.

Write a Comment

Comment

Anti-spam vraag:

  • Related Content by Tag