Bulletproof - Localhost

Hi

I have been trying for hours to place a list image next to the left side menu items. I have modified the the ids in the "styles", "modules", and "layout" css files and even created some ids of my own but no list images or types appear. I once managed to get the menu items to shift right which suggested that the bullets were present but padding/margin settings prevented them from showing I gathered. However I failed to note which action I had taken to effect this - muppet! .

I have managed to get list images to show up for the top user modules such as "Latest News" and "Popular" (although in IE7 only half of the images are visible at the moment) but just can't seem to do so for the left modules. I will be extremely grateful for any help.

Working on an offline local server.

Cheers

[waseem]

Hi Flint,

Check out the file inital.css, this sets the padding and margin for all lists to zero and hides the bullets for all lists

What we need to do to add the bullets for the left column is override these rules (personally I'd add my new rule to basic_typography.css, but any of the css files will do as intial.css is the first css file loaded), like this:

Code: Select all

div#left ul {list-style:disc;}
div#left ul li {margin-left: 0.5em;}


**NOTE** salt to taste see http://www.echoecho.com/csslists.htm for an explanation on CSS bullets

The above works due to the CSS rule of specicifity (we're specifying that any lists that are contained within the element which has an id of "left" should use these rules instead of the non-specific rules for lists).

I hope this helps,

Waseem

Thanks Waz

I did try this but still got no joy. Based on the other issues I am having, I guess I will just start all over again. Its not that much of an issue because I am learning quite a lot (especially CSS) and besides its a test server anyway . Here is what I had so far, the green leaves a lot to be desired but I was just messing about at the time .



Anyway back to the drawing board I guess.

Thanks for all the help

Cheers

[waseem]

Hi Flint,

I've tested this out in Firefox3 but not in IE, so I'd test thoroughly before using.

In the file menus.css look for and comment out the following code:

Code: Select all

#left ul#mainlevel:after,
#left ul.menu:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
   #left ul#mainlevel li,
   #left ul.menu li {float: left; /*For IE 7 lack of compliance*/display: block !important; /*For GOOD browsers*/display: inline; /*For IE*/position: relative;}


(you might want to try removing it from this file altogether and putting it in ie7.css instead, if you do this remember to add #left ul.menu li {display: inline;position: relative;} to ie6.css)

You should then be able to change the list-style for the left menu.

Hope this helps,

Waseem

Hello,

Thank you very much for this well and clearly organised template.

I also have this question, and cannot find a way of getting complete grip on left menu styling. Horizontal menu I can style freely. But is seems all different trials for adding style-rules for list-style to vertical menu are overridden by some rules I cannot discover.
When commenting out de rules for ul, ol and li in initial.css, the li-elements react as expected, but adding the normal rules for list-style in menu.css or basic_typography.css or style.css gives no reaction.
Can you put me on the right track for styling this menu?
Thank you in advance.

Hi Waseem

...
I've tested this out in Firefox3 but not in IE, so I'd test thoroughly before using.

In the file menus.css look for and comment out the following code:

Code: Select all

#left ul#mainlevel:after,
#left ul.menu:after /*From IE 7 lack of compliance*/{clear: both;display: block;font: 1px/0px serif;content: ".";height: 0;visibility: hidden;}
   #left ul#mainlevel li,
   #left ul.menu li {float: left; /*For IE 7 lack of compliance*/display: block !important; /*For GOOD browsers*/display: inline; /*For IE*/position: relative;}


(you might want to try removing it from this file altogether and putting it in ie7.css instead, if you do this remember to add #left ul.menu li {display: inline;position: relative;} to ie6.css)

You should then be able to change the list-style for the left menu...

Indeed, that works - for Firefox, as you wrote. I discovered that only after discovering that commenting out the whole block didn't work. Only commenting out each of the two rules apart, or removing them to ie7.css gave succes.
But: not for IE 7! -
Now this browser still doesn't show list-style.
I would very much apreciate if you could find a fix for that.

IE 7 also has the following problem: when moving through a submenu in a left menu it disappears when going down the sub-list.
I hope very much for a solution, as I can only make this seldomly logically built template the basis for my projects when I can find a solution for this issue.

Greetings