Multiple CSS classes on a single element

Oct 19, 2006  -  Comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

.specific_style {
  margin: 5px 10px;
  padding: 2px;

.center_text { text-align: center; }

.dark_gray { color: #666; }

And then you can add multiple classes to any element by separating them with a space, like so:

<p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: cssxhtml

Lost Theory

Oct 12, 2006  -  Comments

This theory is re-posted from my company blog (HINT: check out our website homepage on Wednesdays).

There are a million hypotheses out on message boards and fan sites trying to guess the overarching story behind Lost. They range from theories about the castaways having gone back in time to theories about them being part of a grand science experiment. Based on information that came to light this summer during the off-season, I've developed my own theory about what's going on in the Lost universe.

The numbers (4 8 15 16 23 42) have always been a hot topic among Lost aficionados. It was revealed over the summer that these numbers are, in fact, a complex equation developed by an Italian mathematician named Valenzetti. It determines the amount of time before humanity exterminates itself, either by warfare, nuclear holocaust, or pandemic disease. My theory centers around this equation.

I think that the DHARMA initiative (or whatever is left of it) came into possession the information that the person (or persons) responsible for the destruction of the human race would be on Oceanic flight 815. They somehow (I told you this was a theory) caused the flight to pass over their island, made it crash, and they are going through the remaining passengers one by one to determine who the person is.

Things that support my theory:

  1. In episode 1 of season 3, the DHARMA people didn't seem surprised at all to see a plane crash into their island. It appeared like they were expecting it. Ben (Henry Gale) sent Ethan and Goodwin out to pose as survivors and to bring back lists of the remaining passengers.
  2. Walt, who had been in their custody for several weeks, was simply released at the end of season 2. I think they determined that he wasn't responsible, so they let him go.
  3. The psychic told Claire that her child would be responsible for something terrible if he was raised by anyone other than her.
  4. Ben (Henry Gale) told Kate in episode 1 of season 3 that the next few weeks would be very uncomfortable. (interrogation?)
  5. Jack seems to be getting psychoanalyzed/interrogated by Juliette.

Tagged: lost

IE double margin float bug

Sep 15, 2006  -  Comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
  display: inline;

You can find this hack and many more at this great CSS resource Web site.

Tagged: ie sucksxhtmlcss

eBay scam attempt

Aug 28, 2006  -  Comments

I got a free iPod Nano when I purchased my MacBook thanks to a back-to-school promotion by Apple. So, to recoup some of the cost of the MacBook, I put the Nano on eBay. The starting price was $149.99 with a "Buy it Now" price of $175. About two hours before the auction ended (no bids had been made) someone hit the "Buy it Now" button. I got the following cryptic email from them about an hour later:

Good Morning to you,how is business,family and all other things, hope all are in good condition. well I'm Bonner Goldbach from CA(Sebastopol),but Presently i'm leading a trade fair program in Austrialia.I saw your item above at ebay(150022885893)and i will like to buy it for my grandson that study in a Computer science school in University of Lagos at Nigeria Next week as a gift,i will like to informed you first of all that i will be handling the shipment on my own risk over to Nigeria.Do not worry about the shipping of the item,i have an account with FEDEX and will be sending you my FEDEX account number for the shipment, and if you decedided in sending the item to so that you can add the shipping cost to the cost of the product you can still do it and you will have to calculate the cost over to Ikeja,Lagos state,23401 Nigeria.Moreover i would have prefer to send you a cheque but due to the fact that i want you to ship the item first thing monday morning,i will be sending you the payment vai PAYPAL,and so make sure you get the package ready for monday shipment ok And kindly send me your paypal email address,so i can direct the payment to your account right away.
Best Regards
Bonner Goldbach.

I immediately sent a reply giving him my PayPal email address and telling him that I didn't quite understand his email, but that I could only ship the iPod within the United States by USPS.

I didn't hear from him for two days, so I re-sent my PayPal email address and reminded him politely to please pay promptly. Well, finally after three more days, I got the following email from "PayPal" (pay attention to the grammar):

Pay With Pay Pal,
Pay Pal makes it easy to receive Dineen Villaruz money, to received this payment into your account,you will have to sent the shipment tracking number to our customer care department at the link below(payp.alcustomercare@consultant.com) for shipment verifications, then we can process and credit funds into your account. We are sorry for the inconveniences we might have caused you, as this is our new policy to protect both the Seller and the Buyer from fraudulent activities. And if there is any problem within you and the buyer you are to contact our customer care representative in the immediately. For more information please contact our customer care at the above link.

The terrible English and obviously falsified email address finally convinced me that this guy was just some moron trying to scam me out of a free iPod. This is the email that came right after the "PayPal" email:

I have made out my payment to you for this item purchase (150022885893),So check your mail for the comfirmation mail from paypal.Get back to me immediately if you receive the confirmation mail from paypal and don't forget to send me your physical contact address and your phone number so that i can arranged for the shipment okay,and the exact time you will be at home tomorrow.So that i can schedule Fedex to come and pick it up from you in other to reduce the stress of you driving down to their location to send it.Then i can send you my grandson's address and fedex account number.Hope to hear from you soon.

Well, I was furious that I had to waste a week waiting for this guy, just to find out that he was trying to commit fraud. I sent a pretty heavily-worded email back to the guy telling him what I thought of him and his scam.

I guess this should serve as a lesson to other people that this might happen too. Pay close attention to everything.

Tagged: ebay

CSS fish eye menu

Aug 22, 2006  -  Comments

As part of a design for a new website at work, Kim created a text effect on her mock-up of the site design for the main navigation. She was really married to the effect and wanted me to use an image rollover to achieve it. Being that we pride ourselves in making all of our current sites fully accessible to persons with disabilities, I really hate using images for text when it can be avoided. So, as a challenge to myself, I set forth to make the effect work using only CSS. I'm not really sure how difficult this would be for the average CSS person, but I got it done.

She wanted the text of the link to increase in size by about 100% when hovered over. So, to start out, I made the nav div with a set width (the sum of all of the nav elements, which there were four at 150px each) of 400px, gave it a background color, and centered it.

#nav {
  width: 600px;
  margin: 0px auto;
  background-color: #513C33;

Next, I made each li float left, gave them a set height, and set the overflow to hidden, so that even if the padding around the anchors extend past the li, it won't cause the div to expand.

#nav ul li {
  list-style: none;
  float: left;
  margin: 0px;
  padding: 0px;
  height: 37px;
  overflow: hidden;

Now, all I had to do is set the anchors. I made them display: block; so that they register the hover even when the mouse is over their padding, gave them a height and width, and gave them a top padding so they would be centered vertically.

#nav ul li a {
  display: block;
  width: 150px;
  height: 34px;
  font-size: 14px;
  color: #8AA7A6;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding-top: 12px;

Last of all, I set the hover style. I just gave it a larger font size and changed the top padding to keep the text centered vertically.

#nav ul li a:hover {
  font-size: 28px;
  color: #74635C;
  padding-top: 3px;
  font-weight: normal;

If you'd like to see this in action, you can check it out right here. (UPDATE: This file is no longer available, sorry.)

Tagged: cssxhtml