Toon posts:

[DHTML] DIV werkt in Mozilla, SPAN niet

Pagina: 1

Acties:

31 views sinds 30-01-2008
Reageer

maandag 13 januari 2003 21:41

Acties:

Verwijderd

Topicstarter

Nadat ik hem net perongeluk in PW had gepost en ik een slotje kreeg (sorry D2k), hier nogmaals mijn vraag...

Ik heb het volgende script geschreven.

http://www2.hku.nl/~jaap3/nidex.html

Nu werkt dit helemaal zo als het hoort in IE, maar niet in Mozilla.
Daar krijg ik in plaats van de door mij gewenste blokjes alleen maar lelijke lijntjes. Als ik in de source bij createElement SPAN door DIV vervang krijg ik wel de gewenste blokjes maar in een verticale lijn en dus niet horizontaal zoals ik dat wil...

heeft iemand een idee hoe ik dit op ga lossen?

maandag 13 januari 2003 22:10

Acties:

Verwijderd

div met display inline? het lijkt wel offie de width niet pakt ofzow, toevoegen van position: relative een optie?

maandag 13 januari 2003 22:25

Acties:

Verwijderd

Topicstarter

als ik er een div van maak met display : inline werkt het wel zoals ik het wil in IE maar nog steeds niet in Mozilla... relative voert helemaal niets uit, jammer genoeg

heel apart toch?

maandag 13 januari 2003 22:31

Acties:

Willem

Zet je DTD eens op XHTML/XML en probeer het nog eens?
Welke Moz versie gebruik je?

Motor (of auto) onderhoud bijhouden

maandag 13 januari 2003 22:36

Acties:

Verwijderd

Topicstarter

met het doctype op <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> en
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

word het een zwart vlak in Mozilla (Mozilla 1.2.1) en helemaal niets in IE...

[ Voor 27% gewijzigd door Verwijderd op 13-01-2003 22:38 ]

maandag 13 januari 2003 22:51

Acties:

edwinistrator

en als je je blokjes nou eens anders opbouwt.
Dus alleen de background-color variable maken en de blokjes anders opbouwen met css zoiets als:

code:

<div style="
    width: 9px;
    height: 9px; 
    border: 1px solid #000; 
    line-height: 0px; 
    font-size: 0px; 
    margin: 1px; 
    float: left">
</div>

en deze dan gewoon meegeven met een class,
zo zien in ieder geval de blokjes er bij mij wel goed uit in mozilla, maar moet je wel aardig je script aanpassen?

p.s. moet je ook even dit style-tje toevoegen voor de box-model hack, dan zijn de blokjes even groot in IE en MOZ:

code:

<style>
<!--
div {
    -moz-box-sizing: border-box;
    }
-->
</style>

[ Voor 30% gewijzigd door edwinistrator op 13-01-2003 22:56 ]

maandag 13 januari 2003 22:53

Acties:

Verwijderd

inline elementen hebben geen width of height. Je moet een ander display type nemen.
Display block kan, dan moet je ook float:left doen om ze niet onder elkaar te krijgen.
En dan aan het begin en aan het eind van die rij met spans (of divs) een lege div plaatsen met style clear:both; Anders krijgt de container div geen hoogte.

Display: table-cell helpt ook al heel aardig, alleen krijg je dan geen border. Moet je zelf maar even uitzoeken hoe je die dan wel kunt krijgen.

maandag 13 januari 2003 23:05

Acties:

Verwijderd

Topicstarter

thanks allemaal en vooral Martijn22... het werkt nu!

dinsdag 14 januari 2003 20:32

Acties:

Verwijderd

Topicstarter

OK ik ben nu een stuk verder met het script maar opeens viel mijn oog op het feit dat die vierkantjes niet meer gecentreerd worden.
Ook al staat er in de "containers" 'style="text-align: center;"' en worden de "subcontainers" allemaal voorzien van 'container.style.textAlgin = "center";'

ik heb zelfs de vierkantjes zelf maar voorzien van textAlign = "center" maar ook dat helpt niet.

Heeft iemand een idee hoe ik dit nu weer op moet gaan lossen....

de volledig source (voorzien van comments) staat hier: http://www2.hku.nl/~jaap3/nidex.html

dinsdag 14 januari 2003 21:23

Acties:

Verwijderd

Topicstarter

mhh... ook is het zo dat wanneer Mozilla een scrollbar aan de zijkant weergeeft de blokjes niet meer goed komen te staan. Ik heb alle manieren om de breedte van de browser te meten die hier: http://www.xs4all.nl/~ppk/js/doctypes.html beschreven staan geprobeerd maar om een of andere reden werkt niets... what's wrong?

dinsdag 14 januari 2003 22:27

Acties:

Verwijderd

Ik denk dat, omdat je de stijleigenschap float:left gebruikt alles gewoon naar links gaat. Daar helpt een text-align:center of een margin-left:auto, margin-right:auto ook niet meer.

Klinkt een beetje lullig, maar misschien is het beter om er een tabel van te maken met allemaal kleine celletjes. Tabelletjes zijn wat makkelijker in te delen. Tabelcellen kunnen ook nooit naar de volgende rij gaan.
In Mozilla had je die divjes dan gewoon display:table-cell kunnen maken, maar daar heb je in IE niets aan.

maandag 20 januari 2003 19:06

Acties:

Verwijderd

Topicstarter

het is me uiteindelijk toch nog gelukt om die blokjes te centreren.

door te berekenen hoeveel ruimte er nog over is (browserbreedte-gebruikteruimte) en deze waarde door 2 te delen en daarna voor ieder blokje die waarde aan style.left te hangen worden de blokjes uiteindelijk toch nog gecentreerd.

uiteindelijke resultaat te zien op http://www2.hku.nl/~jaap3/nidex.html

Pagina: 1

Reageer