[IE] ListItems onbruikbaar? - Softwareontwikkeling

donderdag 3 maart 2005 09:57

Acties:

je wéét toch

Topicstarter

In een Unordered List, moet een item "opengeklikt" kunnen worden door op de bullet te klikken.
Dit werkt uitstekend in de mockup - maar zodra de code in een "omgeving" wordt gehangen is de bullet niet meer klikbaar.. ook de CSS styles werken niet meer op de bullets...
Na de omgeving te hebben gestripped komen we tot de volgende ontdekking, het gaat om de tabelstructuur. (Deze is valide.)

Uiteindelijk hebben we dit terug weten te brengen tot de volgende snippet. Het lijkt er op dat de bullets werken zodra er niets in de bovenliggende cell staat, zodra deze ook maar iets wat ruimte inneemt bevat zijn de bullets dood... In Firefox werkt dit overigens wel.
Inmiddels is de list al op een andere manier opgebouwd, maar ik vraag me nog steeds af of hier geen work-around voor is... Iemand???

code:

<!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=utf-8"/>
 </head>
 <body>
  <table>
   <tr>
    <td>
     waarom mag hier niets staan??!
    </td>
   </tr>
   <tr>
    <td>
     <ul>
      <li style="CURSOR: hand;" onclick="alert('click!');">
       TopItem</li>
     </ul>
    </td>
   </tr>
  </table>
 </body>
</html>

Flickr

donderdag 3 maart 2005 10:05

Acties:

crisp

Devver

Pixelated

Je zegt het niet, maar ik neem aan dat je het over IE hebt?
Hier in IE6 werkt het nochthans prima, hoewel ik (zeker in XHTML - ook al ondersteund IE dat niet en neem ik aan dat je het als text/html gebruikt, dus HTML) style-attributen dan ook lowercase zou doen en cursor: pointer; zou gebruiken.
In ieder geval werkt de alert dus wel...

Overigens, waarom de tabel? Als dat voor opmaak is zou ik dat nog eens overdenken.
Ik vermoed trouwens, aangezien je ook aangeeft dat styles niet meer werken, dat er in je 'omgeving' iets fout zit in de markup of je CSS.

[ Voor 27% gewijzigd door crisp op 03-03-2005 10:07 ]

Intentionally left blank

donderdag 3 maart 2005 10:36

Acties:

OkkE

CSS influencer :+

Als ik het hier test werkt het niet als ik in IE6/Win2k op de bullet klik. Als ik op de tekst klik werkt het wel. In FireFox werkt het altijd, of ik nu op de bullet of op de tekst klik. Een work-around zou ik trouwens echt niet weten.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 3 maart 2005 10:42

Acties:

DeFeCt

je wéét toch

Topicstarter

crisp schreef op donderdag 03 maart 2005 @ 10:05:
Je zegt het niet, maar ik neem aan dat je het over IE hebt?

Ik gebruik nog wel zo mooi de prefix..

Het gaat indd over IE,(IE6/Win2k3) de code en text heb ik even gecopypaste van ons intranet en is van een developer. E.e.a. wordt in SharePoint gehangen, ik weet niet of je daar mee bekend bent, maar het heroverwegen van een tabel is geen optie zeg maar

OkkE is kennelijk wel in staat om mijn probleem te reproduceren.. vreemd.

Flickr

donderdag 3 maart 2005 10:44

Acties:

crisp

Devver

Pixelated

ah wacht, my bad - de bullet is inderdaad niet aanklikbaar. De LI een position:relative geven lost dat op.
IE is gewoon buggy als hell wat dat betreft

Intentionally left blank

donderdag 3 maart 2005 10:49

Acties:

Clay

cookie erbij?

Lijkt me een dikke bug. Wel grappig trouwens dat je op de bullet klikken kan terwijl die strikt genomen buiten de li zelf staat. In moz kan je dan ook niet tussen de buttel en de li klikken

Kan je niet gewoon een no-repeat bg image op de li zetten met een padding-left zodat je een bullet faked? dan kan je die bullet gewoon weghalen en heb je ook geen last van IE bugs.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 3 maart 2005 11:11

Acties:

DeFeCt

je wéét toch

Topicstarter

crisp schreef op donderdag 03 maart 2005 @ 10:44:
ah wacht, my bad - de bullet is inderdaad niet aanklikbaar.

Als je nu de tekst in de td erboven weghaalt is hij opeens wel klikbaar. IE.......

Clay schreef op donderdag 03 maart 2005 @ 10:49:
Kan je niet gewoon een no-repeat bg image op de li zetten met een padding-left zodat je een bullet faked? dan kan je die bullet gewoon weghalen en heb je ook geen last van IE bugs.

Dat is volgens mij wel een leuke workaround

Dev heeft nu een andere oplossing gebakken, maar ik ga deze nog eens testen.

Flickr

zondag 6 maart 2005 16:32

Acties:

DeFeCt

je wéét toch

Topicstarter

Hmz, volgens mij werkt de workaround van Clay ook niet.. Ook de background image wordt namelijk niet klikbaar.

Ik sta open voor suggesties

code:

<!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=utf-8"/>
<style>
li{
background-image: url(MenuItemIcon.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
list-style-type: none;
}
</style>
 </head>
 <body>
  <table>
   <tr>
    <td>
    blabla
    </td>
   </tr>
   <tr>
    <td>
     <ul>
      <li onclick="alert('click!');">
       <a href="http://www.google.com ">TopItem</a>
                            </li>
     </ul>
    </td>
   </tr>
  </table>
 </body>
</html>

Flickr

zondag 6 maart 2005 16:43

Acties:

crisp

Devver

Pixelated

crisp schreef op donderdag 03 maart 2005 @ 10:44:
ah wacht, my bad - de bullet is inderdaad niet aanklikbaar. De LI een position:relative geven lost dat op.
IE is gewoon buggy als hell wat dat betreft

al geprobeerd?

Intentionally left blank

maandag 7 maart 2005 09:53

Acties:

DeFeCt

je wéét toch

Topicstarter

crisp schreef op zondag 06 maart 2005 @ 16:43:
[...]
al geprobeerd?

my bad... missed it!
who the man?!

tnx

Flickr