geen (bg)img's in Safari/Chrome ?

Status
Niet open voor verdere reacties.
W

wijnsmae

Gebruiker
Lid geworden
7 nov 2009
Berichten
5
Hoi,
Een website van mij werkt goed in IE/FF/Opera maar in Safari/Chrome werken zie ik de imgpics in de betreffende div niet, en bij hoveren erover verschijnt de grote img, als bground op een andere plaats in het scherm, ook niet. Wat is het probleem (ter illustratie (www.melomaanoeds.nl)?
Bedankt alvast !
HTML:--------------------
HTML: 
<div id="footer"> 
<div id="fotoseriebg">
<div class="gboek">
<a href="http://www.tboek.nl/gastenboek/melomaanoedswijnsma" target="_blank" title="Gastenboek" tabindex="8"><img src="img/gboek.gif" alt="Gastenboek"/></a> </div>
<div id="fotoserie">
<a href="#" title="Oeds achter piano" tabindex="9">
<img class="fotospics" src="img/piano/OWpianosmall.gif" alt="Oeds achter piano" />
<span class="fotosbig" id="foto-01"></span>     </a>
CSS:----------------
Code: 
#fotoserie {height: 75px;width: 615px;position: fixed;z-index: 30;clear: both;overflow: auto;
text-align: center;margin-left: -307px;background-color: #0B0B0B;border-color: #333333;
border-style: solid;overflow-x: hidden;margin-top: -30px;	left: 50%;}

#fotoseriebg {height: 85px;width: 100%;position: fixed;bottom: 10px;z-index: 20;margin-left: 1%;}

img.fotospics   {border:#333333;height: 75px;}

span.fotosbig {display: none;position: fixed;right: 0;width: 400px;height: 300px;background-color: #333333;top: 0px;left: 50%;margin-left: -200px;margin-top: 10%;border: double #8C8C8C medium;}
-----------------------------
 
Laatst bewerkt door een moderator:
Ik krijg de volgende fout in Chrome (en prolly dus ook Safari):
projectopussmall.gif
Resource interpreted as image but transferred with MIME type text/plain.
Klik om te vergroten...
en dit voor alle plaatjes. Blijkbaar werkt t dan niet met background-image. Apart. Hoe kan het dat alles via text/plain wordt verzonden? Een instelling op je server?



:thumb:
 
text/plain?

Bedankt voor je reactie !,vreemd ja, klopt het dat het bij andere browsers dan dus wel werkt?
ik host die site bij one.com, hoe kom ik errachter bij hun?en de 2 pics boven links/rechts staat er wel, hoe kan dat dan wel goed zijn?vrgr
 
Laatst bewerkt:
Da's 'n goed idee, dat mime-type. Maar volgens mij is 't dat helaas niet.
Eerst even voor de vraagsteller: Safari heeft ontwikkeltools, misschien weet je dat nog niet. Dat kan 't opsporen aanzienlijk versnellen. Ze zitten nogal verstopt. Ergens in de voorkeuren moet je iets aanvinken van 'Toon ontwikkelmenu' of iets met 'show developer'. Zoiets.
Als je dan klikt op Ontwikkel -> Toon webinfovenster opent Web Inspector en kun je de css live wijzigen en gelijk zien wat er gebeurt.
(Ik heb 't over Windows, op de Mac weet ik niet waar 't zit, zal ongeveer 't zelfde zijn.)
Hier vind je 'n link naar 'n (Engelstalige) handleiding:
http://www.css-voorbeelden.nl/links.html#a-ger-debug-safari
(Dat is geen directe link, want die is echt krankzinnig lang, ik ben bang dat die 't forum niet overleeft of 't forum die link niet.)

Als ik de code bekijk zou 't volgens mij gewoon moeten werken. Maar dat doet 't dus niet.
Als ik in #fotoserie in die Web Inspector position: fixed uitschakel, werkt 't. Althans: dan zie je 'n paar thumbnails en 't hoveren werkt bij die paar.
Ze worden ergens door afgedekt, maar ik kan niet zo snel zien waardoor, want de css is nogal ingewikkeld: er zit heel veel position:fixed in.

Het zou me niet verbazen als dit ook 'n foutje in Webkit is (wordt gebruikt door Google Chrome en Safari).

Goed, wat je zou kunnen doen.
Ik zou allereerst alle fouten uit de html halen op http://validator.w3.org/
Dat is eigenlijk altijd de eerste stap bij problemen.
* Jij gebruikt 'n strict doctype. Dat betekent dat alle metatags in de head moeten eindigen op />, bijvoorbeeld: utf-8" /> (met 'n spatie dus voor de /)
Dat scheelt de helft van de fouten :)

* Je hebt <li>'s staan zonder <ul>. Dat mag absoluut niet. Het moet zijn:
HTML: 
<ul>
<li>inhoud</li>
<li>inhoud</li>
</ul>
In de css:
Code: 
ul {margin: 0; padding: 0; list-style: none;}
omdat browsers dat allemaal anders doen en de chaos anders uitbreekt.

* In je <head> staat 'n stuk code voor IE 6. Dat staat daar verkeerd. Het hoort in de <body>, want het is html, en die mag niet in de <head>.
Ik zie trouwens dat je als color black hebt. En je achtergrond is ook black. Tenzij je die tekst helemaal geheim wilt houden, is 't misschien 'n idee de kleur te veranderen...

* "target" in 'n link is overbodig (en niet meer toegestaan), kan gewoon weg.

* Ik vermoed dat er ook nog 'n </div> helemaal onderaan mist, maar als je deze fouten eruit haalt blijft die fout vanzelf over in de validator.

Als dat in orde is, weet je in ieder geval zeker dat 't niet hierdoor komt. En kunnen we verder gaan zoeken.
 
(bg)images/MIMEtype-Safari/Chrome

Heel erg bedankt al die goede tips en adviezen, meeste dingen aangepast zoals je zei. Ik werk met DreamweaverCS3, vaak doet ie autom.de /> ipv >...maar goed.

De tool die je voor safari noemt is dezelfde als in Chrome. Intussen zijn mijn plaatjes nu wel img/gif...(alsnog door one.com nav mijn vragen aan hun?) vreemd..
Maar ondanks aanpassingen nog geen plaatjes, ook niet als ik fixed op absolute zet of verwijder?.(van welke onderdelen heb je fixed dan uitgezet of veranderd? )of z-index aanpas....hoe kunnen ze nou niet zichtbaar zijn in Safari/Chrome????
 
Hé, dat van Chrome wist ik niet. De eerste versie had die ontwikkeltools volgens mij niet, of ik heb ze niet gevonden toen. Nu even gezocht omdat jij zei dat Chrome zoiets had en gevonden. Bedankt voor de tip!
Volgens mij is 't (vrijwel) opgelost.
De position: fixed die ik heb weggehaald is die bij div#fotoseriebg.
Als ik dat nu doe in Safari, staan ze al in 't midden, vorige keer niet. Dat heeft ongetwijfeld te maken met de fouten die je hebt hersteld.

Als ik nu bij div#fotoseriebg dat fixed weghaal, doet-ie 't goed in Chrome, Safari, IE 7 en 8, Opera 10 en Firefox.
Opera 9 op Linux toont de foto's uit 't midden, maar persoonlijk zou ik daar niet zo zwaar aan tillen, want gebruikers van Opera updaten nogal snel. En IE 6, maar goed, dat weet je kennelijk.
Dus volgens mij zou 't nu moeten werken als je die fixed weghaalt.

Ik zou de laatste foutjes er ook nog even uithalen, dat voorkomt eventuele latere problemen als 'n browser na 'n update opeens over zo'n fout gaat struikelen of zo. Of je verandert iets en 'n fout gaat dan opeens problemen geven.
Er mist nog 'n </div> helemaal onderaan (denk ik), gelijk voor </body>

Je hebt in je menu <h1> gebruikt binnen 'n <a>. Dat mag niet. 'n <h1> is 'n blokelement, en dat mag niet binnen 'n inline-element als 'n <a>. Bovendien mag je maar één <h1> gebruiken op 'n pagina. Die <h1> is bedoeld voor de belangrijkste paginatitel en is ook van belang voor zoekmachines, want die hechten veel waarde aan wat daarin staat (en is ook belangrijk voor blinden en zo).
Dat mist trouwens: 'n title. Als je nou die <h1> uit 't menu haalt en 'n titel maakt, sla je twee vliegen in 1 klap.

Je hebt die <h1> neem ik aan gebruikt voor de opmaak. Dat kun je beter zo doen:
ul li
{
font-size: 1.5em; /* of welke maat dan ook. em, dan kan ook IE 'm veranderen */
font-weight: bold;
}
Zoiets.

Als je in Firefox Yellowpipe Lynx Viewer installeert via
https://addons.mozilla.org/en-US/firefox/addon/1944
kun je zien hoe 'n zoekmachine (en ook spraakbrowsers e.d.) jouw site zien, en waarom zo'n titel niet onbelangrijk is.
Nou, hoop dat 't lukt!

Edit: voorzover ik weet is dat mime-type inderdaad 'n instelling op de server. Maar ik ben daar bepaald geen expert in. Dus 't zou best kunnen dat jouw vragen de dames en heren hebben wakkergeschud.
 
Laatst bewerkt:
(bg)image Safari/Chrome/MIME/Strict1.0-Opgelost

Nogmaals hartelijk bedankt voor al je tijd en vooral info en tips.:thumb: Ik heb nog een paar zaken aangepast zoals je zei, en pagina's werken nu goed en komen geheel goed door validator !

Ter uitleg:
Position fixed:had ik gekozen omdat fixed met de viewport werkt ipv 'gewone' scherm;gebruikte ik omdat ik niet goed wist hoe de footer altijd onderaan te krijgen,maar is gelukt met position absolute.

<h1> gebruikte ik vaker, niet voor opmaak maar om zoekmachine de belangrijkste links/trefwoorden te laten indexeren/vinden. Maar ik begrijp dat het maar 1x mag, nu dan ook gedaan, alleen wel een text-indent van -12000px meegegeven.

<title> Deze had ik wel op alle pagina's. Maar jij bedoelde blijkbaar in de body zoiets door een <h1>, dat heb ik nu zo dan ook gedaan.

</div> toch verkeerd geteld, moest nog 1 bij ja !

Bedankt nogmaals, ik zal mn eigen site ook nog onderhanden nemen, :thumb:en wellicht, till next time...(van vragen leer je he?:confused:, en vooral van heldere en geduldige uitleg door seniors.:rolleyes:
vr.gr.Eric Wijnsma
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan