Toon posts:

[css] Min-width probleem in IE

Pagina: 1
Acties:

woensdag 25 januari 2006 12:02

Acties:

Verwijderd

Topicstarter
Heb de volgende pagina..

Hier bij is het de bedoeling dat het 100% brede pagina is, echter met een min-width van 950px..

In FF gaat dit prima, maar in IE krijg ik het maar niet voor elkaar.. heb verschillende hacks geprobeerd, maar geen van allen werken. Het probleem is namelijk dat het plaatje rechtsboven niet blijft staan, maar dus naar onderen 'vliegt' bij het kleiner maken van het scherm.

Heeft iemand een idee wat ik fout doe of waar het aan ligt??

woensdag 25 januari 2006 12:16

Acties:
  • Andre-85
  • Registratie: April 2003
  • Niet online

Andre-85

Sid

min-width (en max-width, min-height, max-height for that matter) worden niet ondersteund in IE. Oa in dit topic worden een paar oplossingen aangedragen

Lorem
Whenever we feel the need to comment something, we write a method instead. - Martin Fowler
People who think they know everything really annoy those of us who know we don't - Bjarne Stroustrup

woensdag 25 januari 2006 12:20

Acties:

Verwijderd

Topicstarter
dat IE ze niet ondersteunt weet ik...

onderstaande oplossing heb ik al geprobeerd, maar IE loopt vast als mijn scherm een stuk kleiner maak... niet bepaald gebruiksvriendelijk ;)

EDIT:
het gekke is dat de min-width het wel lijkt te doen door div div (.ruler) onderin, want ik krijg immers een scrollbalk.. maar toch blijft dat plaatje mee naar rechts schuiven.. en dt is nu juist niet de bedoeling :)

[ Voor 39% gewijzigd door Verwijderd op 25-01-2006 12:24 ]

woensdag 25 januari 2006 12:41

Acties:

Verwijderd

Topicstarter
heb nog even doorgeklooid door een JS'je te schrijven... hij doet het nu in ieder geval in IE! de code heb ik hieronder gezet... commentaar daarop mag natuurlijk altijd ;)

tnx voor de moeite iig!!

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function getSize(myWidth) {
    var myWidth = 2, myHeight = 2;
    
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } 
    else if( document.body && ( document.body.clientWidth ||document.body.clientHeight ) ) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return myWidth;
}


resize = function verplaatsHeader() {
    var breedte = getSize();
   var c = document.getElementById('container');
   
   if(breedte < 950) {
      c.style.width = "950px";
   }
   else {
        c.style.width = "auto";  
   }
}
if (window.attachEvent) window.attachEvent("onload", resize);
if (window.attachEvent) window.attachEvent("onresize", resize);

woensdag 25 januari 2006 12:52

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Ik denk dat je het beste met een IE-only expression kan werken; voorbeelden genoeg te vinden mbt min-width.

Intentionally left blank

woensdag 25 januari 2006 17:03

Acties:
  • ZeilDude
  • Registratie: Juli 2004
  • Laatst online: 19-02-2022

ZeilDude

Kun je niet iets met de min-height oplossing, zoals in mijn openingspost in dit draadje? Kijk vooral even bij stap 4.

woensdag 25 januari 2006 17:25

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

ZeilDude schreef op woensdag 25 januari 2006 @ 17:03:
Kun je niet iets met de min-height oplossing, zoals in mijn openingspost in dit draadje? Kijk vooral even bij stap 4.
width wordt door IE niet geïnterpreteerd als min-width, waar height wel als min-height wordt geïnterpreteerd door IE. Dus daar kun je niets mee helaas.

Verder heb ik ook wel eens mbv expressions min-width geïmplementeerd in IE en kan ik me ook herinneren dat ik wel eens te maken heb gehad met IE lockups. Ik zal ff diep in mn geheugen graven om te kijken of ik nog weet hoe ik dat heb opgelost / hoe ik daar omheen heb gewerkt.

edit:

ff gekeken. Het onderstaande produceert geen lockups in IE.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    html { margin: 0; padding: 0; }
    body { margin: 10px; }
    
    #container {
         height: 300px;
         background: green;
         min-width: 950px;
        }
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
            /* 970 is dus container breedte + margin (left+right) van de body */
            #container { width: expression(document.documentElement.clientWidth < 970 ? "950px" : "100%" );
        </style>
    <![endif]-->
</head>
<body>
    <div id="container"></div>
</body>
</html>

Vervang ik echter in de expression document.documentElement door document.body dan gaat IE op zijn bek.

[ Voor 36% gewijzigd door Sappie op 25-01-2006 17:44 ]

Specs | Audioscrobbler

woensdag 25 januari 2006 20:27

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Sappie schreef op woensdag 25 januari 2006 @ 17:25:
[...]
Vervang ik echter in de expression document.documentElement door document.body dan gaat IE op zijn bek.
Ik denk dat dat te maken heeft met verschil tussen quirksmode rendering en standards compliant mode. Ws gaat document.body wel goed als je IE in quirksmode dwingt (maar dat is over het algemeen af te raden).

[ Voor 6% gewijzigd door crisp op 25-01-2006 20:28 ]

Intentionally left blank

woensdag 25 januari 2006 20:58

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

crisp schreef op woensdag 25 januari 2006 @ 20:27:
Ik denk dat dat te maken heeft met verschil tussen quirksmode rendering en standards compliant mode. Ws gaat document.body wel goed als je IE in quirksmode dwingt (maar dat is over het algemeen af te raden).
Daar heeft het inderdaad mee te maken. Wanneer IE aan de hand van quirksmode rendert is document.documentElement altijd 0. Het gebruik van document.body werkt dan wel ok. Wel erg irritant dat IE op zijn bek gaat bij gebruik van document.body; het lijkt op een endless loop ofzo waar IE op een of andere manier in geraakt. Hoog je de conditie met 1 op bijvoorbeeld dan doet het probleem zich niet voor.

IE works in mysterious ways..

iets over document.body / document.documentElement en de verschillen hiertussen: http://www.quirksmode.org/js/doctypes.html

Specs | Audioscrobbler

vrijdag 27 januari 2006 08:12

Acties:

Verwijderd

Topicstarter
was ff weg, dus sorry voor deate reactie ;)

maar bovenstaande oplossing met die expression werkt idd als een tierelier en is iets compacter als mijn stukje javascript :) maar werken deze expressions nog als een gebruiker Javascript heeft uitgeschakeld? dat zou nl helemaal top zijn... (is overigen geen ramp, want mijn scriptje zou het dan ook niet gedaan hebben :P)

Maar heb nu het volgende probleem:
Er moet een fixed header in (ook in IE dus). Nu dacht ik dit op te kunnen lossen dmv dit voorbeeld, maar:

a.) hiervoor moet ik IE in Quirks mode drukken.. Misschien geen ramp, maar toch liever niet..
b.) In FF is het achtergrondplaatje wat altijd op de bottom moet staan, nu 120px (hoogte van de header) gezakt. Dit zal komen door de top-padding in de body, maar het lukt me maar niet om deze weer zodanig te krijgen, dat ie weer op de bottom staat..
c.) mijn 100% width is nu weg in IE.. hij pakt, wathever de breedte van het scherm is, altijd de min-height (uit die expression) over...

iemand ideeën, want ik ben hem ff kwijt :) ??

vrijdag 27 januari 2006 12:52

Acties:

Verwijderd

Topicstarter
hmm.. even slecht gelezen :) dat probleem komt natuurlijk doordat in Quirks mode de document.documentElement.clientWidth altijd 0 retourneert... en aangezien IE die quirks mode nodig heeft om de fixed header te laten functioneren......

maar goed.. heb inmiddels in de IE only expression er document.body van gemaakt en het werkt als een tierelier!!

tnx allemaal!!!


offtopic:
die ***** IE toch ook steeds... ;)

vrijdag 27 januari 2006 14:05

Acties:

Verwijderd

Topicstarter
Toch nog 1 klein probleempje en wel in Firefox:

Door de padding-top in de body (ivm fixed header) zit in firefoxnu onderaan de apgina een extra stuk van 120px.. op zich is dit logisch want de totale hoogte komt dan op height+padding... maar mooi is het niet... wat kan ik hier aan doen??
Pagina: 1
Reageer