[Firefox] Elementen verplaatsen na "onmousedown" van link - Softwareontwikkeling

vrijdag 16 december 2005 16:27

Acties:

Topicstarter

Een beetje moeilijk te omschrijven, maar een poging:

Ik heb wat in elkaar gedraaid dat allemaal wel ok lijkt. Het is vandaag even de omgekeerde wereld: iets werkt in IE, maar niet in Firefox, terwijl ik altijd uitga van FF en het daarna eventueel wat aanpas voor IE.

Het gaat om het volgende probleem: als ik op een willekeurige link op de pagina klik, verschuift er een deel van de inhoud van de pagina naar beneden. Er is een div met daarin 2 div's die naast elkaar staan dmv float left op de linker en float right op de rechter, met de breedtes van die 2 samen gelijk aan de breedte van de container div zeg maar.
De inhoud van die rechter div verschuift naar onder de inhoud van die linker div op het moment dat het beste omschreven kan worden als onmousedown (al wordt er helemaal niets met javascript gedaan).

Een zo ver mogelijk gestript voorbeeld:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="test_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="content">
        <div id="left_content">
            <ul id="menu">
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
                <li><a href="test.html">Menu</a></li>
            </ul>
        </div>
        <div id="main_content">
            <ul class="cats">
                <li><a href="test.html">Categorie</a></li>
                <li><a href="test.html">Categorie</a></li>
                <li><a href="test.html">Categorie</a></li>
                <li><a href="test.html">Categorie</a></li>
                <li><a href="test.html">Categorie</a></li>
            </ul>
        </div>
    </div>
    <div id="bottom"></div>
</div>
</body>
</html>

CSS:

Cascading Stylesheet:

* {
    padding: 0;
    margin: 0;
}
#container {
    width: 770px;
}
#content {
    display: table;
    height: 100%;
}
#main_content {
    float: right;
    width: 530px;
}
#left_content {
    float: left;
    width: 240px;
}
#bottom {
    width: 770px;
    height: 20px;
    clear: both;
}
#menu {
    border: 1px solid black;
    list-style-type: none;
    list-style-position: outside;
    width: 150px;
}
ul.cats {
    list-style-type: none;
    list-style-position: outside;
}

Iemand een idee hoe dit kan gebeuren?

Oh en voor de volledigheid: ik heb een poging gedaan met google en de seach, maar ik heb geen idee op welke woorden ik kan zoeken...

[ Voor 22% gewijzigd door IntToStr op 16-12-2005 16:29 ]

vrijdag 16 december 2005 16:32

Acties:

André

Analytics dude

En als je beide vlakken nou ietsje smaller maakt? Of ze allebei op float:left zet?

vrijdag 16 december 2005 16:35

Acties:

Sappie

De Parasitaire Capaciteit!

Afgezien van het feit dat je html erg bloated is (maar misschien is dit omdat je het voorbeeld hebt versimpeld), weet ik niet waartoe je div met id "content" dient. Deze kan (in dit voorbeeld tenminste) sowieso weg en daarmee is het probleem voor zover ik kan zien opgelost. Mocht je de content id om een of andere reden echt nodig hebben haal dan display: table daar maar weg.

[ Voor 18% gewijzigd door Sappie op 16-12-2005 16:38 ]

Specs | Audioscrobbler

vrijdag 16 december 2005 16:38

Acties:

IntToStr

Topicstarter

André schreef op vrijdag 16 december 2005 @ 16:32:
Of ze allebei op float:left zet?

Geen idee waarom, maar in m'n vereenvoudigde voorbeeld werkt het $_/-\o_$
Iemand wel een idee waarom?

@Sappie: het ziet er idd wat overdreven uit, maar die #content was nodig om een soort faux columns effect te krijgen. Dit voorbeeld was zwaar vereenvoudigd.
Om een of andere reden werkte IE met die height: 100% en FF niet en andersom voor display:table als ik me niet vergis. #content kreeg dan niet de hoogte die je zou verwachten, maar had hoogte 0.
Misschien dat dit nu ook niet meer het geval is na die float: left op beiden, maar dat moet ik nog nakijken.

[ Voor 30% gewijzigd door IntToStr op 16-12-2005 16:41 ]

vrijdag 16 december 2005 16:41

Acties:

Sappie

De Parasitaire Capaciteit!

Welke van de 2 suggesties die andre doet werkt?

Enne, ondanks dat je het voorbeeld uiteraard vereenvoudigd hebt, denk ik dat dat display: table waarschijnlijk toch nergens voor nodig zou moeten zijn; de floats worden namelijk niet gecleared in firefox en denk dat het toevoegen van "overflow: auto;" dat wel op moeten lossen. maar goed je bent al geholpen door andre zo

en als het werkt werkt het hè

[ Voor 39% gewijzigd door Sappie op 16-12-2005 16:46 ]

Specs | Audioscrobbler

vrijdag 16 december 2005 16:46

Acties:

IntToStr

Topicstarter

Sappie schreef op vrijdag 16 december 2005 @ 16:41:
Welke van de 2 suggesties die andre doet werkt?

Enne, ondanks dat je het voorbeeld uiteraard vereenvoudigd hebt, denk ik dat dat display: table waarschijnlijk toch nergens voor nodig zou moeten zijn; maar goed je bent al geholpen door andre zo en als het werkt werkt het hè

Het ging om die float: left. Heb het ook maar even gewijzigd net.

Zonder die display: table werkte het niet in FF om voor die #content een achtergrondplaatje te krijgen over de hele hoogte van max(hoogte div1, hoogte2) zeg maar. Omdat er alleen maar 2 elementen met float: left staan in die #content, krijgt #content hoogte 0.

Voor wat het nog waard is: na het artikel werd me duidelijk wat je bedoelde en werkt het zonder display: table

Zo leer je nog eens wat bij...

[ Voor 36% gewijzigd door IntToStr op 16-12-2005 18:49 ]

vrijdag 16 december 2005 16:50

Acties:

Sappie

De Parasitaire Capaciteit!

offtopic:
misschien dat je er anders overheen leest

heb mijn post net ook nog aangepast.. met betrekking tot het clearen van floats

je moet dan ook "overflow: auto;" toepassen op die div.. kijk bijvoorbeeld hier: http://annevankesteren.nl/2005/03/clearing-floats

[ Voor 32% gewijzigd door Sappie op 16-12-2005 17:08 ]

Specs | Audioscrobbler