Internet Business, Internet Marketing, Make Money Online, Work from Home

Internet Business and Marketing

pqInternet.com

About Fred W. Black.

Fred W. Black

Link to Me!

How to Link to this Blog.

Categories

All

ClickBank

Copywriting

Funny

Internet Business

Internet Marketing

Life & Law of Attraction

Search Engines: SEO

Technology

Traffic

Truth and Freedom

Web Site Design, HTML, CSS

Recent Entries

Playing Chicken with Google

Anorexic Mouse Bagged with Hair-Trigger Marketing Techniques!

Marketing Lesson from the Homeless...

When Good CSS Goes Bad

The Honest-to-God, Unvarnished Truth About Success

Are you Fishing with Bird Seed?

Why Do Smart People Sometimes Find Success So Difficult?

Using My Software to Determine Why a Site Ranks Poorly in Google

Toilet Paper Millionaire!

Freds Inverse Law of Marketing Intelligence (the cream, as well as, the crap rises to the top)

Are You Failing Miserably or Miserably Failing?

Know Yourself

Are You Putting Cash in the Trash?

Behind Bars: Could the New FTC CAN-SPAM Rules Land You In JAIL?

Who Cares?

All Entries

Recently Commented On

When Good CSS Goes Bad

Playing Chicken with Google

How to Improve Your Chances of Success by an Infinite Amount

Search Engine Ranking Factors

I've Removed The 'No Follow' Tag from My Blog - You Should Too!

Marketing Lesson from the Homeless...

Anorexic Mouse Bagged with Hair-Trigger Marketing Techniques!

Why Do Smart People Sometimes Find Success So Difficult?

Archives

All

Say No to the
No Follow Tag

Books & Things.


 


 


 


 

« Previous | Home | Next »

 

When Good CSS Goes Bad

August 12, 2008

When Good CSS Goes BadIt 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!

About the Author

Fred Black is an experienced programmer, web site developer, online business operator, systems integrator, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.


Insert 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 subscribe. Please check your spam folder(s) if you don't receive the email.



Reddit Add this Article to Onlywire del.icio.us Technorati StumbleUpon Netscape Sphinn Top Blogs

Tip Jar: Leave a Donation

Comments: 10,   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:


You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.

 

 
Comments and TrackBacks 
  Comments:
  1.  

    Well, that was the funniest CSS lesson I've ever gotten. :-) Strange about the order issue.

    Posted by Lulu Barbarian on August 12, 2008 3:12 PM

  2.  

    Hah! I haven't seen Magnum PI in forever, but I love the way you tied the story in with CSS. Classy dame in this part of town eh?

    Posted by Sid Savara - Personal Development on August 14, 2008 6:18 PM

  3.  

    I posted a link to this in my Sunday Blog Carnival at: International Marketer Review Blog Carnival #13.

    Stop by to vote on your post as the weekly best article.

    Posted by Cindy King on August 16, 2008 4:36 AM

  4.  

    Great post. Nice to read techy stuff with more than a little humour thrown in - nice work!

    Posted by Steve Simpson - Van Leasing on August 16, 2008 8:47 AM

  5.  

    OUGH!
    CSS its cool, i am a new in CSS )

    Posted by Vas on August 19, 2008 6:38 PM

  6.  

    rarely do i see blog sites that go out of their way just to make a point interesting to read... kudos for making the effort to make your posts such a fun experience... i will definitely be back for more stories! kudos!

    Posted by Kirk on August 27, 2008 5:45 PM

  7.  

    Yup....CSS is cool. A must for everyone who wants to know about web design. Thanks

    Posted by anizot on August 28, 2008 2:48 AM

  8.  

    Very usefull information. Thanks for sharing!

    Posted by Mr. Right on August 30, 2008 2:15 AM

  9.  

    Great post. Nice to read techy stuff with more than a little humour thrown in - nice work!

    Posted by Yvonne on September 10, 2008 1:03 AM

  10.  

    Great post. Nice to read. I haven't seen Magnum PI in forever, but I love the way you tied the story in with CSS.

    Posted by Crick on September 17, 2008 5:10 AM

 


Post A Comment









Remember personal info?






Subscribe

Insert your name and e-mail to receive a short notice each time I make a new post.

E-mail Address:

E-mail address again:

First Name:

Last Name:

NOTE: You will receive a confirmation email. You must click the link in the email to subscribe. Please check your spam folder(s) if you don't receive the email.

My Courses & Products

Web Site Creation Course: HTML, CSS, and More... Free!
 

Interactive Web Site Course: PHP, JavaScript, Forms, and More... Free!
 

Make Money Online: Complete Online Business Course... Free!
 

Article Marketing Software.
 

Photo Gallery - pqGallery.com
 

Blue Solar Water Bottles
 

Pretend with Miss Kim.
Children's Creative Movement DVD
Pretend with Miss Kim (my wife) takes children on an imaginary fun time as they learn the basic movements of ballet and dance.

Search


RSS Feeds, etc.

Subscribe to Blog Feed:

RSS Feed
RSS 2.0 Feed for www.pqInternet.com. RSS 2.0 Feed
RSS 1.0 Feed
Add to Google Toolbar

Add www.pqInternet.com, to Google.
Add www.pqInternet.com, to My Yahoo!
Add www.pqInternet.com, to My MSN.
Add www.pqInternet.com, to My AOL.
Subscribe to www.pqInternet.com, with Bloglines
Subscribe to www.pqInternet.com, in NewsGator Online
Subscribe to www.pqInternet.com, in Rojo
Subscribe to www.pqInternet.com, in FeedLounge
Subscribe to www.pqInternet.com, in NetVibes
Add www.pqInternet.com, to Your Technorati Favorites!
Subscribe to www.pqInternet.com in myEarthlink
Add www.pqInternet.com, to Windows Live

What are Blog Feeds and RSS anyway?

Products I Use & Recommend.

www.3WayLinks.Net

Wordtracker Keyword Research Tool

www.aweber.com Opt-In List Management.

1&1 Hosting

Blogroll

Clayton Makepeace

Terry Dean

ProBlogger

Eric Graham

Michel Fortin

Jonathan Leger

Robert Phillips

Dr. Joe Vitale

Ryan Healy

Richard Lee

G. Brent Riggs

Search Engine Journal

Links

Cell Phones for Soldiers

the IconFactory

Fred Black Music

Niall Kennedy

Daryl Laws Sports Performance Blog

Web Hosting.

My Recommended Web Hosting Service: 1&1 Hosting

Mugs, Mousepads, etc.

About this Blog

By:Fred W. Black

Contact Information

Powered by:Movable Type 3.34.

Copyright 2006 -2008, PhaseQuest.Com.
All rights reserved.

Resources L2

Some photos are by: Lee Hinshaw Photography

© Copyright 2006 - 2008 PhaseQuest, all rights reserved.

 

Fred Black pqInternet E-Mail Signup

Insert 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 subscribe. Please check your spam folder(s) if you don't receive the email.

*I value your privacy and will never sell, rent, giveaway, or abuse your information.