92-CSS notes

This page is for various CSS notes. When you get away from working on it for some time, you start to forget why you did various things. And it’s an annoyance and time waster to retrain oneself each time one gets back to the CSS

If any of these comments help someone else on wordpress or elsewhere, then good for that.

Note that these comments only matter to those masochists who have purchased the optional wordpress.com CSS upgrade. You can find info about that here.

First thing to remember is: WordPress doesn’t support comments in the CSS. Once you paste your CSS file into the Box, the comments are all stripped out! So therefore, you should keep a commented/annotated stylesheet around somewhere else if you have a real complicated one. The CSS editor strips all the comments out…probably for efficiency or some such reason. I guess that’s logical but it does make things difficult.

2013 03 09 Well, the above was true in 2010, but this has been majorly fixed. Also the CSS editor has some cool features like error and suggestion flagging.

Second: it doesn’t look like you can link in an external stylesheet. That’s a bummer too but again it seems logical.

Third: it is vital that you get a tool like the IE Developer Toolbar, or equivalent on other browsers, that allow you to see what HTML wordpress is generating for your pages, so you know what classes and IDs you need to use in your CSS. Do a search at microsoft.com to locate the free Developer Toolbar download. There’s something like it as a plug-in for Firefox too which I also use.

OK, now on to CSS rules themselves.

  • If two rules apply to the same text and seem to have the same priority, the later one will take precedence.

On the right hand side of each page is a long list of all the pages. This was convenient when this site didn’t have that many, but it’s beginning to get cumbersome. I think I can use some CSS tricks to limit the length of that list; maybe it will only have the main categories…which is currently the same as the list of boxes across the top of the page. I may need to think about some site design tweaks.

The color scheme, too, which at first I thought was pretty cool, might be a little offputting. Things to think about…

The most annoying thing was the cool inline menu near the top of the page with the rectangular buttons for the main categories. In the menu ul rule, there was a “margin” command that positioned this row of buttons. Unfortunately, setting the margin value for Internet Explorer 7 made it look bad in Firefox, Google Chrome, and for all I know, Safari and Opera. So I compromised knowing that IE7 was the most common browser.

Now IE8 comes out and it’s broken again. So I changed the margin command so the menu looks good in IE8, Chrome, and Firefox and I’m just going to have to apologize to the IE7 users. That’s the only thing I wish there was in CSS: a conditional tag that would allow you to specify alternate CSS for broken/aberrant browsers.

(Parenthetical comment 2010/01/31: I wanted some table cells to be center-aligned, but using the CSS text-align property it styles ALL the columns (including column 1, which I want to be LEFT justified. Anyway, I will figure it out eventually…)

Page#92 / last modified 20100131

Advertisements