Not on the Same Page

This week was either the calm before the storm or maybe there was just a lull in my course work.  Either way, I had some extra time to play around with changes to my site.  I altered my profile page by creating an image map using an image sprite to add the hover feature.*  I also started playing around with ideas for my design project.  It’s still in the beginning stages, but I put up the rough framework that I’m working with: http://www.seloncarrie.com/design.html.  I guess you could say that I was feeling ambitious this week.

I’m using a completely different CSS for my design project and my image map required a lot of extra code as well.  Needless to say, my coding endeavors were not glitch-free.  I spent entirely too long on trying to figure out why my image sprite was not loading as the background image before I gave up on noobcube’s instructions and came up with something that I think works just as well.

I also had a lot of difficulty using vendor pre-fixes to create a gradient on my design project.  I’ve used vendor prefixes in the past to create a curved header/nav bar on my other pages, but for reasons beyond me, Mozilla and IE would have nothing to do with it.  When I included –webkit-gradient, the CSS would not load in Mozilla and IE, but if the –webkit-gradient was not in my code, the CSS would load fine.  I played around with it for a while, but decided to comment out the –webkit-gradient and figure it out later.  Mysteriously,  –webkit- still displays the gradient, even without the vendor specific code.  I think it looks fine, so I’m not going to lose too much sleep over it.

I was surprised by the difficulty I’ve been having getting the pages to display well across browsers.  I knew this was a problem, but until now I haven’t had too much difficulty with it.  Last night I was applying my background color to my design page using RGB and I was surprised at how different they displayed in Chrome and Mozilla.  I’m aiming for a gold color (which admittedly may be annoying to the reader), and it worked well in Chrome but Mozilla applied a horrendous, neon yellow to the page.  I converted the color from RGB to hexadecimal and now the colors are much closer to how I envisioned them.

Problems with designing pages that display well regardless of browsers may get easier with experience, but will always pose a challenge to website design.  In the meantime, I guess it’s a process of trial-and-error.  I just hope that I won’t always spend so much time figuring out where the problems lie and how I can correct them.

*This site was very helpful in creating my image map.  It also has some other useful how-tos.