Definition List & Span - Firefox vs IE - Softwareontwikkeling

maandag 23 april 2007 11:50

Acties:

Topicstarter

Hoi allemaal,
Ik loop tegen het volgende probleem aan en ik hoop dat iemand weet hoe ik het op kan lossen:
In zowel Firefox als IE 6 kun je de definition description links uitlijnen door de margin op 0 te zetten. Als je echter de <dd>...<-dd> tags tussen een span zet werkt dat in Firefox plotseling niet meer, terwijl IE 6 daar niet moeilijk over doet. Onderstaand stukje code illustreert dit. Ik wil het gedrag van IE in dit geval hebben. Het moet niet uitmaken of een dd tussen spans staat of niet. Iemand enig idee hoe ik Firefox zover kan krijgen dat ie mijn dd weer helemaal links uitlijnt als er een span omheen staat?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<Head>
<Title>Dit is een DD test</Title>
<style type="text/css">
.nav { width:400px; }
.nav dt { 
    display:block;
    min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em;
    border-top: solid 1px rgb(200,200,200);
    padding:0px 10px 0px 20px;
    cursor:pointer;
}
.nav dd {
    display:block;
    padding:0px 10px 0px 40px;
    min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; 
    border:none; 
    margin-left: 0px;
    cursor:pointer;
}
.nav dd.subtag {
    padding:0px 10px 0px 60px;

}
</style>
</Head>

<Body>
<dl class="nav">
<dt>Dit is de 1e Tag</dt>
<span id="item1"><dd>Dit is de 1e definitie met span eromheem</dd></span>
<dd>Dit is de 2e definitie</dd>
<dd>Dit is de 3e definitie</dd>
<dt>Dit is nog een Tag</dt>
<dd>deze tag heeft ook een definitie</dd>
<dd class="subtag">en een subtag die in moet springen</dd>
<dd class="subtag">En deze moet ook inspringen</dd>
<dd>En deze niet meer</dd>
</dl>
</body>
</html>

maandag 23 april 2007 12:00

Acties:

faabman

ehmmm, je mag geen span om een dd heenzetten??

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

maandag 23 april 2007 12:21

Acties:

martdj

Topicstarter

Volgens de W3C standaarden mag wel meer niet, maar dat betekent gelukkig niet dat het niet kan werken. Die spans zijn nodig om stukken van de navigatie naar keuze in of uit te klappen en dat kan voor mijn gevoel niet echt op een andere wijze. De Definition list is een mooie manier om een navigatie structuur te beschrijven.

maandag 23 april 2007 12:24

Acties:

Erkens

Fotograaf

martdj schreef op maandag 23 april 2007 @ 12:21:
Volgens de W3C standaarden mag wel meer niet, maar dat betekent gelukkig niet dat het niet kan werken.

Blijkbaar werkt het niet, anders had je dit topic niet geopend

Die "regels" zijn er niet voor niks.

Die spans zijn nodig om stukken van de navigatie naar keuze in of uit te klappen en dat kan voor mijn gevoel niet echt op een andere wijze. De Definition list is een mooie manier om een navigatie structuur te beschrijven.

Met dat laatste ben ik het wel eens (hoewel ik vaker voor Unordered Lists kies <ul>). Echter om in en uit te klappen zit je echt niet vast aan span elementen, dit kan je met praktisch elke element doen.

maandag 23 april 2007 12:37

Acties:

martdj

Topicstarter

Erkens schreef op maandag 23 april 2007 @ 12:24:
[...]

Blijkbaar werkt het niet, anders had je dit topic niet geopend
Die "regels" zijn er niet voor niks.

[...]

Met dat laatste ben ik het wel eens (hoewel ik vaker voor Unordered Lists kies <ul>). Echter om in en uit te klappen zit je echt niet vast aan span elementen, dit kan je met praktisch elke element doen.

Ok, ik zal dus blijkbaar naar een andere manier op zoek moeten om mijn menu op te bouwen. Hebben jullie suggesties om een menu als onderstaand anders op te bouwen?

code:

<dl class="nav3-grid">
    <dt><span id="img1"><img src="minus.gif?OpenImageResource" alt="collapse" onClick="collapse('1');"></span><a href="Content/1?OpenDocument">Welcome</a></dt>
<span id="cat1" style="display:block"><dd><span id="img1.26"><img src="minus.gif?OpenImageResource" alt="collapse" onClick="collapse('1.26');"></span><a href="Content/1.26?OpenDocument">News</a></dd>

<span id="cat1.26"><dd class="subcat" ><a href="Content/1.26.1?OpenDocument">BlackBerry Pilot has ended</a></dd>
<dd class="subcat"><a href="Content/1.26.2?OpenDocument">Planned production</a></dd></span>
<dd><span id="img1.37"><img src="plus.gif?OpenImageResource" alt="expand" onClick="expand('1.37');"></span><a href="Content/1.37?OpenDocument">Introduction</a></dd>
<span id="cat1.37" style="display:none"><dd class="subcat"><a href="Content/1.37.1?OpenDocument">Lead-time</a></dd></span>
<dd><span id="img1.64"><img src="plus.gif?OpenImageResource" alt="expand" onClick="expand('1.64');"></span><a href="Content/1.64?OpenDocument">How to Apply</a></dd>
<span id="cat1.64" style="display:none"><dd class="subcat"><a href="Content/1.64.1?OpenDocument">Domino Password</a></dd></span>
<dd><a href="Content/1.74?OpenDocument">Colophon</a></dd>
<dd><a href="Content/1.85?OpenDocument">Intended Users</a></dd></span>
<dt><span id="img2"><img src="plus.gif?OpenImageResource" alt="expand" onClick="expand('2');"></span><a href="Content/2?OpenDocument">About BlackBerry</a></dt>

<span id="cat2" style="display:none"><dd><a href="Content/2.43?OpenDocument">Service Target</a></dd>
<dd><a href="Content/2.44?OpenDocument">BB Usage Policy</a></dd>
<dd><span id="img2.53"><img src="plus.gif?OpenImageResource" alt="expand" onClick="expand('2.53');"></span><a href="Content/2.53?OpenDocument">Features</a></dd>
<span id="cat2.53" style="display:none"><dd class="subcat"><a href="Content/2.53.1?OpenDocument">More Features</a></dd></span>
<dd><span id="img2.54"><img src="plus.gif?OpenImageResource" alt="expand" onClick="expand('2.54');"></span><a href="Content/2.54?OpenDocument">Costs & ROI</a></dd>
<span id="cat2.54" style="display:none"><dd class="subcat"><a href="Content/2.54.1?OpenDocument">UK Users</a></dd>
<dd class="subcat"><a href="Content/2.54.2?OpenDocument">NL Users</a></dd>
<dd class="subcat"><a href="Content/2.54.3?OpenDocument">EU Users</a></dd>

Het probleem is dus een beetje dat ik stukken van meerdere DD tags moet kunnen tonen of verbergen. Dat is waar ik nu die <span> tags voor misbruik

maandag 23 april 2007 12:40

Acties:

disjfa

be

Je wilt gewoon een lijstje in een lijstje. Dan moet je niet een lijstje maken, maar meer aangezien het lijstjes in lijstjes zijn

disjfa - disj·fa (meneer)
disjfa.nl

maandag 23 april 2007 13:06

Acties:

martdj

Topicstarter

ok, meer iets in de richting van:

code:

<ul>
<li>Dit is de 1e Tag
<ul class="subtag"><li>Dit is de 1e definitie</li>
<li>Dit is de 2e definitie</li>
<li>Dit is de 3e definitie</li></ul></li>
<li>Dit is nog een Tag
<ul class="subtag"><li>deze tag heeft ook een definitie
<ul class="subsubtag"><li class="subtag">en een subtag die in moet springen</li>
<li class="subtag">En deze moet ook inspringen</li></ul></li>
<li>En deze niet meer</li></ul></li>
</ul>

dus

maandag 23 april 2007 13:11

Acties:

mithras

Als je om te beginnen nu eens met code=html de html syntax highlighter aanzet en er voor ons een testcase van bouwt. Je wil eigenlijk een menu (martdj in "Definition List & Span - Firefox vs IE"), maar gaat door met een defenition list (martdj in "Definition List & Span - Firefox vs IE").

Maak dan zoiets:

HTML:

<ul>
   <li>Home</li>
   <li>Producten
      <ul>
         <li>Product1</li>
         <li>Product2</li>
      </ul>
      </li>
   <li>Diensten
      <ul>
         <li>Dienst1</li>
         <li>Dienst2</li>
      </ul>
      </li>
   <li>Links</li>
</ul>

Dan kan je een hele ul in of uitklappen.

Maar zoek je niet gewoon een suckerfish oplossing? Google daar eens op, zijn genoeg mooie oplossingen te vinden (van bijvoorbeeld A List Apart).

[ Voor 9% gewijzigd door mithras op 23-04-2007 13:18 ]

maandag 23 april 2007 13:13

Acties:

Erkens

Fotograaf

martdj schreef op maandag 23 april 2007 @ 13:06:
ok, meer iets in de richting van:

code:

<ul>
<li>Dit is de 1e Tag
<ul class="subtag"><li>Dit is de 1e definitie</li>
<li>Dit is de 2e definitie</li>
<li>Dit is de 3e definitie</li></ul></li>
<li>Dit is nog een Tag
<ul class="subtag"><li>deze tag heeft ook een definitie
<ul class="subsubtag"><li class="subtag">en een subtag die in moet springen</li>
<li class="subtag">En deze moet ook inspringen</li></ul></li>
<li>En deze niet meer</li></ul></li>
</ul>

dus

idd, hoewel het handiger is om het leesbaar te noteren, dan scheelt later een hoop tijd

HTML:

<ul>
  <li>Dit is de 1e Tag
    <ul class="subtag">
      <li>Dit is de 1e definitie</li>
      <li>Dit is de 2e definitie</li>
      <li>Dit is de 3e definitie</li>
    </ul>
  </li>
  <li>Dit is nog een Tag
    <ul class="subtag">
      <li>deze tag heeft ook een definitie
        <ul class="subsubtag">
          <li class="subtag">en een subtag die in moet springen</li>
          <li class="subtag">En deze moet ook inspringen</li>
        </ul>
      </li>
      <li>En deze niet meer</li>
    </ul>
  </li>
</ul>

maandag 23 april 2007 14:29

Acties:

faabman

waarom maken jullie die classNames aan terwijl je selectors kunt gebruiken?

code:

1	.subtag = ul#nav li ul

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

maandag 23 april 2007 14:33

Acties:

Erkens

Fotograaf

faabman schreef op maandag 23 april 2007 @ 14:29:
waarom maken jullie die classNames aan terwijl je selectors kunt gebruiken?
code:
1
.subtag = ul#nav li ul

Als eerste heb ik zijn code gewoon netter neergezet, en daarnaast klopt jouw vergelijking niet,
want .subtag is in het voorbeeld ook "ul#nav li ul li ul li".
En omdat je dan bezig blijft terwijl als je die class gebruikt dat je flexibeler bent kwa nesting.

maandag 23 april 2007 16:11

Acties:

martdj

Topicstarter

Ik kom hier weer een stuk verder mee op een belangrijk punt na: Mijn mouseovers. Het idee is dat als ik met mijn muis over een regel ga die hele regel en alleen die regel van background-color wijzigt. Nu verandert dus die regel + alle regels die binnen dezelfde <li> tag vallen. Aangezien er een achtergrondplaatje is, kan ik ook niet de lagere li tags een standaard achtergrondkleur geven.

[ Voor 16% gewijzigd door martdj op 23-04-2007 16:46 ]

dinsdag 24 april 2007 10:00

Acties:

martdj

Topicstarter

*bump*
Iemand nog een idee hoe ik mijn "mouseover" probleem kan oplossen? Op dit punt zie ik toch wel problemen in het gebruik van <UL>/<LI>'s, maar ik kan ook geen w3c compliant alternatieven meer bedenken, anders dan steeds via JavaScript het hele menu te herschrijven als iets in of uitgeklapt wordt.

dinsdag 24 april 2007 10:05

Acties:

Sappie

De Parasitaire Capaciteit!

Heb je wat online staan? Of voorbeeld code?

Specs | Audioscrobbler

dinsdag 24 april 2007 10:06

Acties:

mithras

Cascading Stylesheet:

li:hover{
  background-color:#f00 /* anders */
}
li:hover li{
  background-color:#000 /* normaal */
}

Werkt zoiets niet, dus het forceren van li's in een hover naar de oorspronkelijke kleur?

[ Voor 5% gewijzigd door mithras op 24-04-2007 10:06 ]

dinsdag 24 april 2007 11:57

Acties:

CH4OS

It's a kind of magic

mithras schreef op dinsdag 24 april 2007 @ 10:06:
Cascading Stylesheet:
1
2
3
4
5
6
li:hover{
  background-color:#f00 /* anders */
}
li:hover li{
  background-color:#000 /* normaal */
}
Werkt zoiets niet, dus het forceren van li's in een hover naar de oorspronkelijke kleur?

In FireFox en dergelijke zou het moeten werken inderdaad.
In IE werkt dat weer niet, omdat IE alleen pseudo selector (of zoiets) alleen op de a-tag kent:
a:hover
a:visited
a:active
En nog eentje, die ik even niet weet...

dinsdag 24 april 2007 11:59

Acties:

Sappie

De Parasitaire Capaciteit!

GJ-tje schreef op dinsdag 24 april 2007 @ 11:57:
[...]
In FireFox en dergelijke zou het moeten werken inderdaad.
In IE werkt dat weer niet, omdat IE alleen pseudo selector (of zoiets) alleen op de a-tag kent:
a:hover
a:visited
a:active
En nog eentje, die ik even niet weet...

Dat heet pseudo klasse

Maargoed er zijn genoeg behaviors (stukjes javascript) die de gewenste functionaliteit ook in IE bewerkstelligen.

De laatste pseudo klasse is btw: a:link

[ Voor 4% gewijzigd door Sappie op 24-04-2007 12:00 ]

Specs | Audioscrobbler

dinsdag 24 april 2007 12:09

Acties:

daniëlpunt

monkey's gone to heaven

En vergeet niet de pseudo klasse in de LoVeHAte volg orde te zetten.

Cascading Stylesheet:

a:link {} 
a:visited {}
a:hover {}
a:active {}

Of 'Liefde en Vriendschap Hangen Aan elkaar'.

dinsdag 24 april 2007 12:14

Acties:

CH4OS

It's a kind of magic

super-muffin schreef op dinsdag 24 april 2007 @ 12:09:
En vergeet niet de pseudo klasse in de LoVeHAte volg orde te zetten.
Cascading Stylesheet:
1
2
3
4
a:link {} 
a:visited {}
a:hover {}
a:active {}
Of 'Liefde en Vriendschap Hangen Aan elkaar'.

offtopic:
Dus tóch a:link, ik twijfelde té enorm om zeker van mijn zaak te zijn.
Over de benaming was ik ook even in de war, tussen pseude class en pseudo selector...

[ Voor 10% gewijzigd door CH4OS op 24-04-2007 12:17 ]

dinsdag 24 april 2007 12:37

Acties:

martdj

Topicstarter

Ik heb daar ook al aan gedacht om op de hogere tags de achtergrond weer te herstellen, maar probleem daarbij is dat als achtergrond van de navigator een plaatje wordt gebruikt (faux columns) en de mouseover dus een background color krijgt, maar de niet-mouseovers transparant moeten zijn. Als ik dat laatste aangeef via de selectors zoals jullie ook aangeven, toont ie vrolijk de achtergrondkleur van de <LI> die eronder ligt.

Nu ik dit schrijf, bedenk ik me dat ik kan proberen om dat plaatje weer als achtergrond te geven aan die rijen die niet mouseover moeten lijken.
Ik zit vandaag thuis te werken, dus misschien kan ik wel een voorbeeld online zetten. Zo meteen eens kijken. Voor nu ben ik even verder gegaan met de niet w3c compliant code die er wel goed uitziet in IE en iets minder in Firefox.