When Good CSS Goes Bad

It was a dark night, very dark. It had been raining and was steamy hot and muggy. Veronica was a little nervous walking through this part of town alone and at such a late hour. She clutched her purse close and tried not to make eye contact with anyone. She could hear footsteps behind her that seemed to keep getting closer and closer, almost matching her steps, as if they were trying to avoid being noticed. She kept wishing she had remembered her cell phone this morning. As she approached a narrow alley she had an uneasy feeling, she slowed down a little but didn't want to stop because of whoever or whatever was behind her. So she kept walking. Just as she got to the alley, someone stepped out in front of her and she felt a hand on her shoulder from behind. Luckily she had some pepper spray and unloaded it on the two culprits: CSS and HTML.

That's where I come in. I'm a P.I., a Private Investigator. I find the answers people think they want, but usually after they get them, they wished they'd never asked. It's a dirty business, but someone's gotta do it. Veronica hired me to find out why she kept having trouble with CSS and why CSS that had helped her so much in the past had now turned bad and was cheating on her.

When she first appeared in my office, I ask her: "What's a classy dame like you doing in this part of town?". She confessed that although she was created with classes, they just didn't seem to work anymore. It even got to my jaded, calloused heart when the tears welled up in her big baby blues as she admitted that even though she still had some style, she had lost her class...

So, like the sucker that I am, I took the case... and here's what I discovered.

First let me give you some background information.
CSS = Cascading Style Sheets
HTML = Hyper Text Markup Language

Both are used together to create web pages. CSS is not required but is used to define how something on the page looks. HTML is the source code behind a web page. For example, if you use your browser's menus to view the source that makes up this web page, you'll see a lot of HTML code. CSS allows you to remove as much of the styling of a page into a separate file vs. having it mixed in with all the parts of the page. This has a lot of advantages and I have a previous post that talks about that: Learning CSS Makes for Better Web Sites. With CSS you can define default styles, or how something looks, to paragraphs, images, headlines, etc. This includes font sizes, colors, and the actual font definition itself.

So where does class come into play? A class is a named set of styles that you can apply to page elements. For example, you may define a class in your CSS that's named checkout and you could apply it to a part, or all, of the checkout page.

You can learn more about HTML and CSS with my free course: Web Site Design Course: HTML, CSS.

The other thing about CSS is that it is cascading, hence the name, cascading style sheets. Cascading means that, for example, if you apply a paragraph definition at the page level and then deeper in the page you apply a different paragraph style to a page element, that page element will be rendered with the formatting of new style and all the formatting of the page-level style that's not defined by the new style. In other words, the page-level style could define the margins, font-size, color of text, and background color, and if the new style only changed the font size, then the new paragraph would be rendered with the same color as the main part of the page but with a different text size.

Another part of cascading, where a lot of people get hung up, is that you can define the same style multiple times in your CSS definitions, but the last one is the one that counts. And it's easy to overlook that fact and edit something over and over wondering why it's not working, when several lines down in your code you have the same style, and it includes the same element(s) you're trying to alter.

Well, that's how it's supposed to work. Now let's get back to my case....

It turns out that Veronica has some pretty complicated pages. A dame that looks like that is always complicated! Her pages have DIVs and Tables nested one inside another. Now that shouldn't be a problem if it's laid out correctly. But she could only go so deep before the style classes would stop working. The problem usually happened on the 5th level deep. Parts of the class would apply, for example font color, but other parts would default to the parent element's style, for example font-size. This occurred in all the browsers I tested it in too: Internet Explorer 6 and 7, Firefox, and Opera.

I fixed several small problems that I just knew would fix the larger problem, but it made no difference. Nothing I could do fixed it. I hate to admit it, but this went on for days. I made all the normal rounds looking for answers, even going a few places I don't like to go these days, but no one knew anything. Nothing.

Then it hit me. Maybe CSS classes, even though they have names, don't really work by name 100%. So I rearranged the CSS file and put the classes in order of hierarchy as they appeared in the HTML file. Bam! It worked! Problem solved!

So Veronica left a happy, satisfied woman.

I'm still scratching my head wondering why order made a difference and why the problem only happened past a certain level. But that's how it is. Sometimes you solve the case but end up with more questions than you started out with!

Until next time,
Fred

P.S. Ok, so I made most of this up... CSS is pretty boring by itself, I thought it needed some help! The problem and solution are real. I recall the T.V. show Magnum, P.I. where Thomas was trying to pick the lock on the Ferrari after Higgins had taken his keys. He kept repeating to himself "pick the lock, don't look at the dogs, pick the lock, don't look at the dogs... woops, I looked at the dogs!". There's a lesson there!

Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post. First Name: Last Name: E-Mail Address: E-Mail again: NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

Tip Jar: Leave a Donation

Comments: 15,   TrackBacks: 0.

Posted by Fred on August 12, 2008 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/155

Assigned Categories: Web Site Design, HTML, CSS

Related Entries:

• Learn Basic HTML Skills.
• Texting Social Media Updates - Useful vs. Useless
• Can a Single Static Web Page Rank High in Google?
• 10 On-Page SEO Ranking Factors
• Bypassing Cross Browser Scripting Security
• Don't give a Hoot about Google Page Rank.
• Understanding Include Files