Happy Saturday!

HELLO

This site is no longer being updated. May I direct you to the shiny, new site?

Below is an archive of all the posts from this site over the years.

I’m dumber than I look » January 16th, 2009 · See comments

I’ve always been a fan of bug-finding and troubleshooting when it comes to web pages. Because I’m self-taught, I’ve always found this part of things enjoyable, as it helps me improve my skills (when I can identify a mistake, I can learn how to not make it again). However, some things really do have me stumped, especially when they’re really obvious.

For example, yesterday I was making a box which needed a red gradient background. I was given the background image by another person (trust me, it was easier that way. I suck at photoshop) so all I had to do was put the html / css together, and voila! A perfect box with a sexy red background.

Except no, it was no way that easy. I made my box, I had background-position: bottom; in my stylesheet. According to logic, this should put the background image at the bottom of the box.

The problem I had was that the image didn’t appear at the bottom of the box. It appeared ~20 pixels up from the bottom. At first I cursed and swore at the Mac I was using, but the problem still existed on a windows machine! Every browser I tried had the same problem. Firefox, Safari, Internet Explorer, Chrome… The background image wasn’t at the bottom.

Because the problem existed on every browser / OS combination I tried, it indicated it was less of a ‘browser’ problem, and more of a ‘Rachaely’ problem. So back to the drawing board I went. I’d definitely spelt everything right, and there was no other styling that was overriding it. The problem didn’t seem to follow logic either – if I’d done something wrong, surely the image would go back to the default position of top left? This image wasn’t there – it was at the bottom… ish. So how do you replicate ‘ish’ ?

I had an epiphany this morning on my way to work, and I tried to fix the problem again. If it wasn’t the browsers, and it wasn’t the CSS, then there must be something weird with the image. Sure enough, I opened it up in photoshop, and voila: a 20 pixel white block at the bottom of the image.

That would explain things.

16 lovely persons have commented

Leave your own comment »

  1. Aisling says:

    Haha, I hate things like that. It’s like “OH!… wait, I am AN IDIOT.”

    Also, it makes me laugh when you refer to yourself as “Rachaely.”

  2. Hev says:

    Don’t worry, Rachael. I do the same thing all the bloody time. I can spend a week trying to figure out something just to discover it was a simple mistake staring me in the face.

  3. Vanesa says:

    I do dumb things like that all the time. :D

  4. Megan says:

    I hate when things like that happen.

  5. Kaylee says:

    As others have mentioned, you’re not alone :P

    This is why I only trust myself to create images ;)

  6. Emsz says:

    I get that all the time :P I think something is perfectly logical and someone else comes along and points out the flaws xD

  7. Vera says:

    This is why I always prefer specifying background position in percents.

    eg: background-position: 2% 96%. This way, even if the image is larger than what you like, you can move it about as you like using a few changes in the code.

  8. Jennifer says:

    You know how often I do that same thing. I always end of doing something with adding white pixel border or clear background that adds pixels. lol

  9. Lisa says:

    hehe, we’ve all done things like this before :p
    I’ve asked in forums a few times on things I just could not figure out, and it turned out to be simplest solution ever, like a missing < or ; or something :p

    btw. I’ve moved to my new domain! :)

  10. Roxanne says:

    I hate when that happens. You rack your brain trying to figure out what the problem could be, looking through every little detail and when you finally find the issue, it’s the smallest and dumbest of things!

    Very annoying.

    Glad you could find the issue though! =D

  11. deltay says:

    Oh dear, that sucks!

    Haha, okay, honestly, it’s actually a little bit funny.

    But I get your aggravation; I took Computer Science this semester, and holy cow! Typos = the horror.

  12. Christine says:

    I do stuff like that all the time… it’s usually from spelling something wrong since i type fast and I rarely go back and double check. ~_~

    At least in this case you know it wasn’t you at all! That must be comforting. :)

  13. Aly says:

    Lol, I do stuff like that all the time too…and then I’m like “duh” when I finally realize how obvious the solution was. ;) But technically the problem with the red graident wasn’t your fault since someone else made the gradient image…you couldn’t have really known there would be extra white space in the image. But yay for figuring it out though! :)

  14. Amanda says:

    Gah, that must’ve really sucked. But at least you solved it!

  15. Richard says:

    It happens to us all Rachael! I spent 3 days last week trying to work out why an image (funny enough a background image for a box) was appearing 10 pixels too low in IE7, whereas it was fine in FF, Safari, Opera and Chrome.

    It turned out to be nothing wrong within my CSS file, but was a style line in my html file which someone* had put in as a conditional comment for all versions of IE.

    * Well, me, but I couldn’t remember doing it!