Safari gillar inte max-width: i CSS

Tråden skapades och har fått 11 svar. Det senaste inlägget skrevs .
1

Antagligen är det jag som inte har så stor koll, men eftersom det fungerar bra i FireFox antar jag att Safari inte klarar av biffen helt och hållet. Koden i min CSS-fil ser ut som följer:

/* För bilder i texter */
img.intext {
	margin: 5px;
	float: right;
	vertical-align: top;
	[i]max-width: 200px;[/i]
	border-width: thin;
	border-style: solid;
	padding: 0px;
}

och koden i HTML-filen ser ut som följer:

<p class="textobject">Suspendisse fermentum nunc id felis. Donec pede.[i]<img src="about-me-images/profil.jpg" class="intext">[/i] Nullam velit velit, consequat in, condimentum nec, auctor sit amet, velit.</p>

I Safari resulterar detta i en bild som är 200 pixlar bred men bilden behåller sin ursprungliga höjd. FireFox klarar detta dock galant och förändrar även höjden. Det är kanske så att jag ska lägga till något i stilen max-height: relative;?

Några tips eller idéer?

  • Oregistrerad
  • 2005-11-21 08:25

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.

Lite cyniskt kanske, men i det här fallet bryr jag mig inte om att Explorer-användare får en mindre användbar sida. Jag tänker hålla mig till fullständiga w3-standarder och snällt be de som använder Explorer att byta – någonstans måste man dra gränser. Är min sida helt anpassad efter standarder är det dessutom lättare för folk med t.ex. nedsatt syn att ta till sig sidan.

Det är klart att man skulle kunna lösa problemet och göra några Explorer-användare glada genom att köra bilderna genom ett automatorflöde innan dom laddas upp... Tycker att detta dock är elegant och gör dessutom att den visuella designen blir stabilare om det går att lösa med hjälp av max-width: och max-height: Frågan är egentligen om Safaris konstiga rendering av min kod beror på en bug i Safari eller att jag missat något.

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!

Jo, det kan vara värt att prova även om jag är skeptisk. Jag använder mig av HTML 4.01 Transitional och UTF-8 som teckenkodning.

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.

Det ligger något i det du säger, men borde det inte finnas något i stil med overflow: visible; som man använder annars får att dynamiskt förändra höjden eller bredden på ett objekt om innehållet inte passar? Ett slags max-height: proportional;

Här är Safari och Firefox ställda bredvid varandra.

  • Medlem
  • Karlstad
  • 2005-11-21 18:27

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.

Tack för svaren allihop!

Anledningen att jag skulle vilja ha max-width är mest en designmässig/programmeringsmässig försiktighetsåtgärd om någon skulle råka ladda upp en bild med felaktiga dimensioner. Med största sannolikhet så kommer alla bilder att vara i korrekt storlek men det är lika bra att vara på den säkra sidan och ha avvikelser i åtanke.

  • Medlem
  • Sollentuna
  • 2005-11-21 23:43

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

  • Medlem
  • Karlstad
  • 2005-11-22 08:34
Ursprungligen av Niklas Brunberg:

Tack för svaren allihop!

Anledningen att jag skulle vilja ha max-width är mest en designmässig/programmeringsmässig försiktighetsåtgärd om någon skulle råka ladda upp en bild med felaktiga dimensioner. Med största sannolikhet så kommer alla bilder att vara i korrekt storlek men det är lika bra att vara på den säkra sidan och ha avvikelser i åtanke.

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é.

1
Bevaka tråden