[CSS]IE/FF background image 2 toont niet in FF wel IE

[WPN]

ik ben bezig met een site voor een muziek clubje

ik heb het naar mijn inziens strak gedaan tot nu toe.....

inleiding
in het menu maak ik gebruik van een background image doormiddel van CSS
nu heb ik ook een error pagina waar ik gebruik maak van een background image via CSS
ziet er allemaal heel goed uit

probleem
in firefox 1.0 wordt elke background image na de eerste background image niet getoont.....
in IE6 wel


gedaan
Gezocht op internet/got.... de enige oplossing die ik hier vind werkt niet: mn div container een float:left maken waardoor de andere floats gevangen worden zogezegt en dan toont ie het wel.
niet dus

ik heb mn CSS door de CSS Validator van W3 gehaalt.... geen probleem in te vinden

ik heb ook nog de background image van het menu uitgeschakeld door commentaar, en toen kwam de background image van de error pagina wel te zien in beeld....


vraag
wie weet wat het probleem van FF is en hoe ik dat gefixed krijg.....


voorbeeld gewone pagina: voorbeeld
voorbeeld error pagina voorbeeld

ik heb hieronder de gehele stylesheet gepost:
ik werk in de pagina veel met div's, check de source daar voor de hoe en wat als dat nodig is

Cascading Stylesheet:

html, body 
{
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
}
#container
{
 height: 100%;
 padding-top: 100px;
 float: left;
 width: 100%;
}
#top
{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100px;
 border-bottom: 1px solid black;
 z-index: 2;
}
#menu
{
 float: left;
 position: relative;
 height: 100%;
 width: 150px;
 border-right: 1px solid black;
 z-index: 1;
 background-image: url("../images/menunotes.gif");
 background-attachment: fixed;
 background-position: top;
 background-repeat: repeat;
}
#menu .item
{
 border-bottom: 1px solid black;
 padding: 3px;
 height: 20px;
 font-weight: bold;
}
#menu a
{
 text-decoration: none;
 color: #000000;
 height: 20px;
 width: 100%;
 display:block;
}
#content
{
 height: 100%;
 overflow: auto;
}
#bodytext
{
 padding: 5px;
}
#nav
{
 font-size: 12px;
 border-bottom: 1px dashed black;
 width: 100%;
}
#locatie
{
 float: left;
 width: 25%;
 padding-left: 3px;
 border-right: 1px dashed black; 
}
#roller a
{
 font-size: 12px;
 color: #0066FF;
 text-decoration: none;
}
#terug
{
 font-size: 12px;
 border-left: 1px dashed black;
 float: right;
 width: 25%;
 text-align: right;
 padding-right: 3px;
}
#terug a
{
 color: #999999;
 text-decoration: none;
}



.highlight { background: #FFFF40; }
.searchheading { font-size: 130%; font-weight: bold; }
.summary { font-size: 80%; font-style: italic; } 
.results { font-size: 100%; }
.category { color: #999999; }
.description { font-size: 100%; color: #008000; }
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}
.sorting { text-align: right; }
.result_title { font-size: 100%; }
.query { color: #FF0000; }

.zoom_searchform { font-size: 100%; }
.zoom_options { font-size: 80%; }
input.zoom_button {  }
input.zoom_searchbox {  }

#error
{
 height: 250px;
 padding-top: 25px;
 text-align: center;
 font-size: 20px;
 background-attachment: fixed;
 background-image: url("../images/error.gif");
 background-position: bottom;
 background-repeat: no-repeat;
}

edit: ps: let bij de zoek button na het zoeken niet op de foutmelding, ik heb de site online gezet om te kunnen laten zien voor wat er gebeurt, dus geen schrijf rechten toegekent aan de log file van de zoekengine

[ Voor 4% gewijzigd door WPN op 18-01-2005 00:32 ]

[Woudloper]

A List Apart » Suckerfish Dropdowns

Daar al eens gekeken? Ik zou het menu middels een unnumberd list style. Zoek maar eens op 'CSS UL Menu', dan vind je gelook ik genoeg voorbeelden.

[WPN]

dat is zeker iets waar ik naar ga kijken, maar heeft niet met het probleem te maken

het menu werkt goed, met menu bedoelde ik de hele linker balk van de pagina waar de
noten staan.... sorry

probleem is dat na de eerste achtergrond via CSS (in die menubalk dus) dat bij FIREFOX daarna geen achtergronden meer worden getoont......
als ik die achtergrond in de CSS voor het menu uitschakel dan komt mn achtergrond wel tevoorschijn

[Woudloper]

Peluso schreef op dinsdag 18 januari 2005 @ 09:18:
dat is zeker iets waar ik naar ga kijken, maar heeft niet met het probleem te maken

het menu werkt goed, met menu bedoelde ik de hele linker balk van de pagina waar de
noten staan.... sorry

Aha, dan is mij dat duidelijk. Ik dacht na je inleiding dat je een probleem had met het menu, dus dat bij de :hover je een background kleur had en geen transparantie...

probleem is dat na de eerste achtergrond via CSS (in die menubalk dus) dat bij FIREFOX daarna geen achtergronden meer worden getoont......
als ik die achtergrond in de CSS voor het menu uitschakel dan komt mn achtergrond wel tevoorschijn

Vaag, maar misschien heeft dit toch wel te maken met de manier waarop je je HTML structuur in elkaar hebt gezet...

[Zoefff]

Ik heb nu min of meer hetzelfde probleem volgens mij. Bovenaan mijn pagina heb ik een DIV met een background image (het logo). In die DIV zit nog een andere DIV, wederom ook met een background image (nu felrood om te testen ). In IE krijg ik die wel te zien, maar in FF niet.

Heb al geprobeert om met de z-index te klooien, maar dat helpt niet.

http://zoefff.gotdns.com/koorschool/sketch.php

[BtM909]

Zoefff schreef op donderdag 20 januari 2005 @ 11:52:
Ik heb nu min of meer hetzelfde probleem volgens mij. Bovenaan mijn pagina heb ik een DIV met een background image (het logo). In die DIV zit nog een andere DIV, wederom ook met een background image (nu felrood om te testen ). In IE krijg ik die wel te zien, maar in FF niet.

Heb al geprobeert om met de z-index te klooien, maar dat helpt niet.

http://zoefff.gotdns.com/koorschool/sketch.php

Weet je wat het eerste is wat ik doe? Ik zet vaak een border: 1px solid _opvallende kleur_, zodat ik kan zien hoe een element wordt gerendered.

Moet je voor de grap eens een border om je #header_links zetten

[Zoefff]

Edit: Blaatverhaal

Thnx.

Vraag ik me alleen nog af waarom die DIV niet word opgerekt voor mn UL...

[ Voor 150% gewijzigd door Zoefff op 20-01-2005 12:04 ]

[BtM909]

Zoefff schreef op donderdag 20 januari 2005 @ 12:02:
Edit: Blaatverhaal

Thnx.

Vraag ik me alleen nog af waarom die DIV niet word opgerekt voor mn UL...

floatie float van je LI haalt hem blijkbaar uit de flow (waardoor, terecht, de height van je div 0 is )

[Verwijderd]

BtM909 schreef op donderdag 20 januari 2005 @ 11:59:
[...]

Weet je wat het eerste is wat ik doe? Ik zet vaak een border: 1px solid _opvallende kleur_, zodat ik kan zien hoe een element wordt gerendered.

Moet je voor de grap eens een border om je #header_links zetten

Hier gebruik ik de webdeveloper extention voor firefox. Goud waard

[BtM909]

Verwijderd schreef op donderdag 20 januari 2005 @ 12:07:
[...]

Hier gebruik ik de webdeveloper extention voor firefox. Goud waard

Daar voeg ik het ook toe Enige wat ik eraan mis: je kan niet rechts klikken en erachter komen welk element je je CSS wilt toevoegen (wat bijvoorbeeld in de DOM-inspector wel kan).

[ Voor 22% gewijzigd door BtM909 op 20-01-2005 12:10 ]

[WPN]

ok

even terug te komen op mijn probleem stelling....


als ik de DOCTYPE van
...... het loose doctype (weet ff de regel niet meer) en doctype loos (zonder doctype dus)
verander in

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

dan werkt het wel met mn achtergronden

[crisp]

Daarmee forceer je quirksmode

[WPN]

voor iedereen die er iets over wilt weten

quirksmode