Bullet styling in my content area

  • Resolved Bare

    (@bare)


    14 years ago

    Hi, I’m in the process of setting up a CMS type site. I have most of the setup established and I’m continuing to work out the small bugs. One of those bugs is the fact that none of my list “bullets” (they’re arrows in my default theme) appear in any IE below 8. To be honest, because of my setup I can almost live with that in the sidebar, but I would really like to ensure that the styling that establishes these arrows:

    .entry ul li:before, #sidebar ul ul li:before {
	content: "0BB 020";	}

    doesn’t appear in all my other content.

    Can I edit that line of CSS to make sure it ONLY affects my sidebar lists? Or conversely, can I add another CSS class to configure my list style for all my other lists?

    Like I said, I don’t mind the appearance in the sidebar, but I would like my lists in my content pages, post, etc to have “normal” bullets AND for the line height to be smaller than it seems to be now. You can see, I have a list on this page:

    http://tech.bareasschoppers.com/power-commander-pc3-maps/

    If you look at the list there is a lot of vertical space between the list items – and if you look at it in IE (before 8) then you don’t even see bullets.

    Thanks so much for any help, I’m literally working on this thing day and night trying to learn and for all I’m getting done I still continue to run into snags that Google and this site search cannot help me with.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Bare

    (@bare)

    14 years ago

    I think I may have solved this, but I would still appreciate someone who knows checking my code…

    I changed the CSS to this:

    html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style-image: url('images/bullet.png');
	padding-left: 15px;
	text-indent: -2px;}
html>body .entry li {
	margin: 0 0 0 10px;}
.entry ul li:before {
}
#sidebar ul ul li:before {
	content: "0BB 020";}

    By breaking the .entry ul li:before class out from the #sidebar class that called the double arrows I found the arrows in my content went away. I then made a quick bullet image in photoshop and tacked on the list-style-image call to my html>body .entry ul class.

    It seems to work, I also tweaked some padding/margin #’s to make it look how I liked. Can anyone think of a situation the site will call for that this will not work in? As much as I think I understand about CSS now, I have no idea what the html>body class is or the .entry for that matter. Are these just other generic class names or are they elements I’ve never heard of?

    Also, can I get rid of the .entry ul li:before class altogether? And what does the “:before” mean? I know what #sidebar is, I know what ul and li are – but I’ve never seen anything in CSS with a colon and a modifier behind it.

    Thanks again to anyone who chimes in.

    Mark / t31os

    (@t31os_)

    14 years ago

    :before is a CSS2 defintion, only CSS2 capable browsers will even pay attention to such defintions.
    http://www.quirksmode.org/css/beforeafter.html

    html > body will only be interpreted by browsers that support the parent > child selector, so you’ll not find support in the older IE browsers that’s one thing i can be sure of.

    You could drop the html > body part anyway, and just use body .entry ul and you’ll not have to worry about some browsers reading it and others not. (it’s rare anything but body will come directly after the HTML tag anyway, so for all intents and purposes that part might just as well might be html body).

    Some general info on selectors:
    http://www.w3.org/TR/CSS/selector.html#pattern-matching
    NOTE: Although CSS1 does have various selectors (including parent > child), however you should refer to the compat chart below to see what’s supported in the various browsers (IE specifically).

    Compatibility chart for the web browsers.
    http://www.quirksmode.org/compatibility.html (scroll down a little)

    Thread Starter Bare

    (@bare)

    14 years ago

    Thanks very much for the links. I was fortunate enough that I think I figured out some of my issues here through trial and error. I apologize because some of this was admittedly more rudimentary than I initially thought when I posted, but you provided me with some excellent links to learn from.

    Thanks for taking the time.

    Mark / t31os

    (@t31os_)

    14 years ago

    You’re welcome.. 🙂

    The selector stuff i’ve always found fun, and i utilise them quite alot in my stylish code(firefox extension for re-skinning websites).

    I’ll welcome the day CSS2 or even CSS3 becomes the norm for every day web browsers. Right now i tend to avoid advising users to use CSS2 selectors, and CSS1 selectors like parent > child as there’s still a great deal of users targetting IE users, for me i get to use them all the time though(stylish makes a great ad blocking tool when adblock isn’t quite cutting it, or blocking more than it should – with the use of some creative selectors).

    jQuery also uses selectors much like CSS does to(though in perhaps a different manner), so if you ever reach a point where you really know your selectors you’ll find jQuery(if that ever interests you), that little bit easier.

    In short, i’m a “selectors” fan… 🙂

    Thread Starter Bare

    (@bare)

    14 years ago

    I have to admit I’m also learning to like selectors as I get to know them better. I have had a lot of problems with them until the last couple of weeks when I’ve been reading and learning as much as I can about them. The link you provided above was actually the best I’ve seen for really breaking them down and explaining them. Part of my problem with finding information relating to my problems is that I still don’t even know all the proper terminology for things. I feel pretty “noobish”, lol…

    Seriously though, I’m pretty OCD about organizing things, so the more I understand selectors and the proper implementation of them, the easier it becomes for me to navigate my CSS and the more organized my code becomes.

    I hate to say it, but I think I’m going to need to learn almost as much as a real developer to sort out some of my problems. I don’t mean that in a derogatory way towards developers, I just know that it’s going to be a lot of time and effort.

    Thanks again!

    Mark / t31os

    (@t31os_)

    14 years ago

    I hate to say it, but I think I’m going to need to learn almost as much as a real developer to sort out some of my problems. I don’t mean that in a derogatory way towards developers, I just know that it’s going to be a lot of time and effort.

    I don’t know about that, you’ll eventually reach a point where you’ll be able to hunt down the information you need and apply it, and for everything else, i imagine like me you’ll ask someone who knows more when you get stuck .. 😉

    Thread Starter Bare

    (@bare)

    14 years ago

    I sure hope so, hehe… =)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Bullet styling in my content area’ is closed to new replies.