Archive for the ‘ Web Design and Development ’ Category

Vir2oso Design is Officially Live!

Tuesday, August 3rd, 2010 at 8:53 pm

Okay, it has been up off and on for the last several months but now it is officially launched. I will be improving on it as time goes by, but for all intents and purposes it is done. Anyway, I figured that I should announce the launch officially right here on the blog.

I used WordPress for the blog, obviously. The site structure was easy using the 960 Grid System (12 column layout). I used jQuery Tools a fantastic, easy to implement Javascript library to spice things up a bit.

I have quite a few more projects to add to my work portfolio and I will be creating another section where I will post my experiments and other work that doesn’t quite fit in the work section. Keep checking back for that!

Take a look around and let me know what you think! - www.vir2osodesign.com

Posted in Web Design and Development | No Comments »

Adobe Photoshop CS5 – Content Aware Fill is ‘Da Bomb’

Tuesday, June 22nd, 2010 at 8:13 pm

Just a quick post on how cool the new Content Aware Fill feature in Photoshop CS5 is. It saved me a lot of work removing cars from a photo as you can see below. All I had to do was select the area I wanted to effect and chose ‘fill’ with the content aware option selected and, voila!

I know it won’t be this easy every time but this is one amazing tool that I have already gotten my money’s work out of.

Posted in Web Design and Development | No Comments »

Z-Index Issues in Internet Exploder

Friday, March 5th, 2010 at 1:53 am

I have a really bad habit of getting too far along before I take a look at my site in Internet Explorer. I think it might have to do with the fact that I hate IE with all my heart and soul. I just wish that it would go away and everyone would use 1. Chrome, 2. Safari or 3. Firefox. Anyhow, the reason for my anti-IE rant tonight is based on a 3 day struggle (okay not 3 full days) with what turned out to be a z-index issue.

I am currently redesigning my employer’s web site. I use Dreamweaver so creating drop-down menus is a snap using Spry. After previewing the index page in the browser I noticed a familiar problem. The index page has a flash animation as it’s main content and the items from the drop-down menu were appearing behind the flash window. Simple fix as I had been through this before. Just change the wmode parameter of the flash file to transparent and pat myself on the back for a job well done. Well, it didn’t work. The first day and a half was spent trying to figure out why changing the wmode worked on another site I had built in the past but not this one. I was about to pull my hair out, such as it is, when I realized that the menu was not just appearing behind the flash animation but any content in the div below it. That’s when it hit me that it was a z-index issue. Once again, simple fix. Just assign the div containing the navigation a higher z-index than the div that appears below it. Didn’t work. The second day and a half was spent searching for a solution and then blindly applying position and z-index attributes to various divs in the header element and the content element. I was about to pull my hair out (such as it is) when I stumbled upon the answer found at http://verens.com/archives/2005/07/15/ie-z-index-bug.

In Internet Explorer z-index values are relative to the containing div. The only way that a div with a higher z-depth will appear over one with a lower z-depth when relatively positioned is if they share the same parent. What this meant was that the z-index value given to the navigation div which inside the header div had no relation to the z-index of the content div. The content div would always appear on top of the navigation div as it came later in the document flow. The fix was indeed simple but I just didn’t see it. I simply applied the z-index value to the entire header div instead of the navigation div. Since the header div and the content div shared the same parent div the z-index values were applied in the same context and any content in the header, such as the drop downs from the navigation, would appear on top of any content in the div with the id of content.

So, to review -

  • Each relatively positioned div in IE starts a whole new z-index context.
  • Content in divs that appear later in the document flow will appear above those appearing earlier
  • To layer content of relatively positioned divs in IE the divs must share the same parent div

A problem that had me baffled for 3 days (okay, okay, not 3 actually days) took less than 60 seconds to fix once the solution presented itself. Ah, the wonderful world of web design. I wouldn’t trade it for the world. :)

Posted in Web Design and Development | 2 Comments »