Issue with Bullets on jQuery Multi Level CSS Menu #2

**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:

Code:

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

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!

**azoomer** · 07-16-2010, 10:47 AM

Hi megapotato, usually this css
li {list-style:none; }
will remove the bullets, but I can't tell you exactly where to put it without seeing your site.

**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.

Code:

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

Code:

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

Code:

.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.

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.

Code:

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

Code:

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

Code:

<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!

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.

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!!

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

Code:

.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/medi...hp?view=markup
[3] https://bugzilla.wikimedia.org/show_bug.cgi?id=13368
[4] http://www.w3schools.com/CSS/pr_list-style-image.asp

**megapatato** · 07-18-2010, 08:14 AM

Oh, and here's the webpage if you want to look at it.

http://2010.igem.org/Team:UNAM-Genomics_Mexico

Thread: Issue with Bullets on jQuery Multi Level CSS Menu #2

Thread Tools

Search Thread

Issue with Bullets on jQuery Multi Level CSS Menu #2

The Following User Says Thank You to azoomer For This Useful Post:

Solved

Bookmarks

Bookmarks

Posting Permissions