[HTML/CSS] Div onder elkaar in IE

[We Are Borg]

Na een kleine discussie in een topic gelezen te hebben, heb ik besloten mijn totale site overhoop te gooien.
Voor de mensen die het zich afvragen, de onderstaande code had ik dus eerst met tabellen gedaan. Ik had er dus een doctype strict boven gezet en alles kloppend gemaakt, maar toen las ik een post van crisp. Was iets van "waarom strict doctype gebruiken als je tabellen gebruikt voor layout?". Dat is natuurlijk een leuke gedachte. Tabellen eruit, divjes in de plek + een strict doctype + css aanpassen. Allemaal leuk en aardig, alleen IE wil weer eens dwars liggen

HTML:

<div class="bigdivhead">
<div class="buttondivnav">
<a class="linknav" href="blaat.php">blaat</a>
</div>
<div class="buttonspacer">
[img]"spacer.gif"[/img]
</div>
<div class="buttondivnav">
<a class="linknav" href="blaat.php">blaat</a>
</div>
<div class="buttonspacer">
[img]"spacer.gif"[/img]
</div>
<div class="buttondivnav">
<a class="linknav" href="blaat.php">blaat</a>
</div>
<div class="buttonspacer">
[img]"spacer.gif"[/img]
</div>
<div class="buttondivnav">
<a class="linknav" href="blaat.php">blaat</a>
</div>
<div class="buttonspacer">
[img]"spacer.gif"[/img]
</div>
<div class="buttondivnav">
<a class="linknav" href="blaat.php">blaat</a>
</div>
<div class="buttonspacer">
[img]"spacer.gif"[/img]
</div>
</div>

Cascading Stylesheet:

.bigdivhead         {
                    width: 740px;
                    height: 25px;
                    font-family: trebuchet MS, Arial, Helvetica, sans-serif;
                    font-size: 12px;
                    background-color: #D9D9D9;
                    border-bottom: 1px solid black;
                    border-left: 1px solid black;
                    border-right: 1px solid black;
                    margin-left: auto;
                    margin-right: auto;
                    vertical-align: middle;
                    }

.buttondivnav       {
                    width: 740px;
                    height: 25px;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    }

.buttonspacer       {
                    width: 740px;
                    height: 25px;
                    text-align: center;
                    vertical-align: middle;
                    display: table-cell;
                    }

.spacerheader       {
                    text-align: center;
                    vertical-align: middle;
                    }

Een GoT search actie leverde me al snel dit topic op. Een float: left; zou mijn probleem voor IE moeten oplossen, maar waar ik deze ook in mijn huidige CSS plaats, het gaat fout. Het enige wat ik met die float left doe is het in Mozilla en Opera ook compleet verknallen. Ik denk dat ik de float left verkeerd plaats, maar de oplossing kan natuurlijk ook ergens anders liggen.

[Willem]

Ehm wat gaat er fout en kun je misschien een voorbeeldje uploaden?

[Johnny]

Je vergeet te vertellen hoe het er wel uit moet zien. Een online voorbeeld zou ook handig zijn.

Waarom gebruik je spacer gifs? Het leuke van CSS is dat je ze niet nodig hebt omdat je met margin: ruimtes kunt maken.

[We Are Borg]

Ik met mijn domme kop. Pics komen er nu aan



Bovenste is wat er gebeurd in Mozilla en Opera. Onderste is IE wat dus niet moet gebeuren

Johnny:
Spacer is misschien een ongelukkige naam. Het is puur layout technisch dat ik het mooi vind. Niet bedoelt als margin, want ik weer dat je erg simpel margin-left: 10px; kan toevoegen

[ Voor 99% gewijzigd door We Are Borg op 19-11-2003 13:14 ]

[disjfa]

een tip iig die ik laatst ook hier vond is in je css een a{display:block;} zetten

maar verder ga ik nog even doorlezen.........

de breedtes.... de overdiv is 740 px... maar de link divjes moeten niet zo breed staan anders krijg je idd wat je nu hebt

[ Voor 56% gewijzigd door disjfa op 19-11-2003 13:16 ]

[Willem]

Cascading Stylesheet:

div.bigdivhead div {
  float:left;
}

Werkt dit?

[kleautviool]

Ondersteunt IE display: table-cell; eigenlijk wel dan? Misschien dat dat het is.

[We Are Borg]

willem169 schreef op 19 november 2003 @ 13:15:

Cascading Stylesheet:

div.bigdivhead div {
  float:left;
}

Werkt dit?

Float left toevoegen:

bigdivhead:
Dan schuift het gedeelte helemaal naar links.

buttondivnav:
Dan gebeurd er niks

buttonspacer:
Dan gebeurd er niks

spacerheader:
Dan gebeurd er niks

Misschien op meerdere plekken toevoegen, maar heb i.i.g. nog niet gevonden. In het topic (link staat in topicstart) werd ook al gezegd dat je een float left moet gebruiken, maar bij mijn code invoegen is niet makkelijk omdat op elke plek die ik probeer niet goed is.

kleautviool schreef op 19 november 2003 @ 13:18:
Ondersteunt IE display: table-cell; eigenlijk wel dan? Misschien dat dat het is.

Nop, dat doet het niet. Tenminste, dat is wat ik heb gevonden. En dus die float left zou de IE functie moeten zijn voor display table-cell in mozilla/opera

disjfa schreef op 19 november 2003 @ 13:14:

de breedtes.... de overdiv is 740 px... maar de link divjes moeten niet zo breed staan anders krijg je idd wat je nu hebt

Nu ik daar zo overheen kijk zie ik dat het idd raar staat . Ik heb het even aangepast naar een kleine waarde, maar in IE komt dan alles nog steeds op een nieuwe regel te staan. Zie screenshot, maar dan alles links uitgelijnd.

[ Voor 40% gewijzigd door We Are Borg op 19-11-2003 13:24 ]

[Willem]

We Are Borg:
Misschien op meerdere plekken toevoegen, maar heb i.i.g. nog niet gevonden. In het topic (link staat in topicstart) werd ook al gezegd dat je een float left moet gebruiken, maar bij mijn code invoegen is niet makkelijk omdat op elke plek die ik probeer niet goed is.

En op exact de manier die ik hierboven aangeef?
Gewoon "ergens" in de CSS?

[We Are Borg]

willem169 schreef op 19 november 2003 @ 13:23:
[...]


En op exact de manier die ik hierboven aangeef?
Gewoon "ergens" in de CSS?

Kan je me ook uitleggen hoe dit nu werkt? Ik gooi nu gewoon in de css een gegeven die ik nergens met een class ophaal. Toch doet hij het prima

I.i.g. thanks!

[ Voor 53% gewijzigd door We Are Borg op 19-11-2003 13:34 ]

[Willem]

Je geeft een float:left op voor alle div's binnen div.bigdivhead.

np

[crisp]

dat heet een descendant selector

[We Are Borg]

Thanks voor de uitleg

[IschaGast]

Is dit misschien handig voor je: http://css.maxdesign.com.au/listamatic/index.htm

Ik begrijp dus dat die balk eigenlijk een menubalk is. Dan zou ik dat liever met een list doen. Ziet er dan net ff allemaal wat netter uit.

[We Are Borg]

IschaGast schreef op 19 november 2003 @ 14:49:
Is dit misschien handig voor je: http://css.maxdesign.com.au/listamatic/index.htm

Ik begrijp dus dat die balk eigenlijk een menubalk is. Dan zou ik dat liever met een list doen. Ziet er dan net ff allemaal wat netter uit.

Handige link. Thanks. Was zoiezo al niet tevreden over het menu en wilde al anders aanpakken.