Just finished the new style. It’s the 4th version in the Cubulous style series. Took longer to think about the CSS than actually write it.
You’ll notice the colored line beneath the menu buttons changes per site section (all glory to the 0xTC templating engine that makes this possible with very little effors). The same technique is used to give each page its own link colors.
A number of weeks ago, I noticed that w3C.org had changed their CSS validator to be a tad more picky than usual. Some would see an advantage in this. I do not.
Example:
validating the XHTML+CSS2/3 of a page on
this site
You’ll noticed that it’s giving me an error over my usage of “overflow-x”, a CSS3 property. I don’t care. I need that property and it works in most browsers (even Safari as far as I can remember).
The rest are all warnings…145 of them.
They seem to be reminding me that I’m not setting a “background-color” when using “color” properties and vice versa. Why should they care? It’s my layout.
There are also a number of “Redefinition” warnings. These seem to redefinitions of target element using more than one method; eg. “#menu ul li” and “.item1″, where “.item1″ is the classname an
tag. Why is this a reason for a warning? I don’t know. I thought it was a pretty common practice to define global CSS properties for your elements (p, a, li, ul, etc..) and give more change those properties when needed for specific roles.
“Same colors for color and background-color in two contexts”
“You have no background-color with your color”
“You have no color with your background-color”
“Same colors for color and background-color in two contexts”
“Same colors for background-color and border-top-color”
It’s so silly to me.
I hate having to change my code just for IE.
The link to the active section in the main menu used to be highlighted using id=”currentmenulink”. Pretty standard stuff. It works fine….until you try to give each “current page link” unique class attributes and use CSS to give them unique backgrounds or images, like so:
a.UniqueLinkClassName1#currentmenulink {…}
a.UniqueLinkClassName2#currentmenulink {…}
a.UniqueLinkClassName3#currentmenulink {…}
…
or so:
a#currentmenulink.UniqueLinkClassName1 {…}
a#currentmenulink.UniqueLinkClassName2 {…}
a#currentmenulink.UniqueLinkClassName3 {…}
…
Both of those methods work fine Firefox and Mozilla, but IE will only recognize and parse the FIRST entry from the CSS file/section and will just ignore the rest. I actually had to change the order they were written to notice this.
I can’t believe I had to change something AGAIN just for IE.
The menu generator now adds a unique number to the tag’s ID just so the CSS is backwards compatible for IE….yes..”backwards compatible”…because that’s exactly what Microsoft Internet Explorer is: Backwards!!!
#menu #mainmenuitems ul li a#currentmenulink1 {…}
#menu #mainmenuitems ul li a#currentmenulink2 {…}
#menu #mainmenuitems ul li a#currentmenulink3 {…}
…
I wrote a little PHP script that generates text in different fonts and font variations.
It’ll come in handy next time i’m making a new CSS and I need to compare fonts.
Give it a try.
/tools/fontpreviewer.php (v1)
PS: “AJaX” powered version with more features coming later.
You are currently browsing the When minds collide weblog archives for 'css' tag.
Longer entries are truncated. Click the headline of an entry to read it in its entirety.
