[CSS]3 layout verschillen tussen FF en EX
Ik heb vandaag even gewerkt aan de occasion script die ik wil maken. Ben nu op het moment nog niks aan het programmeren. Ik wil eerst de structuur hebben en dan pas programmeren. Op dit moment heb ik dit dus:
Main pagina(deze werkt goed in beide browsers goed)
Detail pagina(de pagina waar ik het hieronder over heb)
Nu werkt alles goed in Firefox, maar heb ik in explorer een paar dingen die niet zo moeten zijn in. Voor degene die geen FF hebben of snel willen zien hoe ik het wil hebben hier een screenshot van de pagina.
Nu wil ik alles hebben zoals op de screenshot tezien is (zoals firefox de pagina genereert). Als je de zelfde pagina in explorer bekijkt zie je dat er geen ruimtes meer zit tussen de lijsten. En ook de andere witruimtes die je wel ziet op de FF versie. Waardoor komt dit verschil? Ik wil het dus laten uitzien als die van FF.
Nu heb ik nog meer problemen, maar wil dat 1 voor 1 doen en niet allemaal tegenlijk. Maar 1 ding wil ik wel alvast vragen. Als je de broncode van pagina laat valideren zie je dat er veel error's zijn. Dat komt omdat ik dit heb gedaan:
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<span>Wat tekst: </span>
<li>1</li>
<li>2</li>
</ul>
<span>Wat tekst: </span>
<li>1</li>
<li>2</li>
</ul>
Je mag dus blijkbaar geen tekst plaatsen tussen de ul buiten de li om. Moet ik dus in dit geval gewoon de hele tijd afsluiten met </ul> en dan de tekst en dan weer openen? Of is er nog een andere manier?
Alvast bedankt,
Ilyes (wordt gek van de verschillen in de wereld van de browsers)
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
Code (php)
1
2
3
4
5
2
3
4
5
<h2>Wat tekst:</h2>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>
Semantisch is dit ook correct; je titel is immers geen onderdeel van je lijstje.
edit:
HUH... wow echt hardcore phphulper :P >>met 16215 posts
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
DDragonz schreef op 25.08.2008 21:03:
echt hardcore phphulper :P >>met 16215 posts
:-)
Ik zie nu ook dat het heeft geholpen met de helft van de probleem die ik hierboven had beschreven. Alle lijsten zijn nu, net als in FF, met een witregel gescheiden (<br /> werkt dus slecht in een <ul> :P in EX). Maar nu wil ik nog de ruimte tussen de vinkjes en de pijltjes en de tekst vergroten net zoals dat is in FF. Zou zelf zeggen iets met margin, maar dat zijn met vaste waardes ingesteld en zou dus eigenlijk het zelfde moeten zijn. hmm
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
Die pijltjes zijn als het goed is de opsommingstekens die je aan je ul (li) meegeeft. Als je de list items een margin-top en margin-bottom meegeeft van een bepaalde waarde moet het kunnen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul {
list-style: url(../images/vink.jpg) square;
list-style-position: inside;
margin: 0 0 0 4px;
padding: 0;
}
ul ul {
list-style: url(../images/pijl.jpg) disc;
list-style-position: inside;
margin: 0 0 0 22px;
padding: 0;
}
ul ul ul {
list-style: url(../images/pijl.jpg) circle;
list-style-position: inside;
margin: 0 0 0 22px;
padding: 0;
}
list-style: url(../images/vink.jpg) square;
list-style-position: inside;
margin: 0 0 0 4px;
padding: 0;
}
ul ul {
list-style: url(../images/pijl.jpg) disc;
list-style-position: inside;
margin: 0 0 0 22px;
padding: 0;
}
ul ul ul {
list-style: url(../images/pijl.jpg) circle;
list-style-position: inside;
margin: 0 0 0 22px;
padding: 0;
}
Nou, denk ik dat je het verkeerd hebt begrepen. Ik ga het verduidelijken met een img. Ik edit dit zo.
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
Zie hier.
De bovenste helft is ff en dus hoe ik hem wil hebben. De onderste is ex. Jij wilde dus net van dat hierboven zeggen hoe ik die blauwe ruimte (zie de img) kon krijgen op de ex versie. Maar dat had ik al opgelost door die ul en li error vrij te krijgen. Nu wil ik de rode ruimte ook krijgen op ex waar je ze dus niet ziet bij de plaatsen nummer 1 en 2.
Beter als dit kan ik het niet uitleggen ;). Wat was die gezegde van een plaatje zegt meer als woorden of wat :P (geen zin om dat precies optezoeken).
Weet niemand waardoor het komt?
Dit zet 'alles' voor elke browser gelijk, standaard zitten er namelijk verschillen in margins ed tussen de verschillende browsers.
Zet daarna in je css de padding-left op bijv 5px.
Dit moet werken.