I have been wanting to write a post for some time now over CSS. I started to think about what I could write about that has not already been said. I mean there is already so much documentation, tutorials, and beautiful examples already. What more could I bring? So I will take this in another ... Read more]]> Posted in Web Design

I have been wanting to write a post for some time now over CSS. I started to think about what I could write about that has not already been said. I mean there is already so much documentation, tutorials, and beautiful examples already. What more could I bring? So I will take this in another direction, and let you know what have been some of the struggles I have faced with CSS and how I was able to work around them.

First off let me say I am not a CSS guru. I work creating CSS sites on a daily basis, however I will be the first to admit that I do not know 1/5th of everything that can an can’t be done through CSS. With that begin said if you see an easier or better method, then post a comment below or email me. I will do my best to include and update on this post.

PNG Image Transparency – Cross Browser Problem

Having PNG images in CSS designers arsenal very beneficial as it can cut down on the amount of images used as well and some of the code that its use. PNG images can also open up design possibilities that you never knew were possible. See example below.

http://www.levelopacity.com/
Check out the use of the PNG image in the footer.

http://www.alexbuga.com/
Alex uses transparency throughout his page.

http://silverbackapp.com/
When you resize your browser the PNG background images give a sense of depth of field.

PNG’s are awesome, however, if you are designing your sites to work correctly in IE6 (as you should be) then you know that PNG’s don’t work correctly. There are several ways of getting your PNG images to work in IE, however depending where and how you want to display your images will depend on what fix you will put in place.

If you have an image much like my logo in which uses an image tag, then you can go with the AlphaImageLoader fix. Target IE using *html. It is best to include you IE hacks fixes in a separate style sheet. Be aware, if you decide to use this method on repeating backgrounds, it will make any text un-selectable and any links un-clickable in the target element.

* html img#swoop {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='navCorner.png', sizingMethod='scale');

The next methods are great for deploying fixes site-wide if you have lots of PNG’s. First Twin Helix iepngfix.htc. This one is considered a hack, and will un-validate your css. However it works great and if you place it in a second stylesheet for IT your valid code will not be affected. There are some limitations though. For 100% dependability, your elements should not have any auto-widths or heights. Sometimes you’ll get flickering. It’ll display the broken png for a second before the script kicks in. Can’t be used on repeating background images. You can get the script here: http://www.twinhelix.com

img{
behavior: url(iepngfix.htc);
}
/* or you can target specific elements and their backgrounds /*

#header{
width: 800px;
height: 200px;
background: url(path/to/image.png);
behavior: url(iepngfix.htc);
}

The last is a Jquery method. With the jquery.ifixpng plugin you can replace all the images on the page or you can target certain elements on the page. For this fix you will need a blank or one pixel gif, Jquery and of course the ifixpng plugin. This fix also has its limitations. Always defaults to “background-position:top left” and you cannot reposition it. Also doesn’t work on repeated backgrounds.

Example - applying filters to .png for correct ie6 display

// apply to target elements
$(’img[@src$=.png], div#header’).ifixpng();
});

If you still have questions, here is a good resource to start with.

min-width Property and IE

Always something with IE, huh? Say you wanted to have your page be scalable, but once the user rescaled the page to a certain width, the page would stop scaling. This property s called min-width and is used by most of the current browsers today. Again, min-width wont work in IE6. Thanks again Microsoft. You can make it work by using an IE Dynamic Expression to set the width.

div.something {
width: 100%;
min-width: 900px;

/* IE Dynamic Expression to set the width */
width: expression(document.body.clientWidth < 910 ? "900px" : "100%" );
}

IE6 Double Margin Bug & Clearing Floats

First lets get the easy one out of the way. If you have a floated element such as a div and you place margin-right or margin-left on that element, our most beloved IE6 will double that margin value. To fix this simply add display:inline; to your floating element. Thanks Jamye

Clearing floats is a whole other issue in itself. There are some many do's and don't of clearing floats. I remember when I used to clear floats by adding an empty div and add a clear element to it. Don't try that by they way. Most of the time the problem with a float is the containing div. The containing div does not cover the floated element, thus resulting in pages that look so jacked up you want to go back to table design (j/k). When ever you float an element add an overflow:hidden property to it. Suddenly that div is now seeing the floating div. Also adding a hard width and height can fix this as well, but who works in absolutes (pun intended).

I know some people who just stay away from floats because they can't get them to work. If you uses this simple method you will get your floats to work like you want them. After you have implemented both of these methods you will have some code kinda like this:

div.right-well-container {
overflow:hidden;
}

div.right-well {
margin: 10px 4px 0px 4px;
float: left;
display: inline;
}

Background Images on Empty Elements

From time to time I will be in the need to add a extra element or rounded corners on to existing code. Sometimes it is just easier to add an empty div to accommodate this change rather than recoding the bulk of your already finished code. However you may run into another IE6 bug that will add margin around the element. After multiple tests to see what is exactly causing the problem I found that it was the font size. My workaround has been to change the font size to 1px. This seems to get rid of the problem. I am sure there is a better explanation for what is going on, but I don't have it. Feel free to comment below.

div#profile-top {
font-size: 1px;
height: 3px;
background: url(details_top.gif) no-repeat;
}

CSS links for beginners and experts

if you are getting into CSS it can be dawning at first, however once it clicks with you,you'll have no problem tackling the hardest projects. I found out that the best program for a beginner to learn on is CSSEdit. While it is not a program for beginners, it helps you understand code and view items that cane be styled. Everybody has his or her own method to try to solve things and we all have our favorite tools. CSSEdit's Preview feature in combination with the XRay can allow you to pull any site and look at the CSS and see how they set it up. When you are in XRay mode you simply select an element, and you'll see its margins and padding (if any) and the space this element takes. At the top of the Preview page you see the all the parent elements with classes and id naming etc. Very kool stuff. Below are some links for you to get started.

http://veerle.duoh.com
She knows her CSS and has tons of links to CSS tutorials, examples, and more.

http://www.blog.spoongraphics.co.uk
A great site for anything design related. Here is a free CSS menu for you to dissect and understand.

For those experts out there check out the links below. See what other creative people like your self are doing with CSS.

50 Creative CSS Examples

http://www.cssartillery.com/
Is becoming one of my favorite CSS gallery sites