[Valid XHTML en CSS] Overflow prob in IE en niet in FF&Opera - Softwareontwikkeling

zondag 26 maart 2006 18:12

Acties:

Topicstarter

Ik heb de volgende code:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
 <title>Titel</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta http-equiv="Author" content="none"></meta>
 <meta name="robots" content="index, follow"></meta>
 <meta name="language" content="NL" />
 <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>

<div id="body_container">
 <div id="header_container">
  <div id="login_container"></div>
  <div id="header_navigation_container">
    [...]
      <div class='seperator'></div>
  </div>
 </div>
<div id="content_container">
 <div id="content_inlinecontainer">
   <div id="content_leftsmallblock" class="green">test</div>
   <div id="content_rightbigblock" class="orange">
   <form name="form_ip_toevoegen" id="form_ip_toevoegen" method="post" action="/index.asp?section=ip">
    <label for="ip_voornaam" class="columnlayout2"><u>V</u>oornaam:</label><div class="columnlayout2"><input type="text" name="ip_voornaam" id="ip_voornaam" maxlength="20" tabindex="5" class="textfield blueborder medium" value="" /></div>
    <br /><br /><br />test<br /><br /><br />test<br />test<br />test<br />test<br />test<br />test<br /><br /><br /><br />test<br /><br /><br />test<br />test<br />test<br />test<br />test<br />test<br /><br /><br /><br />test<br /><br /><br />test<br />test<br />test<br />test<br />test<br />test<br /><br />
   </form>
   </div>
 </div>
</div>
</div>

</body>
</html>

En bijbehorende CSS:

Cascading Stylesheet:

* {-moz-box-sizing: border-box; box-sizing: border-box;}
html {height: 100%;}
body {height: 100%; overflow: hidden; cursor: default; font-family: "Lucida Sans Unicode", Verdana, "Trebuchet MS", Arial; color: #FFFFFF; font-size: 13px; margin: 0; padding: 0; line-height: 16px;}
form {margin: 0;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a.headerlink {color: #FC9C05;}
input.textfield {font-family: "Lucida Sans Unicode", Verdana, "Trebuchet MS", Arial; height: 17px; line-height: 13px; font-size: 11px; color: #000000;}
.medium {width: 150px;}
.blueborder {border: 1px solid #030D96;}
label.columnlayout2 {float: left; clear: left; width: 150px; height: 19px; padding-top: 2px;}
div.columnlayout2 {height: 19px;}
.inputerror {color: #B30000; font-weight: bold; cursor: help;}
#body_container {width: 960px; height: 100%;}
#header_container {position: absolute; width: 960px; height: 126px; background-color: #EEEBEB; background-image: url(../images/logo.gif); background-repeat: no-repeat; background-position: 20px 20px; z-index: 2;}
#header_navigation_container {position: absolute; right: 15px; top: 100px; height: 25px;}
#header_navigation_container div.seperator {float: left; height: 21px; width: 1px; background-color: #FC9C05; margin-left: 13px; margin-right: 13px; }
#content_container {position: absolute; width: 960px; overflow: auto; background-color: #030D96; top: 125px; bottom: 0px; left: 0px;}
* html #content_container {position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; max-height: 100%; z-index: 1; border-top: 125px solid #FFFFFF;}
#content_inlinecontainer {height: 100%; padding-left: 40px; padding-top: 40px; padding-bottom: 40px;}
#content_leftsmallblock {display: inline; clear: left; float: left; width: 200px; height: 100%; overflow: auto; padding: 10px 10px 10px 10px;}
#content_rightbigblock {float: left; width: 680px; height: 100%; overflow: auto; padding: 10px 10px 10px 10px; border-left: 1px solid #FFFFFF;}
.blue {background-color: #291D9F;}
.orange {background-color: #FC9C05;}
.green {background-color: #2C9C3C;}

Er zit nog niet gebruikte CSS in welke op deze pagina niet gebruikt wordt
Wellicht is het het handigst om zowel de HTML als de CSS even in een file te plaatsen om het probleem te zien.

Het probleem is namelijk dat de overflow in het oranje vlak prima werkt in Firefox en Opera. Echter niet in Internet Explorer 6. IE rekt het oranje vlak gewoon uit naar benenden.
Het oranje vlak moet stoppen gelijktijdig met het groene valk (maar even simpelgezegd), dit werkt wel goed in FF en Opera.

Iemand een idee hoe ik dit kan oplossen?

$_/-\o_$ $_/-\o_$

[ Voor 29% gewijzigd door Urk op 26-03-2006 18:47 ]

zondag 26 maart 2006 18:18

Acties:

JHS

Splitting the thaum.

Urk schreef op zondag 26 maart 2006 @ 18:12:
Ik heb de volgende code:
Er zit nog niet gebruikte CSS in welke op deze pagina niet gebruikt wordt
Wellicht is het het handigst om zowel de HTML als de CSS even in een file te plaatsen om het probleem te zien.

Mja, als jij dat nu voor ons doet, en dan alleen de relevante code hier neerzet? Want persoonlijk heb ik geen zin om zoveel regels code door te spitten om je te helpen

.

Ik spotte echter wel de xml declaratie aan de bovenkant van je html. IE gaat hierdoor in quirksmode zitten, en reageerd dus minder voorspelbaar. Ik zou dus als eerste een (compleet) doctype gebruiken wat beide browsers in standardsmode duwt,

HTML:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

bijvoorbeeld

.

DM!

zondag 26 maart 2006 18:48

Acties:

Urk

Topicstarter

JHS schreef op zondag 26 maart 2006 @ 18:18:
[...]
Mja, als jij dat nu voor ons doet, en dan alleen de relevante code hier neerzet? Want persoonlijk heb ik geen zin om zoveel regels code door te spitten om je te helpen .

Ja, sorry, wilde de topic nog ff snel plaatsen voor het eten, vandaar

Ik heb de overbodige CSS nu weggehaald waardoor het nu wat duidelijker is.
Ik wil IE graag wel in Quirksmode houden...

zondag 26 maart 2006 19:17

Acties:

crisp

Devver

Pixelated

Ik wil IE graag wel in Quirksmode houden...

waarom zou je dat willen?

Ik zie overigens dat je voor IE (met een vieze * html-hack) je container absoluut positioneert met top/bottom en left/right op 0; vziw kan IE < 7 daar niet mee overweg. Sowieso zou ik absolute positioning proberen te vermijden als het niet noodzakelijk is.

Intentionally left blank

zondag 26 maart 2006 19:24

Acties:

Urk

Topicstarter

crisp schreef op zondag 26 maart 2006 @ 19:17:
[...]
Ik zie overigens dat je voor IE (met een vieze * html-hack) je container absoluut positioneert met top/bottom en left/right op 0; vziw kan IE < 7 daar niet mee overweg. Sowieso zou ik absolute positioning proberen te vermijden als het niet noodzakelijk is.

Je hebt gelijk, ik heb de absolute positioning weggehaald. De rest van de oplossing heb ik van http://www.cssplay.co.uk/layouts/bodyfix.html.
De absolute positioning van de container zelf laat ik wel staan, anders vernaggeld FF en Opera de hele layout.

Is er echter nog een oplossing voor mijn probleem van hierboven in IE?

maandag 27 maart 2006 01:34

Acties:

Urk

Topicstarter

Even een bescheiden kickje

Ik gebruik trouwens nog quirkmode omdat de site ooit in quirkmode is gebouwd en ik dat prettiger vindt werken.

Modbreak:Geen gekick binnen 24 uur in het vervolg

[ Voor 19% gewijzigd door André op 27-03-2006 09:02 ]

maandag 27 maart 2006 08:36

Acties:

JHS

Splitting the thaum.

En ik zou je persoonlijk toch écht willen aanraden in standardsmode te gaan werken omdat je dan dit soort moeilijk(er) te verklaren en op te lossen problemen niet hebt

. FF, Opera en IE reageren dan voor een véél groter deel hetzelfde, waardoor je enige verschillen véél makkelijker kan oplossen met een korte iefix.css stylesheet.

Maargoed, uiteindelijk moet je het zelf weten, iniedergeval verdiep ik mezelf nooit zo in de quirks van IE in quirksmode. Daarnaast denk ik nog steeds dat een stuk meer mensen je zullen helpen als je de code reduceert tot alleen de relevante code, en de rest online plaatst

. Je zegt namelijk wel dat je de overbodige CSS hebt weggehaald, maar sowieso staan er nog een héleboel non-layout zaken tussen, zoals background-color.

DM!

maandag 27 maart 2006 21:19

Acties:

Urk

Topicstarter

JHS schreef op maandag 27 maart 2006 @ 08:36:
Maargoed, uiteindelijk moet je het zelf weten, iniedergeval verdiep ik mezelf nooit zo in de quirks van IE in quirksmode. Daarnaast denk ik nog steeds dat een stuk meer mensen je zullen helpen als je de code reduceert tot alleen de relevante code, en de rest online plaatst . Je zegt namelijk wel dat je de overbodige CSS hebt weggehaald, maar sowieso staan er nog een héleboel non-layout zaken tussen, zoals background-color.

Ik blijf toch nog even in quirkmode, maar ga je advies zeker opvolgen, in de toekomst ga ik dit verbeteren. Wat betreft je opmerking over background-color, dit is echt belangrijk om te laten zien, hiermee zie je goed wat het probleem is en om welke vlakken het gaat.

Ik heb nog steeds geen oplossing gehoord op de kern van het probleem. Ik loop al een tijdje te klooien maar krijg het gewoon niet voor elkaar...