[CSS/FF/IE]Achtergronden lopen niet door in FF

Pagina: 1
Acties:

  • _Rob
  • Registratie: Januari 2003
  • Laatst online: 12-10 10:22
Hallo allemaal :)

Sinds kort ben ik aan het stoeien met DIV opmaak i.p.v. de vervloekte TABLES (al hebben die mij nooit in de steek gelaten :>)

Ik ben bezig met een website waarin het de bedoeling is dat, ongeacht de inhoud, de pagina altijd netjes gevuld is. Staat er geen tekst dan lopen de afbeeldingen netjes door naar de onderkant van de pagina. Staat er wel tekst dan wordt de pagina langer en komt de achtergrond aan de onderkant te staan. (Volgen jullie het nog? :p)

Tijd om het verhaal visueel te maken:

Klik hier om de opmaak te bezichtigen

In IE wordt de pagina wonder boven wonder goed weergegeven. In FF loopt de achtergrond niet netjes door.

Naar mijn mening ligt het aan een van de CSS declaraties (heb er meuk uitgehaald):
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
html, body {
    font-family: Verdana, Arial;
    background-color: #8cb4e8;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    text-align: center;
    height: 100%;
    margin:0;
    padding:0;
}
#container {
    background-image: url(images/vis_25.png);
    text-align: left;
    width: 795px;
    margin: auto;
    padding-top: 160px; /* De padding top declaratie zorgt voor lager begin content */
    padding-bottom: 100px; /* De padding bottom declaratie zorgt voor hoger einde content */
}
#content {
    font-size: 11px;
    background-image: url(images/vis_25.png);
    margin-left: 210px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px;
}
#navigation {
    font-size: 11px;
    background-image: url(images/vis_25.png);
    width: 190px;
    float: left;
    margin-bottom: 5px;
    margin-left: 5px;
    padding: 5px;
}
#clear {
    clear: both;
    margin: 0px;
}
* html #container, #content, #navigation {
    height: 100%;
    min-height: 100%;
}

En de body bevat:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="container"> 
  <div id="header">
    <img src="images/logo.png" alt="Chinese tekens"> 
    <h1>Header</h1>
  </div>
  <p id="clear"></p>
  <div id="navigation">
  <ul>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
  </ul>
  </div>
  <div id="content">
    Tekst meuk
  </div>
</div>


Wellicht heeft een doorgewinterde CSS heerser een oplossing. Of misschien doe ik iets fout? Ik heb het antwoord iig niet kunnen vinden.

Bedankt voor je hulp!

p.s. de PNG afbeeldingen worden door een javascript netjes weergegeven in IE

Webdeveloping... -counts to 10- Sigh...


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
De pagina wordt gerenderd in quirks-mode, waarschijnlijk door de script-tag die buiten je HTML bungelt. Aangezien quirks-mode niet bepaald gestandaardiseerd is (goh) is het nogal gissen wat er precies gebeurt.

Verder nog de "* html #container"-IE-hack. Niet gebruiken. Gebruik IE's conditional comments met een daarin dan de IE-specifieke CSS-aanpassingen.

  • JayVee
  • Registratie: Mei 2002
  • Laatst online: 14-11 21:30

JayVee

shibby++!

Cascading Stylesheet:
1
background-attachment: fixed;
En het werkt hier met FireFox 2

//edit: Ah, ik zie dat je het achtergrond plaatje helemaal onderaan wilt hebben. In dat geval zou ik een footer maken, maar het wordt in ieder geval wat lastiger. Ik zou het zo niet weten.

[ Voor 55% gewijzigd door JayVee op 22-02-2007 12:20 ]

ASCII stupid question, get a stupid ANSI!


  • _Rob
  • Registratie: Januari 2003
  • Laatst online: 12-10 10:22
Bedankt voor je snelle reactie!

Ik begrijp niet helemaal alles wat je zegt, ik heb het geprobeerd te Google. Ik begrijp dat de DOCTYPE niet goed gedefinieerd is? Moet het strict zijn?
code:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Als ik de "* html #container, #content, #navigation" weg haal dan lopen de PNG achtergronden helemaal niet meer door. En dat is eigenlijk waar mijn kern vraag zat. Hoe kan ik ervoor zorgen dat de achtergronden netjes weergegeven worden.

//edit
JayVee schreef op donderdag 22 februari 2007 @ 12:18:
Cascading Stylesheet:
1
background-attachment: fixed;
En het werkt hier met FireFox 2

//edit: Ah, ik zie dat je het achtergrond plaatje helemaal onderaan wilt hebben. In dat geval zou ik een footer maken, maar het wordt in ieder geval wat lastiger. Ik zou het zo niet weten.
Het is toch raar dat dit niet simpel in de body gedefinieerd kan worden? Of begrijp ik HTML verkeerd? :p

Nieuwe versie, zonder IE hack en andere doctype, is hier te vinden

[ Voor 36% gewijzigd door _Rob op 22-02-2007 12:41 ]

Webdeveloping... -counts to 10- Sigh...


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
Haha, nu staat de pagina idd in standards-mode. En nu gaat het ook in Opera mis, op dezelfde manier als in Firefox. Hetgeen logisch is.

Dingen 100% height geven blijft een lastige opgave, zeker in IE. Geef de HTML eens height: 100%, en dan de body en #container min-height: 100% (maar geen height). Dan blijft het vervolgens nog klooien met m.n. IE6, want die denkt daar weer heel anders over. Afhankelijk van je doelgroep kun je IE6-support gewoon achterwege laten.

  • _Rob
  • Registratie: Januari 2003
  • Laatst online: 12-10 10:22
Het haalt helaas weinig uit, ik moet zeggen dat het in standard mode wel stukken sneller laad. Of ligt dit gewoon aan mij?

Hoe is het mogelijk om een achtergrond altijd aan de onderkant van de pagina te hebben, zodat deze ook netjes in FF wordt weergegeven?

Webdeveloping... -counts to 10- Sigh...


  • _Rob
  • Registratie: Januari 2003
  • Laatst online: 12-10 10:22
Ik heb er nog enige tijd mee rond gestoeid en ben er achter gekomen dat FF niet om kan gaan met de background instellingen wanneer de content van de pagina groeit. Ik heb geprobeerd om dit met een aparte background DIV op te lossen. Helaas wordt de hoogte van de inhoud hierdoor verknoeid in FF. Deze blijft dan niet meer op 100% staan. Heb nu een simpel javascript geschreven die de DIV aanpast. Jammer, met tables nooit last van gehad...

DIV vs TABLE : 0 - 1

Webdeveloping... -counts to 10- Sigh...


  • Fuzzillogic
  • Registratie: November 2001
  • Laatst online: 01-07 22:34
Firefox en Opera zijn prima in staat om te doen wat jij wilt, puur met CSS. Het "er niet mee om kunnen gaan" is onzin, maar het is gewoon dat de CSS op dit gebied niet zo triviaal is, en dat IE in al zijn incompetentie er weer een hele andere wending aan geeft.

Ik heb tig keer gedaan. Het lijkt ook een beetje op faux columns, dus zoek daar eens naar. Maar ook voor mij blijft het klooien (pagina's zitten telkens net even iets anders in elkaar). Het kan echter wel, in alle browsers, gewoon met puur CSS, dus zelfs IE.

En ik heb meer onoplosbare ruzie met tables (vroagah, toen ik nog jong, naief en incompetent was) gehad dan met CSS... Je opmerking "DIV vs TABLE : 0 - 1", daar ga je echt héél anders over denken als je eenmaal goede kennis van CSS hebt. Trust me on that one.

  • _Rob
  • Registratie: Januari 2003
  • Laatst online: 12-10 10:22
Wellicht mis ik logica als het gaat om CSS. Als ik een background de instelling meegeef om verticaal onderaan te beginnen. Dan zijn mijn verwachtingen dat het ook daadwerkelijk onderaan staat (en niet in het midden omdat het geen rekening houdt met de inhoud).

Faux columns biedt helaas in mijn huidige opstelling geen oplossing, omdat ik een aantal PNG lagen over elkaar moet laten lopen en er al een achtergrond afbeelding instaat.

Javascript bleek nu de enige oplossing te bieden voor het probleem.

Webdeveloping... -counts to 10- Sigh...

Pagina: 1