[CSS] achtergrond niet weergegeven in Firefox

[Verwijderd]

Op men website wil ik de achtergrond laen meegroeien afhankelijk van de content dat erin staat. In internet explorer doet hij dat maar in FireFox niet.

Je kan hem bekijken op http://melvok.be/NewSite

de CSS van de content ziet er zo uit

Cascading Stylesheet:

#contentWrapper{
    margin-top:5px;
    margin-left:3px;        
    height:500px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}

Deze heeft dus een hoogte van 500 px altijd anders geeft hij in internet explorer de achtergrond niet weer.

Hier de code van de achtergrond. Deze wordt in de div contentWrapper opgeroepen:

Cascading Stylesheet:

#BodyBack{
    background-image:url(../images/Back/Alg_Back.gif);
    background-repeat: repeat-y;
}

Het oproepen van deze 2 div's doe ik zo:

HTML:

<div id="BodyBack">
  <div id="ContentWrapper">
              Hier veel tekst
   </div>
</div>

Zou iemand kunnen zeggen wat ik mis doe om dit te goed te laten weergeven in FireFox en Internet Explorer.

tnx

Koen

[Skyaero]

Je geeft op dat de hoogte 500px is, dus dan is het logisch dat deze ook 500px wordt in een degelijke browser zoals FF.

Verder valideert je pagina niet. Als je een xhtml doctype gebruikt moet je ook alle tags afsluiten. Dus <br /> ipv <br>, <link /> ipv <link> etc.

[gvanh]

Ja, die 500 pixels van Explorer is een beetje het probleem. Firefox houdt zich "keurig" aan de maximale grootte en toont dus buiten de aangegeven DIV van 500 pixels hoog geen achtergrond weer. Kun je niet iets proberen van height:100%. Zou dat wellicht in beide browsers soelaas bieden? Waarschijnlijk niet. En kun je niet beide DIVs combineren tot één enkele, om dan vervolgens met margin-left en margin-right ervoor te zorgen dat de DIV in Firefox goed wordt gecentreerd?!

Dat wordt dan zoiets, denk ik:

code:

#contentWrapperAndBodyBack {
    margin-top:5px;
    margin-left: auto;
    margin-right: auto;
    width: <breedte>px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    background-image:url(../images/Back/Alg_Back.gif);
}

Volgens mij is die repeat-y niet nodig (uit m'n hoofd), omdat hij standaard al repeat in alle richtingen, en omdat hij zo breed is als de achtergrond, wordt hij in de x richting sowieso niet herhaald.

Kan je hier wat mee?

[Verwijderd]

Nope niks helpt
Heb dat allemaal geprobeert en het blijft hetzelfde.
als ik de height op 100% zet dan geeft hij de achtergrond helemaal niet weer. En de 2 div's bijeen zetten helpt ook niet.

Iemand een idee? Dat moet toch mogelijk zijn he want der zullen zo nog wel site's zijn zeker. Alle dat denk ik toch.

tnx

[c0deaddict]

Tables is the word ^^
Die resizen wel goed in zowel FF als IE

[Verwijderd]

Ik weet dat het met tables gaat maar dat moet toch ook mogelijk zijn met CSS volgens mij

[Skyaero]

De methode van gvanh werkt niet? Geef in plaats van een image eens een achtergrondkleur mee en bekijk wat er dan gebeurt. Is deze compleet gevuld of niet?

Tables zijn er om tabellen te kunnen maken en niet voor de layout.

[Verwijderd]

als ik een kleur neem dan is het juist hetzelfde. alleen als ik een pagina oproep waar minder content staat dan verkleint de achtergrodn kleur wel van hoogte maar bij meer dan 500px content vergroot ze niet.
Een vb van een pagina met minder content maar daar staat de height ook op 500 px ingesteld.

http://www.melvok.be/NewSite/index.php?menu=1

[equationunequal]

KLEI_j0s schreef op zaterdag 09 juli 2005 @ 11:02:
Tables is the word ^^
Die resizen wel goed in zowel FF als IE

Tables dienen niet gebruikt te worden voor lay-out ...

min-height is the word hiero. Helaas wordt min-heigth standaard niet goed ondersteund in IE, maar dat is eenvoudig op te lossen met dit javascriptje. Vervolgens height op auto zetten en hij zou correct mee moeten rekken met de content...

[c0deaddict]

aeronautics schreef op zaterdag 09 juli 2005 @ 11:14:
De methode van gvanh werkt niet? Geef in plaats van een image eens een achtergrondkleur mee en bekijk wat er dan gebeurt. Is deze compleet gevuld of niet?

Tables zijn er om tabellen te kunnen maken en niet voor de layout.

offtopic:
En toch worden er tables gebruikt in de layout van tweakers.net

[dev icey]

Gooi de volgende div eens voordat je de container afsluit:

code:

<div id="spacer"></div>

div#spacer {
  clear: both;
}

En natuurlijk moet je height weghalen. Je kan altijd nog min-height gebruiken als dat nodig is.

[ Voor 35% gewijzigd door dev icey op 09-07-2005 11:35 ]

[equationunequal]

KLEI_j0s schreef op zaterdag 09 juli 2005 @ 11:33:
[...]

offtopic:
En toch worden er tables gebruikt in de layout van tweakers.net

Tabellen worden alleen gebruikt daar waar tabulaire data is. Ik zou me even verdiepen in semantisch correct gebruik van html elementen als ik jou was ...

[Verwijderd]

helpt allemaal niet allemaal al geprobeert

[equationunequal]

Verwijderd schreef op zaterdag 09 juli 2005 @ 11:55:
helpt allemaal niet allemaal al geprobeert

Dit zou toch moeten werken lijkt me:

Cascading Stylesheet:

#contentWrapper {
    margin-top:5px;
    margin-left:3px;        
    min-height:500px;
    height:auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}

icm. het minmax.js bestand...

[ Voor 4% gewijzigd door equationunequal op 09-07-2005 11:59 ]

[Verwijderd]

Kun je niet beide div's onderbrengen in één grote div, en vervolgens die een background image geven (en de anderen transparant maken)?

[ Voor 3% gewijzigd door Verwijderd op 09-07-2005 12:31 ]

[Verwijderd]

Kheb dat dus gedaan nu en nog steeds hetzelfde.

[André]

Even tussendoor: Koenvdb, dit is het laatste topic dat je over dit onderwerp opent. Je hebt nu al 3 keer een topic geopend voor dit probleem, waarom kon dat niet allemaal gewoon in 1 topic?

http://gathering.tweakers...find/poster/144750/topics

[Verwijderd]

Omdat het altijd antwoorden zijn die ook niet kloppen en omdat er sommige zijn die dan ineens de topic locken

[André]

Als de antwoorden niet kloppen kun je opnieuw je vraag bijstellen in een topic en daar hoef je geen nieuwe voor te openen. En dat die ene op slot is gegaan is volkomen logisch natuurlijk, daar komt bij dat de anderen nog wel open stonden. Maar goed, ontopic nu....

[Skyaero]

Na

HTML:

<div id="rightPaneBody">
...
</div>

moet nog komen

HTML:

<div id="filler">&nbsp;</div>

en in je stylesheet

Cascading Stylesheet:

#filler {
    clear: both;
    height: 0;
    font-size: 1px; /* IE */
}

Dit alles moet nog binnen je contentWrapper division plaatsvinden.

[ Voor 23% gewijzigd door Skyaero op 09-07-2005 15:00 ]

[Verwijderd]

Ik heb dus nog steeds hetzelfde probleem maar nu op een andere plaats.
op de pagina: [url]http://http://www.melvok.be/NewSite/index.php?menu=3&sub=1[/url] daar stopt de content met groeien na een tijdje ik denk rond de 500 px hoog.
In de css heb ik niets van hoogte gezet.
Kan iemand mij helpen?

tnx

[Surkow]

Verwijderd schreef op zondag 21 augustus 2005 @ 13:16:
Ik heb dus nog steeds hetzelfde probleem maar nu op een andere plaats.
op de pagina: [url]http://http://www.melvok.be/NewSite/index.php?menu=3&sub=1[/url] daar stopt de content met groeien na een tijdje ik denk rond de 500 px hoog.
In de css heb ik niets van hoogte gezet.
Kan iemand mij helpen?

tnx

De link verwijst op de een of andere manier naar de home page van Microsoft. Misschien is het wel zo dat de grootte bij het element zelf staat. Want de informatie die bij de elementen zelf staat is volgens de browser belangrijker dan een externe stylesheet of een style in de header.

[ Voor 18% gewijzigd door Surkow op 21-08-2005 13:31 ]

[Room42]

Nee, hij is de : achter http vergeten. Zie hier:
http://www.melvok.be/NewSite/index.php?menu=3&sub=1

[Verwijderd]

Oke het was dus een foutje in de link. maar weet iemand hoe ik mijn probleem kan oplossen?

http://www.melvok.be/NewSite/index.php?menu=3&sub=1

tnx

[Verwijderd]

Zonder meteen je topic te kapen, ik heb hetzelfde probleem met een container div.
Te zien op www.clouso.nl/beta

De HTML:

code:

<body style="margin:0px;">
<div id="container">
  
    <div id="top">
    Lorem ipsum bladiebla
    </div>
    <div id="content">
    Lorem ipsum bladiebla
    </div>
    <div id="footer">
    Lorem ipsum bladiebla
    </div>
 
</div>
</body>

En de stylesheet

code:

#container {
    background-color: #804000;
    min-height:100%;
    height:100%;
}
#top {
    background-color: #804000;
    height: 50px;
    width: 875px;
    margin-right: auto;
    margin-left: auto;
}
#content {
    height: 450px;
    width: 875px;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
}
#footer {
    background-color: #804000;
    width: 875px;
    margin-right: auto;
    margin-left: auto;
}

Zoals te zien wordt de container div niet langer dan de drie andere bij elkaar.

[Room42]

Koen, je code valideert niet met als belangrijkste punt 7: Line 43 column 12: there is no attribute "widt" (<table widt='100%' border='0' align='center'>).

Anyhow, volgens mij klopt je boxmodel niet. Probeer de div contentWrapper eens te vervangen met
deze opzet:

HTML:

<div id="main">
    <div id="menu">
        Menu items
    </div>
    <div id="content">
        Veel content...
    </div>
    <div id="footer">
        Alle rechten voorbehouden
    </div>
</div>

En pas daar deze style-sheet op toe:

Cascading Stylesheet:

#main {
    width: 800px;
}

#menu {
    float: left;
    width: 150px;
}

#content {
    float: left;
    /* 4px minder ivm borders */
    width: 646px;
}

#footer {
    text-align: center;
}

@SLC-Axe: Jouw probleem is een heel andere, namelijk dat heigt:100% niet werkt.

[ Voor 42% gewijzigd door Room42 op 23-08-2005 18:57 ]

[Verwijderd]

Dan heb ik mij vergist in het probleem van de ts.
Is er een hele simpele oplossing voor mijn probleem of zal ik ff een eigen topic maken?

Edit:
Ik was er zat van, ik heb de body een achtergrondkleur gegeven. Klaar weer.

[ Voor 24% gewijzigd door Verwijderd op 23-08-2005 20:44 ]

[Room42]

Nee, ik zou zéker even zoeken!

[Verwijderd]

Kan er soms iemand helpen met ons probleem? Want ik geraak er zelf nietmeer wijs uit hoe het op te lossen.

tnx

[Room42]

Yo Koenvdb, reageer dan op zijn minst op mijn oplossingsvoorstel

sjaakduhuuhl schreef op dinsdag 23 augustus 2005 @ 18:53

[Verwijderd]

Dat oplossingsvoorstel werkt ook niet ik heb het hier gemaakt: http://www.melvok.be/NewSite/index.php?menu=6 en het begint er al beter uit te zien maar nog steeds niet wat het moet zijn kan iemand helen aub

[Room42]

Sorry koen, ik wordt een beetje weemoedig van je. Je hebt mijn voorbeeld niet 1:1 nagebouwd waardoor je nu de footer buiten de main div hebt opgenomen. Ook zie ik geen styles voor 'menu' en 'content'.

Heb je algeprobeerd om eens helemaal bij nul te beginnen bij het opzetten van je html? Soms moet je je fouten gewoon van tafel vegen en op een leeg blad beginnen.

Ik zou graag zien dat je eens rustig opnieuw begint in een test-documentje (gewoon in html, niet dmv php output). Die kun je later weer omzetten/gebruiken voor je php-template. Mocht je dan tegen een structureel probleem aanlopen en ik kan zien dat je er echt wat aan hebt gedaan dan help ik je graag verder. Maar je moet er wel wat voor doen.

Dat oplossingsvoorstel werkt ook niet

Dat werkt dus wel, mist goed uitgevoerd.

Sterkte!