[CSS] position: absolute; bottom: 0px; probleem in mozilla

Pagina: 1
Acties:

  • Mafioso
  • Registratie: November 2000
  • Laatst online: 22-08 09:36
Ik heb uiteraard al de search en google gebruikt, maar ik kwam er niet verder mee :/.

Ik bezig met een pagina, en nu vind ik het belangrijk dat deze site goed te zien is in verschillende browsers.

Op m'n site staat een gedeelte van het logo altijd helemaal onderaan de pagina achter de tekst, dit had ik eerst gedaan met background-image, maar dit werkt niet lekker in Opera (kan wel uitleggen waar het mis ging, maar is nu niet zo relevant denk ik). Toen ben ik een heel andere aanpak gaan proberen, nl het gebruik van 'position: absolute;'. Dit werkte wel goed in Opera, ikke blij dus. Maar nu blijkt het niet goed te werken in Mozilla .. zucht ..

Hier zijn 2 afbeeldingen van wat er mis gaat:
http://mafioso.brokenliquid.net/Mozillafout1.jpg
http://mafioso.brokenliquid.net/Mozillafout2.jpg
IE(6) geeft het wel goed weer:
http://mafioso.brokenliquid.net/IEgoed.jpg

Het brobleem zit hem in dat Mozilla bottom: 0px blijkbaar de onderkant van het zichtbare in het venster vindt. Ipv de gehele pagina (waar voor je naar beneden moet scrollen). Het probleem doet zicht dan ook alleen maar voor als er meer content is als dat in 1 keer op het scherm past (als er een verticale scrollbar is).

Wat stukjes relevante code:
CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
DIV.rootContent {
    z-index: 100;
    position: relative;
}

#copyright {
    position: absolute;
    bottom: 0px;
    z-index: 99;
    width: 456px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
    line-height: 15px;
    color: black;
}

#contentlogobg {
    position: absolute;
    bottom: 0px;
    z-index: 98;
    right: 0px; 
}


HTML:
HTML:
1
2
3
4
5
6
7
8
9
10
11
  <td class="rootContent">
  [img]"contentlogobg.gif"[/img]
  <div class="rootContent">
   <center>
   <br />
[.. news tabellen ..]
   <div class="space30">&nbsp;</div>
   </center>
   </div>
   <div id="copyright"><br />&#xa9; 2003, brokenliquid.net - Ruud Bijnen</div>
  </td>


Ik heb me echt helemaal suf gekeken op dir probleem, maar ik kom er niet meer uit, en word er ook helemaal gek van ondertussen. Steeds loop ik weer tegen een probleem waarbij 1 van de browsers weer lekker eigenwijs is.

Als het nodig is om gehele URL te posten hoor ik het wel, maar als het niet nodig is doe ik dat liever niet.

Wie o wie kan mij hierbij helpen?

  • Willem
  • Registratie: Februari 2001
  • Laatst online: 22:08
Er in verschillende browsers goed uitzien, valt bij mij niet onder het kopje "Op de pixel precies". Als ik je sig lees vraag ik me sterk af waarom je je website volgens een standaard zou willen ontwikkelen. :)

Motor (of auto) onderhoud bijhouden


  • Rickets
  • Registratie: Augustus 2001
  • Niet online

Rickets

Finger and a shift

Het volgende werkt voor mij:

Cascading Stylesheet:
1
2
3
4
5
6
address
{
    position    : relative;
    bottom      : 0;
    text-align  : center;
}


HTML:
1
<addresss>&#xa9; 2003, brokenliquid.net - Ruud Bijnen</address>

En dan zelf nog wat met width en margin en dergelijken spelen :)

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.


  • Mafioso
  • Registratie: November 2000
  • Laatst online: 22-08 09:36
willem169 schreef op 10 juni 2003 @ 23:58:
Er in verschillende browsers goed uitzien, valt bij mij niet onder het kopje "Op de pixel precies". Als ik je sig lees vraag ik me sterk af waarom je je website volgens een standaard zou willen ontwikkelen. :)
true :), maar nu is de tekst gewoonweg niet goed meer te lezen, en das nou een beetje jammer.

En het zou fijn zijn als alle browsers natuurlijk alles het zelfde zouden renderen, en eigenlijk zou dat ook zo horen. De standaards die opgezet zijn door het W3C lijken mij daar duidelijk genoeg voor. Maarja als vervolgens zich niemand daar aan gaat houden schiet het niet op, en das jammer. Ik zou het fijn vinden als er een goede standaard werd gehanteerd, en sja dan moet je daar natuurlijk zelf mee beginnen. Een goed milieu begint immer ook bij jezelf :P

  • Mafioso
  • Registratie: November 2000
  • Laatst online: 22-08 09:36
Rickets schreef op 11 June 2003 @ 00:05:
Het volgende werkt voor mij:

Cascading Stylesheet:
1
2
3
4
5
6
address
{
    position    : relative;
    bottom      : 0;
    text-align  : center;
}


HTML:
1
<addresss>&#xa9; 2003, brokenliquid.net - Ruud Bijnen</address>

En dan zelf nog wat met width en margin en dergelijken spelen :)
Dit wil dus niet, omdat als er dan minder text staat op een andere pagina, de copyright notice komt dan onder de </center> te staan. En de center-tag loopt maar door tot waar de inhoud gaat die in deze tag staat.
plaatje: http://mafioso.brokenliquid.net/IEfout3.jpg
waarbij de volgende code is:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
#copyright {
    position: relative;
    bottom: 0px;
    z-index: 99;
    width: 456px;
    text-align: center;
    background-color: yellow;
}

<center style="background-color:red;">


de height van die <center> op 100% wil trouwens niets helpen.

  • Scharnout
  • Registratie: November 2000
  • Laatst online: 19-08 17:23

Scharnout

Meuk

Waarom wil je dit uberhaupt? Als je tekst meer is dan een pagina loopt je footer er doorheen.

Kijk eens op www.glish.com in de css sectie. Daar staan een paar goede voorbeelden van pagina-indeling

And Bob's your uncle ...


  • Mafioso
  • Registratie: November 2000
  • Laatst online: 22-08 09:36
Scharnout schreef op 11 June 2003 @ 15:39:
Waarom wil je dit uberhaupt? Als je tekst meer is dan een pagina loopt je footer er doorheen.

Kijk eens op www.glish.com in de css sectie. Daar staan een paar goede voorbeelden van pagina-indeling
Was al bang dat niemand meer zou reageren. Iks nap alleen niet veel van je eerste zin:?, maar ik ga die site eens bekijken.
Pagina: 1