Issue with Bullets on jQuery Multi Level CSS Menu #2 [Archive]

megapatato

07-16-2010, 02:30 AM

Hello, I've implemented the "jQuery Multi Level CSS Menu #2" in a Wiki-style webpage for a school project. However, in the dropdown menus the bullets of the list items still appear. Instead of having a clean layout with only the arrows, I get bullets on top of arrows. I've attached an image showing this behavior.

Since it is a Wiki-style project, I can not upload javascript code. What I did was put the code on the webpage in the order it should be loaded:

First, the CSS (jqueryslidemenu.css)
Then, the Hack:



Last, the javascript source (jqueryslidemenu.js)

And all these in the <head> of the webpage.
It all works perfectly, sauf those bullets... This issue is present both in Firefox 3.5.9 and Chrome 5.0.375.99
I think the issue lies somewhere in the CSS, but I don't know where... Could someone please tell me what part of the code is supposed to hide those bullets?

Thanks for any useful info!

megapatato

07-18-2010, 08:09 AM

Took me a while to find the "error", but I nailed it.
I'll walk you through my detective-esque experience ;)

After carefully reading the CSS for the list I wanted to alter, I found the list-style-type argument. So I toyed with it. The following three codes had the same effect: nasty blue square bullets.

.jqueryslidemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.jqueryslidemenu ul{
list-style-type: square;
margin: 0;
padding: 0;
}

.jqueryslidemenu ul{
list-style-type: disk;
margin: 0;
padding: 0;
}

I thought that maybe the tags were wrong, so I changed both margin and padding arguments to see if that section was working. It was. :confused:
The only argument who appeared not evaluated was list-style-type. I read the default behavior of the list-style-type argument should be disk, and yet I saw squares. Therefore, something must be overwriting the setting. So I though I could use some more extreme methods of coaxing those blue bullets out. Again, I tried the following codes and the result was the same: nasty blue square bullets.

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:disk">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Evidently, something was dramatically changing stuff. I mean, in these last codes I placed the argument as inline CSS, and still it would not work! :mad:

It was then I turned to further reading on WikiMedia. I found that raw HTML is frowned upon by WikiMedia [1], and that there's a PHP subroutine in WikiMedia sites that cleans HTML code to prevent attacks known as Sanitizer [2]. This last subroutine is quite thorough, unless arguments are on a white-list, they are ignored.:eek:
My guess is one such !white list item is the famous list-style-type argument. Therefore, Sanitizer was probably recognizing it as MW_EVIL_URI_PATTERN, and ignoring it.

And I'm not making these names up, it actually says Sanitizer and EVIL PATTERN.

It was then I chanced upon a help topic about bullets behaving wrong after being Sanitized [3]. In there, it said that list-style-image was not being evaluated, and that the default was being loaded. So I thought that since list-style-image is white-listed, I could load a transparent pixel as an image, and thus avoid those nasty blue square bullets. I found a source of said transparent pixel online, and Problem Solved!! :cool:

Here's the final working section of CSS that does work:

.jqueryslidemenu ul{
list-style-image:url("http://www.golivetutor.com/download/spacer.gif");
list-style-type: square;
margin: 0;
padding: 0;
}

It loads a transparent pixel and places it on top that nasty blue square bullet. I needed to specify still the list-style-type argument for some weird compatibility issues [4]...

As an after thought, I will never look at Wiki sites the same way again.

[1] http://www.mediawiki.org/wiki/HTML_restriction
[2] http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/includes/Sanitizer.php?view=markup
[3] https://bugzilla.wikimedia.org/show_bug.cgi?id=13368
[4] http://www.w3schools.com/CSS/pr_list-style-image.asp