Internet Explorer and the Overflow Property

Recently I was working on a website that had a conditional statement which hid the full height of a div on the inside pages.

Something like this:

.menu-top-container{float: left; width: 980px;}
    .page .menu-top-container{height: 320px; overflow: hidden;}

A seemingly benign statement that you wouldn’t anticipate to give you  much trouble height, width and overflow all declared; However this is the internet and we do get to deal with Internet Explorer. It would seem that there is a well documented bug in the browser that ignores the overflow property for static positioned elements (this is the default value). Adding position: relative to the above property fixes the problem.

    .page .menu-top-container{height: 320px; overflow: hidden; position: relative;}

This has existed since IE6. We are now in IE9 and I can consistently reproduce the same bug. I find it interesting that 5 years later we are still dealing with the same issues in IE.
What gives? Who is wrong here? Should elements on the page be position: static by default as IE seems to think so?
What other oddities could I solve by adding these few characters to my code?

After reading some of the comments in the thread that saved me hours of hunting I’ve begun to wonder if I shouldn’t adopt the same practice that others have in adding position:relative to my debugging process as step 1.

Hope this helps someone.

 

 

Mysterious Gradient in IE8

Internet Explorer is full of odd behaviors but this one has got to take the cake.
Recently a bug was reported in one of my websites for an IE8 user. Instead of seeing an opaque grey background on my navigation they were seeing a gradient that faded from the top to bottom corner into transparency. Making the text really really hard to read.

Fortunately I harnessed the power of the internet and the Google search engine to find this post: http://stackoverflow.com/questions/2869982/what-would-cause-this-behavior-in-only-one-persons-ie8

I found this gentleman’s issue on another site he posted it to and it was the EXACT same thing I was experiencing.
The solution?  

Meta Description and your Web site

You have worked hard at optimizing your site for Google and your site is now showing up in the top 10 on your key words. Congratulations! A terrific accomplishment! The next challenge is to get users who are presented with your listing (along with 9 others in the search return) to actually click and visit your site.

Clicking through to a site doesn’t always happen and a main reason could be an ineffective Meta Description. This is what Google extracts from your site and presents in the search return. What you need is a short, clear description or summary of what the visitor can expect should they click through to your site.

This is may be your only chance to persuade someone to visit your site. Here are some suggestions that might help you get not only more click-throughs but click-throughs that will bring you business.

1. Include your most relevant keywords in your description. Google bolds keywords in the description that matches search queries. Your listing will stand out.
2. Keep your description clear and appealing.
3. Write a unique meta description for each page of your site. Google will return an internal page if it includes the searchers keywords.
4. Google indexes only 160 characters of your meta description. Anything longer will get cut off. Look like a pro; keep it under 160 characters.
5. With SiteCM you can manage your meta description.
6. When you update your page content review your meta description. It may need to be updated as well.

Your Meta description does not factor into Google’s search algorithms so it will not help determine your ranking on a search return, but it is your big chance and maybe your only chance to persuade someone to visit your site.

Staying Accessible

The web is an amazing place where it sometimes seems like anything is possible. When building a website it’s important to remember that not everyone will be able to appreciate all your bells and whistles. Only those with the latest greatest browsers will see your CSS3 and HTLM5 styles; only those with a good connection will be able to appreciate your full page backgrounds and fancy image galleries.  The list goes on. What’s a designer to do?

Fail gracefully. Build accessibly.

Blogging – It’s About Consistency

I am often asked “What does it take to start up a blog?” From a technical standpoint we need a bit of tech time to get the domain set up on the servers. From a design standpoint we need a few hours of time for design. And that’s about it.

The heavy lifting or what it really takes to set up a blog, a good blog, is on the shoulders of the blogger. There are many instances of blogs being started with the best of intentions but the blogger soon found out how much work it was to keep it going. On a regular basis, daily, weekly, you decide on the frequency, you need to come up with an entry to your blog that will interest your readers.

So, based on my observations, I suggest that before you launch your blog brainstorm a bunch of subjects; 30, 40 or even 50 ideas.  That way once you get your momentum started, you’ll be able to maintain your blog even if life got busy or you come down with a dreaded case of writer’s block.

Facebook launches new Timeline layout for Pages

Facebook is at it again this time rolling out a change for the consumer pages. All in all this is a good thing for those of us using a Facebook page to promote our business. Facebook has given users the ability to preview their pages until March 30th when they will all be converted to the new layout. This gives you a chance to play around with your page and get it looking top notch before it is unveiled to the world wide web.

Most noteably different is the addition of a large banner to the top of your page. Gone are the tiny thumbnails of the pictures you uploaded and the left hand tall profile picture many of us designers had so much fun with. These have been replaced by a 851px x 316px banner image where you can essentially display how awesome your business is.