IE double margin float bug

0 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 sucks, xhtml, css

eBay scam attempt

0 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:

Hello,
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:

Hello,
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

0 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: css, xhtml

MacBook

1 comment

Weeks and months of pining and wishing have finally come to fruition. Thanks to the Georgia sales tax holiday at the beginning of August and the back-to-school iPod promotion, I was finally able to justify dropping $1300 on a tiny white laptop.

Never before have I been happier with a purchase (since I bought my iPod). I have absolutely no "buyer's remorse." I was talking to a coworker shortly after my purchase about the frame of reference when it comes to prices for purchases. Most people don't think twice about spending $1000+ for a desktop or laptop computer, but when contemplating buying a game console or an appliance for $300-$500 the majority of people will think and rethink about whether to buy. It's very odd.

The event that started my Mac addiction happened around March of this year. We needed to hire another person at Plexus to help me out because we had more work than I could handle. Well, that involved buying a new computer for the extra person. El Presidente offered to give him my old PC and buy me a new Mac Mini and, of course, I jumped at the opportunity. It was a bit different getting used to OS X at first, coming from the world of Windows. I got the hang of it pretty quickly and immediately saw the benefits of the Mac over the PC. Since then I've wanted an Apple, and two weeks ago the dream became a reality.

Tagged: apple

OS X Leopard to have Ruby on Rails

0 comments

I received a jubilant email today from Shawn that contained a link to this article officially announcing that Mac OS X Leopard will indeed be shipped with Ruby on Rails pre-configured.

For anyone who's followed these great directions to get RoR up and running on a Mac knows that it takes a fair amount of time and a good bit of focus to get everything correct. Having everything pre-installed will save many people a great deal of aggravation.

On top of having Ruby and Rails in the box, they've promised other packaged goodies like Mongrel, a Ruby alternative to Apache that I've heard is much more efficient.

It's not like I needed another reason to look forward to the OS X update, but now I'm truly excited to get my hands on Leopard.

Tagged: apple, rails