[CSS] Centreer probleem in IE - Softwareontwikkeling

donderdag 20 oktober 2005 10:48

Acties:

Verwijderd

Topicstarter

heb de volgende pagina...

de div #total is gecentreerd dmv margin: 0 auto; en dat werkt op zich goed.. maar dus niet in IE! sommigen zien het probleem meteen al, anderen pas als je voorzichtig het scherm kleiner maakt: de randen aan de zijkant vallen weg!

waarschijnlijk is dit een render-probleempje van IE, maar het feit doet zich voor dat de opdrachtgever dit probleempje gewoon niet wil zien..

heb het al geprobeerd dmv een tabel en td te centreren end aar de boel in te gooien, maar dat werkt ook niet (was ook niet echt een nette oplossing

)

heeft iemand hier een (nette) oplossing voor?

donderdag 20 oktober 2005 10:53

Acties:

Zoefff

❤ 

Dat zal wel met het afronden te maken hebben oid, een renderbugje in IE iig. Heb je al geprobeerd om het geheel 1 pixel groter of kleiner te maken?

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 20 oktober 2005 10:55

Acties:

Ansur

Heb vlug even rondgekeken op google en oa. dit gevonden.

Als je zoekt op "css div center ie" zal je zeker voldoende info vinden om het probleem op te lossen.

donderdag 20 oktober 2005 11:05

Acties:

Sappie

De Parasitaire Capaciteit!

beter pas je je achtergrond toe op je div met id "total". Dat moet het probleem wel oplossen.

edit:

stom van me, maar hij moet uiteraard tot onderaan komen

ik flans ff een pagina in elkaar, momentje

ajb. Ik heb je menuutje er niet in opgenomen, maar het idee mag duidelijk zijn nu. Je dient dus nu je background toe te passen op de body.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>test</title>
  <!--[if IE]>
        <style type="text/css">
            body { height: 100%; }
        </style>
  <![endif]-->
  <style type="text/css">      
    html {
      margin: 0; 
      height: 100%; 
      background: white;
    } 
    
    body {
      position: relative; 
      min-height: 100%; 
      width: 580px;
      border-left: 1px solid black;
      border-right: 1px solid black;
      padding: 0;
      margin: 0 auto;
      background: #eeeeee;  
    }
    
    #header {
        width: 560px;
        height: 79px;
        padding: 10px;
        border-bottom: 1px solid black;
        background: yellow;
    }
    
    #container {
      width: 560px; 
      padding: 10px;
    }       
  </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="container">
        content
    </div>
</body>
</html>

nog een edit:

je kan het ook oplossen met een ie only expression in je css, maar dan vind ik bovenstaande netter.

[ Voor 141% gewijzigd door Sappie op 20-10-2005 11:13 ]

Specs | Audioscrobbler

donderdag 20 oktober 2005 11:22

Acties:

Verwijderd

Topicstarter

@sappie: dit werkt goed! relaxed..

maar als ik het goedzie komt het dus door die margin:0 auto; in de body ipv de text-align:center; en doordat je de borders meegeeft in je body hoef je niet te klooien met je achtergrond plaatje (alhoewel dat nog wel heb ik net ff getest)

zie ik dit goed??

donderdag 20 oktober 2005 12:30

Acties:

Sappie

De Parasitaire Capaciteit!

mjah je gebruikt nu geen div'je "om alles heen" zeg maar (de div met id="total" in jouw geval). In plaats daarvan centreer je de body, die je vervolgens eenvoudig de eigenschap kan meegeven dat hij altijd de hoogte van het venster heeft en automatisch groter wordt naarmate de content groter wordt. Dit is met een eigen element (niet /) nauwelijks mogelijk.

Verder hoef je niet per se een border toe te passen op de body, dat was alleen maar even om het voorbeeld te illustreren.

edit: zie nu dat je pagina niet meer de maximale hoogte van het browservenster beslaat. Dan kun je in het bovenstaande voorbeeld uiteraard het een en ander weglaten.

[ Voor 18% gewijzigd door Sappie op 20-10-2005 12:32 ]

Specs | Audioscrobbler

donderdag 20 oktober 2005 13:43

Acties:

Verwijderd

Topicstarter

edit: zie nu dat je pagina niet meer de maximale hoogte van het browservenster beslaat. Dan kun je in het bovenstaande voorbeeld uiteraard het een en ander weglaten.

Klopt..

In ieder geval erg bedankt voor de oplossing! Zal ik vast nog veel gebruik van gaan maken