Safari gillar inte max-width: i CSS

Vet inte exakt vad safari klarar av, men Internet Explorer klarar inte av vare sig max-height eller max-width. Tyvärr! Och efetrsom de har 90-% av marknaden så brukar jag försöka lösa det på annat sätt.

Vilken doctype har du? Av koden att dömma ser det ut som du använder vanlig html.
Kanske ska prova att koda xhtml istället? Vet dock inte om det gör någon skillnad i detta fallet.
Men det kan ju vara så att Safari endast har stöd för max-width/max-height i xhtml.
Fast då borde i o för sig Firefox också ha det, men de brukar skilja sig åt på konstiga ställen.

Kan vara värt att prova i a fall!

Om jag inte har fel för mig så stöder Safari max-width osv i sin senaste version, men inte tidigare.
Fast grejen här är väl att du förväntar dig att Safari ska skala bilden när du sätter bredden till någon annat än vad bildfilen egentligen är. Jag är väldigt förvånad om du säger att Firefox gör det, för det skulle medföra en del underliga följdproblem, t ex om man har en bild som man bara vill visa en del av. Om webläsaren då skalar bilden istället för att bara visa den del av bilden som får plats på den specificerade ytan. Jag har använt detta för roll-over-effekter och då har Firefox inte skalat bilden utan det har funkat som det var tänkt.

Gissning:

Jag tror du måste börja laborera med detta i ett fristående dokument som inte har några andra stilar alls eftersom jag misstänker att stilar som ligger "ovanför" bilden i hierarkin påverkar stilen för bilden, dvs sånt du INTE anger i stilen för bilden renderas enligt t.ex. den paragraf som bilden ligger i, dvs s.k. "redundance".

Men jag skulle personligen inte bry mig om sånt här. Bilder SKA hålla originalstorlek från början (om dom inte är vektoriserade) på webben eftersom bildkvalitén blir allt från ganska dålig till rent katastrofal om man överlåter till webbläsaren att justera bildens storlek.

Kan du inte av något skäl fixa detta, så tror jag att det finns andra, avsevärt bättre lösningar server-side som fakstiskt gör om bilden till den storlek användaren ska ha INNAN den skickas iväg och bör således hålla normal kvalité. Leta efter t.ex. "image resize" bland PHP på www.hotscripts.com så ska du väl hitta nåt som passar istället för att krångla med CSS och ett väldigt osäkert och dåligt resultat.

Jag slängde ihop ett minimalt testdokument, och det ser ut att kunna vara en bugg i Safari. Om man tittar i specen för CSS 2.1:

http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

står det, om jag tolkar det rätt, att korrekt beteende är att göra som Firefox (och även Opera när jag testade).

Är anledningen till att du vill använda max-width att du inte vet exakt storlek på bilderna som ska läggas in, men vill att de ska vara max 200 pixlar breda?

Jag håller med Danne V om att det vore bättre att inte skala om bilder i efterhand, så om det är möjligt skulle jag rekommendera någon lösning som skalar om själva bildfilen i stället.

Tjena,

Jag orkar inte kolla själv, det är sent på kvällen och jag är trött..
Men en spontan tanke var att du kanske kunde testa med att lägga till en clip i css'en?

Har aldrig testat det i Safari, men det funkar iaf på gamla versioner av Netscape när allt annat felar.

Nånting i stil med clip:rect(0,200,200,0);

Jag borde egentligen testa istället för att skriva inlägg så här på måfå. Du får testa om du vill, och det är helt i sin ordning att tycka att jag är jobbigt och dum om det inte funkar sen

Jamen kolla in hotscripts då: http://www.hotscripts.com/PHP/Scripts_and_Programs/Image_Handling/Image_Manipulation/index.html

Tror du t.o.m. kan hitta skript som ändrar storlek under uppladdningen till servern så att jättebilder inte ligger och snor utymme, utan får rimlig storlek direkt. I vart fall gör dom om bilden INNAN den skickas till användarens webbläsare, vilket ger mindre bandbreddskonsumtion och bättre bildkvalité.