Ruzie met divs en fieldset in IE

[MueR]

Hey allen,

Ik ben een website aan het opzetten, en ik loop tijdens het ontwerp tegen een heel vreemde bug(?) op. Zoals te zien op http://home.muer.nl:8001/Recovery/, zit er een verschil tussen het uiterlijk in FireFox en IE. What else is new zul je zeggen. Klopt, maar toch even een vraag, aangezien we er op IRC ook al niet uitkwamen.
In FireFox doet de site (bijna) precies wat ik wil, behalve het middelste stuk (div#middle) over de hele pagina uitstrekken. Dat is even bijzaak. Wat er in IE fout gaat, zijn 2 dingen. De achtergrond kleur welke je in FF netjes binnen de menu boxjes ziet staan, wordt in IE ook doorgetrokken achter de legend. Verder is de tekst in div#main (rechts) ter hoogte van de linkerkolom ook een stukje opgeschoven. Ik kan er maar niet achter komen waar dit aan ligt, en hoe ik het op kan lossen (beide problemen).
Kan iemand me op weg helpen?

[ Voor 2% gewijzigd door MueR op 08-05-2006 23:25 . Reden: url doet et niet, tags maar ff weggehaald ]

[BasieP]

ik denk dat de eerste fout (fieldsets en achtergrondkleur) een foute implementatie is in IE, je kan het effect van die boxjes makkelijk nabootsen met 2 divjes, dit gaat wel goed in zowel IE als FF

het tweede probleem kan ik alleen maar van zeggen dat je een rare manier gebruikt om 2 divs naast elkaar te krijgen..
een voorbeeld hoe jij het doet:

Cascading Stylesheet:

div#middle {
    /* zut */
}
div#left {
    float: left;
    width: 200px;
}

verder vraag ik me af wat de optie 'clear: left;' doet, in je 'left' divje, deze zorgt dat het divje niet achter een andere div gezet word maar op een nieuwe 'regel', volgens mij staan er geen floating elementen voor je 'left' divje, en daarmee is deze nogal nutteloos

waar je dus in de html eerste de 'left' div plakt, en dan de 'middle', doordat je 'left' cleared zou ik
doordat je 'middle' niet floating maakt, is deze volledige breedte, en heb je een grote margin-left nodig om het te corrigeren. Dit wil je eigenlijk niet

zo hoort het:

Cascading Stylesheet:

div#middle {
    float: left;
}
div#left {
    float: left;
    width: 200px;
}

ow verder zie ik hele bergen extra opties die compleet nutteloos zijn, zoals 'clear:left;', en 'clear: right;' op plekken waar elementen niet door een floating element vooraf gaan bijv.
verder vind ik het raar dat je al je elementen de optie 'position: relative;' meegeeft, want er staan geen absolute elementen IN deze elementen
Verder zijn divjes default altijd 100% width, dus dit is ook vrij nutteloos

owja dit:

Cascading Stylesheet:

    background-color: white;
    color: black;

zijn default settings, deze mag je aannemen als al-gezet, en hoef je dus niet te specificeren. Als mensen dit veranderen doen ze het bewust en met een reden, en dan is het forcen ervan ook niet gewenst


ow en de reden dat je 'footer' niet helemaal rechts onder staat (wat je volgens mij wel wou) komt doordat je je 'lower' divje absoluut moet maken, anders werken dingen als 'left' en 'bottom' enzo niet.
natuurlijk dan wel even je divje op 100% width zetten, want omdat ie absoluut is is ie dat niet meer default.

en nu ga ik slapen

[ Voor 122% gewijzigd door BasieP op 08-05-2006 23:40 ]

[MueR]

Hier (http://home.muer.nl:8001/Recovery/test.php) een test zoals je zegt dat het zou moeten. Toch hou ik daar hetzelfde probleem.

HTML:

    <div id="middle">
      <div id="left">
        Menu hier
      </div>
      <div id="main">
        Content hier ....
      </div>
    </div>

En de stylesheet

Cascading Stylesheet:

div#middle {float: left;}
div#left {float: left;width: 200px;}
div#main {}

En ook http://home.muer.nl:8001/Recovery/test2.php doet niet precies wat ik zou willen.

Nu wel. Nog even kijken of ik die fieldset met legend kan namaken met divs. Toch bedankt BassieP

[ Voor 82% gewijzigd door MueR op 09-05-2006 01:03 ]

[JHS]

Volgens mij bedoelt * BasieP eerder zoiets, wat volgens mij wel werkt (je hebt nl. in de tussentijd de id's van je divisions verandert, heb ik het idee):

Cascading Stylesheet:

div#middle {
  overflow: auto;
}

div#left {
  float: left;
  width: 50px;
}

div#main {
  float: left;
}

[ Voor 3% gewijzigd door JHS op 09-05-2006 13:08 ]