Background onzichtbaar in IE en Firefox

vrijdag 27 mei 2011 15:53

Acties:

0Henk 'm!

Hallo allemaal

Ik ben de laatste tijd weer een beetje begonnen met het knutselen met html en css, en nu loop ik tegen een klein probleempje aan waar ik niet uit kom. Ik heb een testpagina gemaakt waarbij de achtergrond (voor de test even een wallpaper gepakt) meeschuift met de rechts-gelijnde content. De header bevat een png'tje vanwege wat transparantie die ik graag wil aanbrengen.

http://joramoudenaarde.com/test/index.html

Nu wil zich het probleem voordoen dat deze testpagina uitstekend werkt in Safari5 op de Mac, maar dat de achtergrond zich niet toont op Firefox4 of Internetexplorer8 (getest met Adobe Browserlabs en m'n eigen installatie van Firefox4).

Zou iemand toevallig even een licht in de duisternis willen schijnen, die me dan ook nog eens kan vertellen wat ik eventueel verkeerd doe? Ik kan maar niet uitvinden wat ik nu verkeerd doe… van wat ik kan zien is m'n code prima in orde namelijk.

Alvast bedankt voor enige hulp!

vrijdag 27 mei 2011 15:59

Acties:

0Henk 'm!

TERW_DAN

Met een hamer past alles.

Als je de background aan je body hangt, werkt dat wel?

En misschien handig om hier ook even de relevante code te posten en aan te geven waar je wat doet, want anders is het vrij lastig om je te helpen.
In Opera doet het ding het trouwens ook niet.

[Voor 10% gewijzigd door TERW_DAN op 27-05-2011 16:00]

vrijdag 27 mei 2011 16:03

Acties:

0Henk 'm!

Hahn

Aparte title heb je ook, <title>Right float left text</title>

En je gebruikt div classes en id's volgens mij verkeerd om. Maar ik zou het ook eens proberen met de background in de body te zetten in plaats van in HTML.

The devil is in the details.

vrijdag 27 mei 2011 16:28

Acties:

0Henk 'm!

Bartaz

Likes cookies!

Terw_Dan schreef op vrijdag 27 mei 2011 @ 15:59:
Als je de background aan je body hangt, werkt dat wel?

En misschien handig om hier ook even de relevante code te posten en aan te geven waar je wat doet, want anders is het vrij lastig om je te helpen.
In Opera doet het ding het trouwens ook niet.

Dit zou wel moeten werken.
Altijd je achtergrond aan de body hangen. <html> heeft eerder bewezen (bij mij persoonlijk) dat het met plaatjes niet altijd goed overweg kan.

vrijdag 27 mei 2011 16:29

Acties:

0Henk 'm!

Bosmonster

*zucht*

Css

De html-tag mag geen styling informatie bevatten, dus als daar je achtergrond op zit is het snel gevonden

[Voor 3% gewijzigd door Bosmonster op 27-05-2011 16:29]

vrijdag 27 mei 2011 16:31

Acties:

0Henk 'm!

Kapotlood

Topicstarter

Bedankt voor de reacties alvast

Ik heb zojuist de background die in de html-tag stond, in de body-tag gezet, maar het mocht tot zover nog niet baten.

Hier de code waar hij volgens mij op vast loopt in alle browsers behalve Safari:

De CSS:

code:

body {
  margin: 0;
  padding: 0;
  text-align: center;
  background: url(img/widescreen.jpg) fixed top 35% no-repeat;
}

Hij laat voor zover ik kan zien alle objecten goed zien, alleen de achtergrond lijkt te verdwijnen in de andere browsers. Zelfs als ik de background in body{} zet. Zou dat te maken kunnen hebben met 't feit dat ik de afbeeldingen horizontaal laat positioneren met een %percentage? Het lijkt me niet, maar je weet maar nooit

Mvg,
Joram

vrijdag 27 mei 2011 16:36

Acties:

0Henk 'm!

OkkE

CSS influencer :+

joramoudenaarde schreef op vrijdag 27 mei 2011 @ 16:31:
code:
1
background: url(img/widescreen.jpg) fixed top 35% no-repeat;

Draai de top en 35% eens om. Als ik dat met Firebug doe, werkt het wel in FF4.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 27 mei 2011 16:40

Acties:

0Henk 'm!

Kapotlood

Topicstarter

Oh, dat is frappant, bedankt OkkE!

Ik merkte nu ook dat de PNG-image die ik had aangemaakt niet werkte, maar na het omdraaien van die percentage/top tag werkte die ook prima zo te zien. We hebben weer wat geleerd, thanks!

Overigens schijn je met de nieuwe browsers prima background-images toe te kunnen voegen aan de html-tag in css, maar nu met css3 is dat in ieder geval niet meer nodig nu je meerder background-images aan je body kan plakken.

De nieuwe features in html5 en css3 zijn in in ieder geval behoorlijk leuk om eens mee te spelen!

[Voor 41% gewijzigd door Kapotlood op 27-05-2011 16:41]

vrijdag 27 mei 2011 16:48

Acties:

0Henk 'm!

OkkE

CSS influencer :+

joramoudenaarde schreef op vrijdag 27 mei 2011 @ 16:40:
De nieuwe features in html5 en css3 zijn in in ieder geval behoorlijk leuk om eens mee te spelen!

Moet je eens @LeaVerou d'r werk bekijken over CSS3 gradients. Alles CSS only, geen images komen er aan te pas.

- Slides van laatste talk
- CSS3 Patters

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 27 mei 2011 16:51

Acties:

0Henk 'm!

posttoast

Bosmonster schreef op vrijdag 27 mei 2011 @ 16:29:
De html-tag mag geen styling informatie bevatten, dus als daar je achtergrond op zit is het snel gevonden

Huh? Waarom mag de HTML-tag geen styling informatie bevatten?

omniscale.nl

vrijdag 27 mei 2011 17:41

Acties:

0Henk 'm!

Bosmonster

*zucht*

Css

posttoast schreef op vrijdag 27 mei 2011 @ 16:51:
[...]

Huh? Waarom mag de HTML-tag geen styling informatie bevatten?

Om dezelfde reden dat je je head of je title niet styled

De html-tag is niet meer dan een wrapper van je document-delen. Je head bevat meta-data, je body styling en content.

vrijdag 27 mei 2011 17:55

Acties:

0Henk 'm!

posttoast

Bosmonster schreef op vrijdag 27 mei 2011 @ 17:41:
[...]

Om dezelfde reden dat je je head of je title niet styled

De html-tag is niet meer dan een wrapper van je document-delen. Je head bevat meta-data, je body styling en content.

Toch doe ik dat maar al te vaak. Is erg handig, je kunt je body dan als container gebruiken (en in het midden zetten met margin: auto). Scheelt weer een wrapper-element.

Overigens zie ik op de meeste sites dat de <html> tag gestyled wordt, zo ook op tweakers.net.

Het enige dat je niet kunt doen is een id of class aan het <html> element geven, maar verder werkt het allemaal prima

Heb jij een bron die zegt dat het niet "mag"?

[Voor 12% gewijzigd door posttoast op 27-05-2011 17:56]

omniscale.nl

vrijdag 27 mei 2011 18:37

Acties:

0Henk 'm!

Kapotlood

Topicstarter

Zo wordt 't ook steeds vaker aangegeven: webguru's noemen de Body en HTML tags óók wrappers.

Ik denk zelfs dat als ik de background-image nu weer terugzet naar de html-tag (maar dan met de correctie die OkkE aangaf), dat het bij iedereen uitstekend werkt:)

vrijdag 27 mei 2011 19:22

Acties:

0Henk 'm!

crisp

Devver

Pixelated

Er is inderdaad geen reden waarom een background op HTML niet zou kunnen

Intentionally left blank

vrijdag 27 mei 2011 19:33

Acties:

0Henk 'm!

Bosmonster

*zucht*

Css

Maar ja, als je dan dezelfde template eens met een andere achtergrond wil gebruiken, heb je geen enkele basis om die te overschrijven door het gebrek aan classes of id's zonder extra bestanden te gaan introduceren. Daarnaast is het maar de vraag hoe browsers (bijvoorbeeld ook mobiel) hiermee omspringen (bijvoorbeeld ook in combinatie met paddings/margins).

Al met al valt het voor mij in de categorie bad practice.

De enige reden om het te doen is om je af en toe een hele container te besparen. Whooptiedoo

[Voor 4% gewijzigd door Bosmonster op 27-05-2011 19:35]

vrijdag 27 mei 2011 19:43

Acties:

0Henk 'm!

Kapotlood

Topicstarter

Met html5 kun je meerdere backgrounds kwijt, dus die basis heb je dan al netjes staan

En anders kun je ook backgrounds toevoegen aan je body bijvoorbeeld.

Er zijn website galleries (zoals webcreme.com) die alleen maar html5 eyecandy-sites tonen, en een aantal daarvan gebruiken ook de html-tag als background locatie. Het wordt zelfs door webguru's steeds vaker als good practice beschouwd omdat elke byte/kilobyte die je bespaart met op een nette manier minder div-happy om te gaan met je site, een besparing op de serverload betekent.

Persoonlijk maakt 't voor mij niet zo heel veel uit omdat m'n site toch niet al te groot is. Als het erop aan komt ben ik meer bezig met 't design-deel van een site dan met het code-deel, hoewel ik wel vind dat een site netjes gecodeerd moet zijn (vandaar m'n interesses in html/css). Dus ik zal er niet zo heel erg wakker van liggen of ik m'n background in een html, body of wrapper-tag zet.

Check anders deze voorbeeldpagina eens: http://camendesign.com/code/developpeurs_sans_frontieres
Dit is/was voor mij hét voorbeeld waarom het gebruiken van een html of body tag als "wrapper" nou zo goed kan zijn.

vrijdag 27 mei 2011 19:52

Acties:

0Henk 'm!

Bosmonster

*zucht*

Css

We gebruiken regelmatig classes op de body om verschillende template-opmaak aan te duiden. En gebruiken ook maar een enkele stylesheet. (minder requests is een stuk betere optimalisatie dan 11 bytes besparen op een wrapper

).

Met styling op de html-tag lever je daarmee flink in op je flexibiliteit.

Maar goed, als het voor jou werkt moet je het gewoon doen. Ik heb mijn redenen om het onder mijn collega's als bad practice aan te duiden.

vrijdag 27 mei 2011 19:57

Acties:

0Henk 'm!

Kapotlood

Topicstarter

Ieder z'n ding natuurlijk

Ik ben al lang blij dat iedereen het er zo'n beetje universeel wel mee eens is dat het ontwerpen/coderen van je website in pure tabellen écht bad practice is, hehe.

Enfin, bedankt voor de informatie allemaal. Ik kan weer vooruit!

vrijdag 27 mei 2011 23:25

Acties:

0Henk 'm!

crisp

Devver

Pixelated

Bosmonster schreef op vrijdag 27 mei 2011 @ 19:33:
Maar ja, als je dan dezelfde template eens met een andere achtergrond wil gebruiken, heb je geen enkele basis om die te overschrijven door het gebrek aan classes of id's zonder extra bestanden te gaan introduceren. Daarnaast is het maar de vraag hoe browsers (bijvoorbeeld ook mobiel) hiermee omspringen (bijvoorbeeld ook in combinatie met paddings/margins).

Al met al valt het voor mij in de categorie bad practice.

Omdat je situaties kan bedenken waarbij het onhandig zou kunnen zijn maakt het m.i. nog geen bad practice - hooguit not practical in die situatie

Enkel 'background' werkt voor zover ik weet ook prima op mobile, en ik zie geen reden om daar nu padding en margin bij te gaan halen want daar hebben we het niet over.

Ik zie eerder de kortzichtige drang om alles maar in één css-bestand te willen zetten om zodoende requests uit te sparen als 'bad practice'. Alle moderne browsers kunnen tegenwoordig minstens 6 requests simultaan uitvoeren, en gecombineerd met HTTP keep-alive is het dan vaak efficienter om een paar kleinere files aan te bieden in plaats van 1 grote (zolang je voor de 'up-front' CSS- en JS-files maar onder de 6 blijft) - dat verkort namelijk de tijd tot de 'first-render'. Template-specifieke zaken zou ik dus nog altijd in een aparte CSS doen.

Intentionally left blank

zaterdag 28 mei 2011 10:52

Acties:

0Henk 'm!

boontje88

posttoast schreef op vrijdag 27 mei 2011 @ 17:55:
[...]Het enige dat je niet kunt doen is een id of class aan het <html> element geven, maar verder werkt het allemaal prima Heb jij een bron die zegt dat het niet "mag"?

Is het echt zo dat de HTML tag geen classes mag bevatten? Ik gebruik vaak Modernizr en die voegt ook classes aan de HTML tag toe, dat heeft voor mij tot nu toe altijd gewerkt. Daarnaast is het ook wel een meer gebruikte techniek. Bijv. de HTML5 boilerplate voegt met conditional comments aan de HTML tag toe of je te maken hebt met IE-versies.

zaterdag 28 mei 2011 11:51

Acties:

0Henk 'm!

crisp

Devver

Pixelated

Volgens de HTML4.01 specificatie kent HTML geen andere attributen dan lang en dir, maar in HTML5 zijn alle global attributes ook gedefinieerd voor het HTML element.

Intentionally left blank

zaterdag 28 mei 2011 13:18

Acties:

0Henk 'm!

posttoast

crisp schreef op zaterdag 28 mei 2011 @ 11:51:
Volgens de HTML4.01 specificatie kent HTML geen andere attributen dan lang en dir, maar in HTML5 zijn alle global attributes ook gedefinieerd voor het HTML element.

Ah, dat wist ik nog niet. Goed om te weten, er zijn best situaties denkbaar waarin het handig is om op je <html> element te kunnen differentiëren!

omniscale.nl

dinsdag 31 mei 2011 03:01

Acties:

0Henk 'm!

Bosmonster

*zucht*

Css

crisp schreef op zaterdag 28 mei 2011 @ 11:51:
Volgens de HTML4.01 specificatie kent HTML geen andere attributen dan lang en dir, maar in HTML5 zijn alle global attributes ook gedefinieerd voor het HTML element.

Dan zal het wel oude info zijn geweest in mijn hoofd

Wat die CSS betreft, tuurlijk wil ik niet altijd alles in 1 CSS file, maar vaak komt het voor dat een klant vanuit het CMS een bepaalde opmaak kan kiezen (kolomverdeling, kleurenschema, achtergrond, etc). Dit zijn vaak kleine variaties van een paar regels, waar ik geen extra bestanden voor ga introduceren, maar wel regel via classes.

Maar goed, als classes op de html ook mogen dan is dat natuurlijk uberhaupt geen issue meer. Het voelt nog steeds lelijk, maar misschien ebt dat gevoel ook nog wel een keertje weg

[Voor 5% gewijzigd door Bosmonster op 31-05-2011 03:01]

Onderwerpen

Tweakers maakt gebruik van cookies

Toestemming beheren

Functioneel en analytisch

Relevantere advertenties

Ingesloten content van derden