Firefox centreert site niet goed Internet explorer wel

[Verwijderd]

Dacht eindelijk klaar de zijn met mijn site meesterwerken.eu maar helaas De intro van mijn Site meesterwerken.eu word in IE goed gecentreerd maar in Firefox is die rechts uitgelijnt.

Had al wat topics op de site gevonden met een soortgelijk probleem maar die oplossingen werken niet of ik doe wat verkeerd.

Dit is een deel van mijn code waar het volgens mij fout gaat.
Alvast bedankt voor de tipsss....

Cascading Stylesheet:

  html,body{
   margin:0;
   padding:0;
  }
  div#horizon{
   text-align:center;

   position:absolute;
   top:50%;
   left:0;

   width:100%;
  }
  div#inner{
   text-align:left;

   margin:0 0 0 -392px;

   position:absolute;
   top:-297px;
   left:50%;

   width:785px;         /* 2*|div#inner{margin-left}| */
   height:594px;        /* 2*|div#inner{top}|         */
   background-repeat:no-repeat;
   
   background-image:url(transparatn.gif)}
  p{                    /* this makes the look more consistent between browsers, it has nothing to do with the technique */
   margin:0;
   padding:.2em;
  }

[SurfHost]

Ik gebruik daarvoor:

code:

margin-left:auto; margin-right:auto

Oftewel:

code:

margin:0 auto;

En dat geef je dus mee aan de div die gecentreerd moet worden.

[ Voor 45% gewijzigd door SurfHost op 10-12-2006 13:44 . Reden: typo ]

[teh_twisted]

net ff gekeken via Safari (houdt zich net als Firefox aan standaarden dus hoort meestal gelijk te zijn ), en 't lijkt erop dat de Flash aan de rechterkant breder is waardoor ie niet goed uitvalt...screenshotje zit erbij

[ Voor 18% gewijzigd door teh_twisted op 10-12-2006 13:39 ]

[Rowanov]

De volledige oplossing is:

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

De text-align: center; staat er bij om het in IE werkend te krijgen. Dan mag je raden waarom hij het bij jou alleen in IE doet.

[dominic]

Ik hanteer ook meestal de methode die SurfHost al aangaf, zou prima moeten werken.

[Verwijderd]

Thx.
Heb jullie oplossingen getest maar helaas.
Hij heeft in IE en firefox steeds andere weergave
Code ziet er nu zo uit.

<style type="text/css">
html,body{
text-align: center;
}
#container {
width: 700px;
margin: 0 auto;
text-align: left;

padding:0;
}
div#horizon{
text-align:center;
margin-left:auto;
margin-right:auto;
margin:0 auto;

position:absolute;
margin:0 auto;
top:50%;
left:0;
margin-left:auto;
margin-right:auto;

width:100%;
}
div#inner{
text-align: center;
}
#container {
width: 700px;
margin: 0 auto;
text-align: left;
text-align:left;

margin:0 0 0 -392px;

position:absolute;
top:-297px;
left:50%;

width:785px; /* 2*|div#inner{margin-left}| */
height:594px; /* 2*|div#inner{top}| */
background-repeat:no-repeat;

background-image:url(transparatn.gif)}
p{ /* this makes the look more consistent between browsers, it has nothing to do with the technique */
margin:0;
padding:.2em;
}

[SurfHost]

Je code is iets teveel rommeltje om iets mee te kunnen eerlijk gezegd.

Op de intro pagina gebruik je trouwens niet de container div dus je kan hem wel die waarden geven maar dan bereik je nooit je doel.

Verder klopt dit van geen kant:

code:

div#horizon {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin:0 auto;
    position:absolute;
    margin:0 auto;
    top:50%;
    left:0;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

misschien lukt het als je er dit van maakt: (de rest is dubbel of overbodig imho)

code:

div#horizon {
    margin:0 auto;
    position:absolute;
    width:700px;
}

Bij width:100% is er sowieso geen margin dus heeft margin:auto totaal geen nut.

[ Voor 105% gewijzigd door SurfHost op 10-12-2006 14:21 ]

[Verwijderd]

Helaas dat werkt ook niet...
Mijn code is inderdaad een puinhoop maar in IE werkt die wel ;o)
Gelukkig gebruiken de meeste mensen dat...

[Verwijderd]

Verwijderd schreef op zondag 10 december 2006 @ 14:35:
Helaas dat werkt ook niet...
Mijn code is inderdaad een puinhoop maar in IE werkt die wel ;o)
Gelukkig helaas gebruiken de meeste mensen dat...

[Isnowiz]

Verwijderd schreef op zondag 10 december 2006 @ 14:35:
Helaas dat werkt ook niet...
Mijn code is inderdaad een puinhoop maar in IE werkt die wel ;o)
Gelukkig gebruiken de meeste mensen dat...

Wees er maar trots op

[killercow]

Vind je het gek dat het niet goed werkt?

Je hebt 2 verschillende code blokken voor de #container div.

De eerste is goed, de 2e zet je blok echter weer absouut op een bepaalde plek.
Besides that, IE doet het fout, Firefox doet het goed.

position:absolute;
top:-297px;
left:50%;

Dat verneukt het.

[Verwijderd]

Ik heb ook een probleem met Firefox en hoop dat jullie mij een beetje op weg kunnen helpen... Ik ben bezig met een website: http://www.ruimte-akoestiek.nl/index2.html. In IE ziet het er goed uit, maar in Firefox staan de div's onder elkaar ipv naast elkaar. De bijbehorende CSS-code voor de index is dit:

body {
background-color: #eef0f2;
}

#totaal{
margin-left: -412px;
position: absolute;
left: 50%;
height: 735px;
width: 824px;
top: 0px;
}
#menu {
font-family: Lucida Sans, Trebuchet MS, Verdana;
font-weight: 600;
font-size: 14px;
color: #ffffff;
letter-spacing: 2px;
line-height: 28px;
text-align: left;
padding-top: 310px;
padding-left: 30px;
margin: 0px;
width: 224px;
height: 735px;
float: left;
background-image: url("images/blauwvlak.png" );
background-repeat: no-repeat;
background-color: #01539e;
border-bottom: 1px solid #999999;
}
#boven {
font-family: Lucida Sans, Trebuchet MS, Verdana;
font-size: 42px;
color: #f333333;
letter-spacing: 10px;
line-height: 60px;
text-align: right;
padding-top: 110px;
padding-right: 10px;
width: 600px;
height: 190px;
float: left;
background-image: url("images/homefoto.jpg");
border-right: 1px solid #999999;
}
#onder {
font-weight: 550;
font-family: Lucida Sans, Trebuchet MS, Verdana;
font-size: 13px;
color: #f333333;
line-height: 28px;
text-align: justify;
padding: 20px;
padding-top: 10px;
width: 600px;
height: 435px;
float: left;
background-color: #ffffff;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}

[Verwijderd]

IE trekt de padding af van de width (in Transitional) en FF telt de padding op bij de width (zo als het hoort)

Het beste is je pagina's altijd te maken volgens het DTD strict. Dan reageren beide browsers bijna hetzelfde

[Boelie-Boelie]

Verwijderd schreef op dinsdag 12 december 2006 @ 17:02:
IE trekt de padding af van de width (in Transitional) en FF telt de padding op bij de width (zo als het hoort)

Het beste is je pagina's altijd te maken volgens het DTD strict. Dan reageren beide browsers bijna hetzelfde

TS heeft een strict DTD. Probleem is alleen de XML-declaratie, die IE in quirksmode laat draaien. Zou die dus weghalen.

Overigens renderen browsers ook in (almost) standards mode wanneer je een volledig transitional doctype gebruikt.

Meer info op http://hsivonen.iki.fi/doctype/

[Verwijderd]

Ik heb het doctype veranderd naar Strict. Als ik nu de padding weghaal, zet ie de tekst natuurlijk tegen de kant aan. Hoe los je dat dan op?