Probleem bij weergave met max-width in IE9

Status
Niet open voor verdere reacties.
A

Alexoo89

Nieuwe gebruiker
Lid geworden
1 apr 2014
Berichten
3
Ik heb een simpele pagina met een paar div's gebouwd.
Ik wil dat de pagina maximaal 500px breed is.
In de div komt een hoofdtekst en daaronder moeten een aantal blokken komen.
Het resultaat is te zien op http://www.teamhalderbergehoeven.nl/nieuwsbrief_april.php.
In Chrome ziet het er mooi uit, maar in IE9 is het verschrikkelijk.
Kan iemand mij vertellen hoe dit komt?

HTML: 
<html>
<head>
<title>Nieuwsbrief Open Jeugdtoernooi - April</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body style=font-family:verdana;arial;font-size:10pt;color:#ffffff;margin:0;background-color:#000a67;>

<div style='border:solid 0px blue;max-width:532;padding:2px'>
<div style='width:95%;padding:8px;'>
Hoofdtekst
</div>
<div style='border:solid 3px 009530;width:240;float:left;padding:8px;margin:2px'>
Tekst1
</div>
<div style='border:solid 3px 009530;width:240;float:left;padding:8px;margin:2px'>
Tekst2
</div>
<div style='border:solid 3px 009530;width:240;float:left;padding:8px;margin:2px'>
Tekst3
</div>
<div style='border:solid 3px 009530;width:240;float:left;padding:8px;margin:2px'>
Tekst4
</div>
</div>
</body>
</html>
 
Ik heb het niet getest maar misschien.....

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>......</title>
<meta name="description" content="......" />
.....
 
Bedankt, dit ziet er al beter uit. Alleen houdt hij zich niet aan de max-width en zijn de borders verdwenen (beide in IE9).
 
Zoals altijd is IE weer afwijkend en werkt niet volgens de specs!
IE9 doet html4 (niet zoals je wilt) en html5 (incompleet en buggy). Voor min-/max-widht:

Oplossing 1: de eerste regel veranderen in
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
... maar af te raden, want dan ga je terug in de tijd. Je wilt een website volgens de huidige standaard.

Oplossing 2: gebruik microsoft ellende
Code: 
min-width: WWpx;
width: expression(this.width < WW ? WW: true);

min-height: HHpx;
height: expression(this.height < HH ? HH: true);

/* WW is width waarde, HH is height waarde */
Soms lukt het door eerst een width en daarna een min-widht of max-width op te geven
width: ....px;
max-width: ....px;

Kun je een klein stukje html + css van het gedeelte met de borders posten?


*** aanvulling:
Als min-/max-width niet werkt kan dit komen doordat het element geen float (left/right) of position:absolute heeft.
 
Laatst bewerkt:
Bedankt voor je reactie.
Ik begrijp je 2de oplossing niet helemaal.
Moet ik dan dit in de style van de div zetten:

Code: 
max-width:532px;width: expression(this.width < 532 ? 532: true);

Dat lijkt namelijk niet te werken.
Als ik gewoon width:532 toevoeg, dan negeert hij de max-width.
De volledige code zie je bovenaan, probleem met de borders is ondertussen opgelost.
 
En deze 2 regels (in deze volgorde):
width: ....px; /* of eventueel een percentage */
max-width: 532px;

Of deze IE css trick
Code: 
<div class="container">
  <div class="minwidth">
    <div class="content">
      Hier staat tekst
    </div>
  </div>
</div>

  - voeg een extra div toe <div class="minwidth">
  - geef deze een border-left die even groot is als de minimum-width
  - geef de content een margin-left om dit weer te conpenseren
  - de * html zorgt ervoor dat alleen internet explorer deze css trick gebruikt

* html .minwidth {
  border-left: 532px solid #800;
}
* html .content {
  margin-left: -532px;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan