Expand/Collapse and Bullets

[doreymedia]

Hi Michael, The collapse seems to be working ok for me here but wont expand afterwards. Also no matter what I set the list item to nothing changes. Is this a CSS or mootools issue?

http://tandm.co.uk/documentation

[Michael Gilkes]

@doreymedia. Thanks for posting. Ok. I went to your site and I did see the two issues you are referring to. Here’s what I think:

Collapse. but not expand: This is most likely a javascript conflict issue. When I check the browser’s console, I see three javascript errors. I am using Safari, but it doesn’t matter which browser you use, you should see the same errors. Javascript errors are a bit of a pain in the sense that when there is one error is affects the execution of other scripts. First thing you should do is try to fix those javascript errors. the second thing I notice is that you have jquery loaded twice as jquery.js and jquery.min.js. This is very strange. You only need jquery.min.js to be loaded. It is never good to have jquery loaded more than once on the same page.

List item style type: You said that no matter what you do you can’t get the list item bullet to change. Well, the reason for that is that you need to understand what is happening in order to change it. If you right-click on any list element and select “Inspect Element”, you will be able to look at the underlying CSS and how various CSS declarations override others. In your base.css file, on line 228, there is code that looks like:

<br /> .content li {list-style-type: disc;<br /> margin: 0 0 0 20px;}

1 2 3

<br /> .content li {list-style-type: disc;<br /> margin: 0 0 0 20px;}

This is overriding the bullet and placing a disc there. There are several ways you can *fix* it. I will only suggest one way, which would be least obtrusive in my opinion. Go into the styles.css file located in media/easyfolderlistingpro/css and add the following:

<br /> .eflpro_lists li<br /> {<br /> list-style-type: none !important;<br /> }

1 2 3 4 5

<br /> .eflpro_lists li<br /> {<br /> list-style-type: none !important;<br /> }

This should work (although I haven’t tested it.). When you are a webmaster, it is important to learn and understand the browser console, it will save you a lot of stress. Hope this helps.

[Author]

Posts