Hi Devon,

I am having 2 small problems with my Zorn theme (probably caused by myself). I guess it has got something to do with the css.

Screenshot 1:
I am basically unable to display any list (html) correctly in DF. As you can see from the screenshot, the list-icons simply won't show and the items do not indent at all. I bet this is something I have caused myself. However I am unable to find the part in the CSS (if this is where i have to look at all...) which influences this behaviour. Could you just point me to the line(s) that need to be altered to fix this? Or the ones that "usually" do this?

Screenshot 2:
With lookup lists the right-padding(?) doesn't seem to work anymore causing the options to not get sufficient space in the drop down list. Basically same problem like above.

Any help would be highly appreciated. Note: I am not tryingto ask you to clean up my mess... just need some small pointing to the direction I have to take

Cheers in advance!

I'm not sure how dw works or the code it inserts for the list. As I'm sure you realize I do not work within an automated program to create code. So how those programs might affect the interaction with DF code I can't say. HTML lists are always ul and li. If your bullets are being removed then it could be because the css is doing it. Look in css for .ul or .li. Hmm now that I think about it this might be yet another drawback to using the horizontal css menu. Since the menu uses lists to display it's data however you style the menu will probably affect the rest of the lists for the site. Not good. Look in mainmenu.css and tabletree.css as well. If that's indeed the case the only remedy will be to remove the horizontal css menu. I do remember changing up a lot about how the horizontal menu appeared for your theme. Perhaps I went too far in customizing the appearance without taking into account how it would affect the rest of the site. I'll still blame that on poor implementation of the menu by the developers though. Just seems to be one thing after another with that menu system.

Very hard tracking that one down. Trying the very same html code in e.g. the Hardwired theme (same DF version) produces perfect results.


I have removed the horizontal css menu altogether. Even got rid of the cpgmm.css from the styles folder. still no change.

The style.css doesn't have any .ul or .li code in it.

UPDATE: Tracked down the trouble-maker after trying out the files one-by one. It seems to be switch.css. As soon as I disable it, the lists show up perfectly.

The other problem with the narrow lookup-lists (screenshot 2 in first post) goes away as well.

Now I have no idea on how I can alter this file to produce normal list results again without breaking its actualy function of switching. Do you have any suggestion Devon?

I'm guessing the ul and li styles are specifically for the styleswitch code. I'm going to have to recode the styleswitch code now to not use divs and spans. Use tables instead. Right now it's using a div and span with a linear list. That's what's killing it. Ugh.

If you think there is a relatively easy solution to this please let me know Devon.

If not then I guess I will need to drop the style switch part since the more articles I add the more I see that lists are needed.

I think this should solve it but let me know either way please.

Completely remove all of the following from switch.css

a {
color: #095eae;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul.list, ol.list {
margin-left: 3em;
margin-bottom: 1em;
}
.list li {
margin-bottom: .5em;
color: #1b1b1b;
}
ul.list li {
list-style-type: disc;
}
ol.list li {
list-style-type: decimal;
}

Cross your fingers...

Thanks for the quick reply Devon.

I have tried what you said but without any luck. No visible effect. Tried deleting a couple more lines... still nothing.

Only when I start modifying this line

things start moving. But the downside is that the switch icons are affected by this too and soon break the appearance of the theme

Try deleting the above and then change the li to #options li. That should specify the li as being within in the #options id div and not mess with the general site lists. Your running a custom version of the theme I created for you. It works on this site...

Thanks for the support Devon.

I have applied the changes you have suggested and made sure I used the original files that you have provided. Getting very close now. Only the indent does not work. I am not sure I am using the right word. Therefore I have attached an image (right shows what it should look like. Not the actual layout, just the "indent").

If I can sort this one out I promise I won't bother you again in the very near future !



Except for the list bullets it does look the same with the original theme files.

try removing the * {
margin: 0;
padding: 0;
}

* means wildcard for everything i believe. so if it's assigning a margin of 0 to everything that might override the list style.

also try removing
/* article and comment body */
.body ul, .article .body ol {
margin-left: 3em;
margin-bottom: 1em;
}
.body li {
margin-bottom: .5em;
color: #1b1b1b;
}
.body ul li {
list-style-type: disc;
}
.body ol li {
list-style-type: decimal;
}

as it's attached to the main body class and not the #options ul li stuff.

Almost there

The above part did the trick for the correct display of lists. Only one single and last problem: the above css also controlled the height of the switch buttons it seems. Now, without the placeholder the size height increased a lot . In fact so much that it breaks the table it is located in.

Noob as I am I thought I keep the margin and padding part of the code and just replace the placeholder with the class of the switch panels to limit the effect on "fixed" and"fluid" parts.

"Surprisingly" ( ) it did not work out. tried ".fixed" "fixed" "*.fixed" "*fixed" and all the variations i could find in the code (classes and ID).
Before i start ruining everything I thought it would be best to come here and ask whether this is possible at all the way I am trying to do it (limit the buttons' height to the same size it used to be with the initial code).

I know am I keeping you really busy. Sorry about this DJ. It is only this small (but visible) detail that is left...

You're going about that in the wrong way. Right idea, wrong way. You want to remove the * from the equation because it's not just affecting the lists but everything on the site period. Keep the * class removed and don't put it back. I'm sorry I didn't catch that when I made the theme. It shouldn't be in there in the first place.

What you should do is take the margin and padding and add it to the classes below one at a time. When it looks like it should then you've found the class it belongs in. It might belong to multiple classes too so you've got a lot of trial and error ahead of you. My guess is that it will be the first one for #options so start there and work your way down.


#options {
right: 0;
top: 0;
}
#options ul {
float: left;
display: inline;
margin-left: 10px;
}
#options li {
float: left;
margin: 1px;
padding: 2px;
}
#options li a {
display: block;
width: 10px;
height: 10px;
border: solid 1px #9a9a9a;
background-color: #1c1c1c;
background-repeat: no-repeat;
}
#options li a span {
display: none;
}

Why does everyone think they are bothering me when they ask for help? That's what I'm here for.