IE7 probleem met max-width & max-height - Softwareontwikkeling

dinsdag 20 januari 2009 14:43

Acties:

0 Henk 'm!

Topicstarter

Dag Tweakers,

mijn probleem is het volgende. Ik heb een site gemaakt (nog niet online) waar ik een image gallery (zelf gemaakt) heb. Wanneer je op een plaatje klikt van de image gallery kom je op een pagina met de afbeelding in een groter formaat en wat details.

Waar ik echter problemen mee heb is het feit dat het plaatje op de detail-pagina te groot is. Wat ik wil is dat wanneer een afbeelding breder dan én langer dan 500 pixels is hij naar een formaat wordt geresized wat onder de 500x500 pixels ligt, met de juiste verhouding. Daarom heb ik in de CSS een max-width en max-height van 500 pixels aangegeven. Werkt perfect in Firefox, Internet Explorer 7 echter heeft er problemen mee. Na wat gegoogle kwam ik erachter dat dit een "bug" is van IE7 en dat je dit via de volgende CSS code (http://www.fastechws.com/...mage-max-width-height.php) kan oplossen:

.max
{
max-width:500px;
max-height: 500px;
height: expression(this.height > 500 ? "500px" : true);
width: expression(this.width > 500 ? "500px" : true);
}

De max-width en max-height werken hier dan voor FF en de overige twee regels voor IE7. Nu werkt deze code deels voor IE7 maar ik heb toch nog afbeeldingen waarbij het plaatje niet juist geresized word. Voorbeeld:

Werkt wel goed:

Afbeeldingslocatie: http://img405.imageshack.us/img405/9128/voorbeeld1sj7.png

Werkt niet goed:

Afbeeldingslocatie: http://img101.imageshack.us/img101/8450/voorbeeld2ns1.png

Zoals je ziet werkt de resize wel met een goede verhouding wanneer alleen de breedte of juist alleen de lengte groter dan 500 pixels is, maar wanneer beide boven de 500 pixels is resized hij de afbeelding gewoon naar 500x500 pixels.

Ik heb al verschillende codes geprobeerd, maar het feit is gewoon dat het mij niet lukt om een normale max-width en max-height in IE7 werkend te krijgen.

Wie kan mij helpen? Bij voorbaat dank.

Groetjes,

Peter

[ Voor 3% gewijzigd door D34F op 20-01-2009 14:49 ]

dinsdag 20 januari 2009 15:02

Acties:

0 Henk 'm!

Da Weef

Is dit niet op te lossen met?:

Cascading Stylesheet:

.max
{
max-width:500px;
max-height: 500px;
height: expression((this.height > 500 && this.height > this.width) ? "500px" : true);
width: expression((this.width > 500 && this.width > this.height) ? "500px" : true);
}

Overigens zou ik IE-hacks in een aparte css zetten...

[ Voor 9% gewijzigd door Da Weef op 20-01-2009 15:02 ]

.

dinsdag 20 januari 2009 15:04

Acties:

0 Henk 'm!

D34F

Topicstarter

Da Weef schreef op dinsdag 20 januari 2009 @ 15:02:
Is dit niet op te lossen met?:
Cascading Stylesheet:
1
2
3
4
5
6
7
.max
{
max-width:500px;
max-height: 500px;
height: expression((this.height > 500 && this.height > this.width) ? "500px" : true);
width: expression((this.width > 500 && this.width > this.height) ? "500px" : true);
}
Overigens zou ik IE-hacks in een aparte css zetten...

Super bedankt voor je bijdrage! Hij werkt nu naar behoren. Dank.

dinsdag 20 januari 2009 15:08

Acties:

0 Henk 'm!

Da Weef

Trouwens moet je even opletten dat je bij een van de twee een gte-operator ( >= ) gebruikt, nu resized hij niet als de originele afbeelding exact vierkant is...

.

dinsdag 20 januari 2009 15:17

Acties:

0 Henk 'm!

Bosmonster

*zucht*

IE7 ondersteunt toch gewoon max-width/height?

Of bedoel je IE6? Die zou ik gewoon een een conditional css zetten.

dinsdag 20 januari 2009 15:23

Acties:

0 Henk 'm!

D34F

Topicstarter

Bosmonster schreef op dinsdag 20 januari 2009 @ 15:17:
IE7 ondersteunt toch gewoon max-width/height?

Of bedoel je IE6? Die zou ik gewoon een een conditional css zetten.

Nope, IE7, bij mij werkte max-width en max-height iig niet.

dinsdag 20 januari 2009 15:37

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

D34F schreef op dinsdag 20 januari 2009 @ 15:23:
[...]

Nope, IE7, bij mij werkte max-width en max-height iig niet.

Gebruik je toevallig een Transitional (of geen) DOCTYPE? Want volgens mij moet o.a. max-width gewoon werken.

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

dinsdag 20 januari 2009 15:50

Acties:

0 Henk 'm!

D34F

Topicstarter

OkkE schreef op dinsdag 20 januari 2009 @ 15:37:
[...]

Gebruik je toevallig een Transitional (of geen) DOCTYPE? Want volgens mij moet o.a. max-width gewoon werken.

Ai, dan zal het inderdaad daar aanliggen. Heb "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">"... Stom