If you add a unique identifier for the IE browser that is giving you trouble, then just add the ID your CSS in order to control it with ease. Here is what you do:

Copy the following code and insert it just below the opening body tag of your template:

<!--[if IE]>
<div id="ie">
<![endif]-->
<!--[if IE 6]>
<div id="ie6">
<![endif]-->
<!--[if IE 7]>
<div id="ie7">
<![endif]-->
<!--[if IE 8]>
<div id="ie8">
<![endif]-->

Paste the next bit of code right above the ending body tag:

<!--[if IE 6]>
</div>
<![endif] //-->
<!--[if IE 7]>
</div>
<![endif] //-->
<!--[if IE 8]>
</div>
<![endif] //-->
<!--[if IE]>
</div>
<![endif]-->

If you have a box displaying at different heights in Firefox and IE6, write your CSS like this:

.sizebox {height:30px;}
#ie6 .sizebox {height:28px;}

It is MUCH faster and easier to see what is happening with the template when you are reviewing your code to make changes. It’s better than reviewing several different style sheets to find what has been created. You will still need a separate style sheet for IE6 and IE7 so you can store the CSS that doesn’t validate. (You may need it to pound IE into shape!) I personally don’t support IE5 or 5.5, but if you support it just add those to it and you can single it out. 90% of the fixes can be done with this custom code. It’s helped me a lot and I’m sure it will help you too!

I’m sure I’m not the only one who started out with CSS longhand and slowly moved toward shorthand. If you are going through old code and converting it to shorthand, try this nice (quick!) trick for making Dreamweaver do the dirty work for you.

First of all, make sure your preferences are set up for shorthand by going to Preferences > CSS Styles.

Pick all the CSS that you would like to have made into shorthand.

Make sure you have Edit Using CSS checked for this to work. Click OK.

Now go to your style sheet and find the code you would like to convert to shorthand. If it’s a font then simply change the font-family: to font:, click on the CSS styles box, then double click on the style you just changed. When the CSS style dialog box comes up simply change or add one thing and click OK. All your font tags will be converted into the same tag.

For margins and padding you just have to open the CSS dialog box and fill in the empty boxes with 0. When you click OK, they will all be converted into shorthand for the tag you edited. I personally think it’s faster to convert margins and padding by hand, but it’s a nice time saver if you are already in the dialog box. ]]> http://www.corephp.com/blog/shortcut-to-converting-to-css-shorthand/feed/ 0