[CSS] Centreren van pagina verkeerd in IE - Softwareontwikkeling

vrijdag 30 september 2005 22:53

Acties:

Topicstarter

Hallo,

Ik heb mijn website gecentreerd via een div tag met deze css style:

code:

    div#center {
        position:relative;
        margin-left:auto;
        margin-right:auto;
        width:780px;
        height:100%;
    }

Het probleem is echter dat als ik een background image zet die ook gecentreerd moet worden dat dit goed uitziet in firefox maar in IE is de achtergrond 1px teveel naar rechts geplaatst

of mischien is de center div wel 1px naar links geplaatst maar dit lijkt me niet. Voor de achtergrond gebruik ik

code:

body {
    background:url(images/index_04.gif) 50% repeat-y;
    background-color: #aaaaaa;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height:15px;
    font-size: 9px;
    color: #666666;
}

De URL van de site is www.innovationz.nl maar ik ben aan de site aan het werken op http://84.30.130.64/inovationz/siteV2/ dus beter om hier te kijken.

Heeft iemand hier een oplossing voor?

Alvast bedankt,
Jean.

vrijdag 30 september 2005 23:19

Acties:

Willem

background-position is iets waar je mee zou kunnen spelen of een container div (waar andere divs in floaten (of niet) die je centreert ten opzichte van de body of html).

Motor onderhoud bijhouden

vrijdag 30 september 2005 23:29

Acties:

DJMurtz

Topicstarter

willem169 schreef op vrijdag 30 september 2005 @ 23:19:
background-position is iets waar je mee zou kunnen spelen of een container div (waar andere divs in floaten (of niet) die je centreert ten opzichte van de body of html).

Met 'spelen' neem ik aan dat je bedoeld een andere waarde dan 50% te nemen voor de position, dit heb ik geprobeerd zonder succes. Ik ga er dus eigenlijk van uit dat zowel in IE als in FF de background wel in het midden staat maar dat de div in IE niet helemaal in het midden word gezet.

Verder heb ik al een container div met ID 'center' waar alle andere divs in staan van de site (zie source code van de site).

vrijdag 30 september 2005 23:33

Acties:

Verwijderd

probeer:

code:

    div#center {
        position:relative;
        left:50%;
        margin-left:-390px;
        width:780px;
        height:100%;
    }

zaterdag 1 oktober 2005 01:43

Acties:

DJMurtz

Topicstarter

Dit geeft helaas exact hetzelfde resultaat

zaterdag 1 oktober 2005 11:16

Acties:

DJMurtz

Topicstarter

zou dit gewoon een IE bug zijn? Ik heb een simpele test.html pagina gemaakt met niets behalve één div die gecentreerd word en een achtergrond die gecentreerd is. Zelfde resultaat (http://84.30.130.64/inovationz/siteV2/test.html). De enige oplossing lijkt een CSS hack of een apparte IE css file te zijn....

zaterdag 1 oktober 2005 12:02

Acties:

Sappie

De Parasitaire Capaciteit!

afrondingsfout / inconsequentie die IE maakt idd (vergroot / verklein je venster maar eens en let dan op de achtergrond)

Je kunt wel een eind komen met een IE only expression:

code:

background-position: expression((document.body.clientWidth % 2) == 0 ? ((document.body.clientWidth - breedte van de container) / 2) + "px" : ((document.body.clientWidth - breedte van de container) / 2) + 1 + "px")

Heb het niet getest dus wellicht zitten er foutjes in, maar het idee is denk duidelijk. enjah.. of je er vrolijk van wordt weet ik ook niet

[ Voor 5% gewijzigd door Sappie op 01-10-2005 12:05 ]

Specs | Audioscrobbler

zaterdag 1 oktober 2005 12:13

Acties:

Verwijderd

code:

background-position: expression((document.body.clientWidth % 2) == 0 ? ((document.body.clientWidth - breedte van de container) / 2) + "px" : ((document.body.clientWidth - breedte van de container) / 2) + 1 + "px")

Het gaat natuurlijk niet om de code maar om het eindresultaat, maar dit is ongeveer de meest ranzige oplossing die je bedenken kunt...

Misschien niet helemaal de oplossing van je probleem, maar waarom heb je je center div relative? Ik zou die in dit geval altijd absolute maken.

zaterdag 1 oktober 2005 12:23

Acties:

Borizz

Kan je de achtergrond niet op de center container zetten? Dus:

Cascading Stylesheet:

div#center {
  background-image: url('images/index_04.gif');
  background-repeat: repeat-y;
}

If I can't fix it, it ain't broken.

zaterdag 1 oktober 2005 12:30

Acties:

Sappie

De Parasitaire Capaciteit!

tis idd ranzig, maar IE is ook een vervelende browser

Verwijderd schreef op zaterdag 01 oktober 2005 @ 12:13:
Misschien niet helemaal de oplossing van je probleem, maar waarom heb je je center div relative? Ik zou die in dit geval altijd absolute maken.

In dit geval absoluut positioneren is ook best ranzig

ik bedenk me net een betere oplossing:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <title>test</title>
    <style type="text/css">
        html {
            background: red;
            margin: 0;
            padding: 0;
            height: 100%;
        }
            
        body {
            margin: 0 auto;
            width: 600px;
            background: blue;
            min-height: 100%;
            _height: 100%; /* voor IE dus he */
        }   
    </style>
</head>
<body>

</body>
</html>

Specs | Audioscrobbler

zaterdag 1 oktober 2005 14:02

Acties:

Pendaco

Vogon Poetry FTW!

DJMurtz schreef op zaterdag 01 oktober 2005 @ 11:16:
zou dit gewoon een IE bug zijn? Ik heb een simpele test.html pagina gemaakt met niets behalve één div die gecentreerd word en een achtergrond die gecentreerd is. Zelfde resultaat (http://84.30.130.64/inovationz/siteV2/test.html). De enige oplossing lijkt een CSS hack of een apparte IE css file te zijn....

uhm.. ik zie niks verkeerds in internet explorer

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/voorbeeld2.jpg

en in je beginpagina trouwens ook niets op het niet helemaal aflopen van de zijlijnen na dan (zie de rode cirkels in de pic)

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/voorbeeld1.jpg

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/voorbeeld1.jpg

Of mis ik nu iets

edit:
Het heeft met de groote van je browservenster te maken (en miss ook met je resolutie)

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/voorbeeld3.jpg

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/voorbeeld3.jpg

maar niet iedereen heeft er dus standaard last van. Het is idd wel een vreemde renderbug van ie

[ Voor 15% gewijzigd door Pendaco op 01-10-2005 14:06 ]

zaterdag 1 oktober 2005 14:10

Acties:

DJMurtz

Topicstarter

hmm, om het nog specifieker aan te duiden...

Doe je IE maar eens niet maximaliseren en ga dan Pixel voor pixel je browser kleiner maken...

Resultaat:

wel goed, niet goed, wel goed, niet goed, wel goed, niet goed...

De achtergrond en de content verschuiven één voor één mee en niet tegelijk. Dus eerst staat de content te veel naar links, daarna verschuift de achtergrond mee en staan ze weer gelijk en vervolgens verschuift de content weer één pixel naar links..

hééééél vreemd hoor....

edit: mogelijke oplossing zou dus (denk ik) zijn om de achtergrond IN de center div te zetten zodat ze tegelijkertijd verschuiven zoals al eerder werd aangegeven, maar dan kom ik bij het volgende probleem.... een div met 100% height werkt niet in IE (en uiteraard wel weer in FF). Iemand hier dan een oplossing voor zodat het zowel in IE als FF 100% wordt?

[ Voor 27% gewijzigd door DJMurtz op 01-10-2005 14:15 ]

zaterdag 1 oktober 2005 14:17

Acties:

Sappie

De Parasitaire Capaciteit!

heb je mijn 2e post wel gelezen?

Specs | Audioscrobbler

zaterdag 1 oktober 2005 14:31

Acties:

DJMurtz

Topicstarter

Sappie schreef op zaterdag 01 oktober 2005 @ 14:17:
heb je mijn 2e post wel gelezen?

Nu wel en het werkt

bedankt. Weer een bugje om voortaan rekening mee te houden.