li element strange problem

[markclaus]

Hi,

I have li element trying to call a custom graphic which i am calling with the element class:
.mod_article li,
.ce_accordion li {
line-height:1.5em;
list-style-image:url("files/images/black_long.png");
}


but its not showing anything. Infact, even if i disable this I am not getting any default bullet points on the li elements.

What would be causing this, as I am at a loss as to why.

I am working locally, and have looked at the live site, adjusted the class element on the live version (i.e. i disabled the custom image reference, which resulted in the default bullet points showing)

[ciaobello]

Might be a list-style:none somwhere ?

http://www.w3schools.com/cssref/pr_list-style.asp

It could also be that you still have something in the cache ... so switch cache off if you develop.
Also do maintenance > purge data

[markclaus]

what should list-style: be set to then?

the - or none?

no caching, already purged the files.

Look, i can't show you the site im working on, but essentially its the same as:

http://www.clausmark.com/index.php/overview.html

Heres a screenshot showing the same on the localhost site, i don't know if that helps
Screen Shot 2014-06-24 at 15.13.45.png

[ciaobello]

please read a bit first ... http://www.w3schools.com/cssref/pr_list-style-type.asp

On the right side (w3schools.com) you have several list-style properties ...check out!

For further help we need a link to see your sour-code ... so we can check with firebug or similar.

[ciaobello]

Now you have "list-style: none" active too. Set this inactive or remove it if you like to see the black bullet (disc).

Probably path to image is wrong. So it could also be that you not see the bullet.

[markclaus]

aha, i figured it out.

Nothing to do with the CSS in the end.

Would you like to know what caused this????

[markclaus]

I had CSS reset checked. :/

[ciaobello]

I had CSS reset checked. :/

This is a CSS Script who resets several Browsers that they do have quite similare Base.
So in this case it has to do with CSS. Just find in /assets/css and look about ' list-style '

[markclaus]

This is a CSS Script who resets several Browsers that they do have quite similare Base.
So in this case it has to do with CSS. Just find in /assets/css and look about ' list-style '

I meant it had nothing to do with the CSS i had in place. I was looking for a mistake in my CSS, but there wasn't any. This is what was frustrating me. Im being told to post a live site so that someone can debug it, i debugged it myself and couldn't see any issues, which was what was confusing me. The issue lay in the CSS reset being checked, i wasn't intending to reset the CSS, i don't see any good reason to do so, but I'd checked it by mistake when i had initially installed version 3.2 and was looking around. Maybe i should take a look at CSS reset all the same, just to see if i would ever like it, but personally, i don't see the point in it, although i'd be willing to take another look at it.

Now your saying, "Just find in /assest/css and look about 'list-style'. I have around 100 CSS items in this folder, and most of them (apart from Basic, Element, Navigation xBasic, etc), have 'list-style' elements.

[ciaobello]

Nothing to do with the CSS in the end.

This statement ist wrong. Reset.css is a css and has to do with css. Discussion endet from my side

Please be aware that you are in a Forum for a Content Management System. To use it you need Basic skills in css/html and a bit of php. If you need more information about the basics there are a lot of free pages on the Web. Here a example:

http://www.w3schools.com/

[Andreas]

and if you are knew to CSS better don't check any contao core css file or don't include an external css file as you then can not debug it in FE. Include all your css files with field "additional head tags"

<link rel="stylesheet" href="files/tinymce.css">
<link rel="stylesheet" href="files/css/basic.css">
<link rel="stylesheet" href="files/css/custom.css">
...

So you can see each file with your dev tool f.e. firebug in the browser.

[markclaus]

This statement ist wrong. Reset.css is a css and has to do with css. Discussion endet from my side

Please be aware that you are in a Forum for a Content Management System. To use it you need Basic skills in css/html and a bit of php. If you need more information about the basics there are a lot of free pages on the Web. Here a example:

http://www.w3schools.com/

i understand that CSS Reset is CSS, but what i was trying to say was that it had nothing to do with the CSS that i had implemented. The difference is subtle i know but further to this, as i was looking for mistakes in my CSS, and could not see any, I could not understand why my CSS was not working, therefore the issue had nothing to do with my CSS, which is perhaps what i should have written.

ciobella, with all due respect, I am aware i am in a CMS forum, I started building websites in 98 and continued through to 2004, from html to full flash websites, some of which won a few awards. 10 years out of designing websites and a lot has changed, including the implementation of php (was all javascript very basic CSS and RAW HTML last time i looked). Anyway, I don't want to bang on about this. As i have already stated, I understand CSS Reset is CSS, but i thought the error lay in the CSS i had written.
Of course i appreciate your time in answering any questions i may have and i hope with the help of people here i can get back up to speed with web design.
The whole issue of CSS Reset is interesting though, and is something i need to look at, including other possible frameworks such as normalise.css

[markclaus]

and if you are knew to CSS better don't check any contao core css file or don't include an external css file as you then can not debug it in FE. Include all your css files with field "additional head tags"

<link rel="stylesheet" href="files/tinymce.css">
<link rel="stylesheet" href="files/css/basic.css">
<link rel="stylesheet" href="files/css/custom.css">
...

So you can see each file with your dev tool f.e. firebug in the browser.

Thanks for the headsup Andreas.

[Andreas]

What ciaobello told you is, that if you debug your css with f.e. firebug, there is no chance to not see all CSS that arrived at the browser and is responsible for rendering the page.

normalize.css is not a real css reset it just tries to fix some problems.

Personaly I don't like the Contao css reset as there are things like

body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea {
	margin:0;
	padding:0;
}

which can be done by

* {
  margin: 0;
  padding: 0;
}

Or

ul {
	list-style-type:none;
}

while it is not comfortable to have no list points on list. They're only unwanted in navigations, where you can remove them.
Or

font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;

where I prefer

font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
font-size: 1rem;
line-height: 1;

And there is no space behind a colon in contao css files.
I also don't like css resets where every element has

*:before {
  blabla...
}

And I don't like javascript modernizer which puts 43 modernizer classes in the BODY-Tag.

This all makes debugging css more difficult.

Take a look at different css frameworks like YAML, Bootstrap, Foundation and others to learn from their reset (maybe they are not better than contaos reset but you can compare their approach).

Train your css debugging skills.