Hello, I am trying to optimize my CSS files by hand, I feel it would be better that way rather than use a program to do it. Is it safe for universal browsing to combine css like so:
ORIGINAL
td#midl{border-top:1px solid #000;border-bottom:1px solid #000;}
td#midr{border-top:1px solid #000;border-bottom:1px solid #000;}

OPTIMIZED
td#midl, td#midr{border-top:1px solid #000;border-bottom:1px solid #000;}

THanks in advance for your answers and if you have any other tips on optimizing CSS...

Now in regards to making a seperate CSS file for IE only, do I need to include all the same css or only what is different?

not sure about your top bit but with the css for IE we tend to put all IE fix's at top of the original css sheet

First, note for an object like that you'd want to use the class selector (.) instead of the id selector (#), as I assume you would be reusing midl and midr.  But, yes, you can combine definitions like that and then use separate declarations for the definitions that have to be different.

Another option is multiple classes.  Consider the following

<table>
<tr><td class="top left">data 1</td><td class="top right">data 2</td></tr>
<tr><td class="mid left">data 1</td><td class="mid right">data 2</td></tr>
<tr><td class="btm left">data 1</td><td class="btm right">data 2</td></tr>
</table>

td.top, td.mid {border-top:1px solid #000;}
td.btm, td.mid {border-bottom:1px solid #000;}
td.left {border-left:1px solid #000;}
td.right {border-right:1px solid #000;}

Note, this allows you to combine the effects of two or more classes.  In effect with this, the middle left cell of the table will have a top, bottom, and left border.

1-Clan wrote:

not sure about your top bit but with the css for IE we tend to put all IE fix's at top of the original css sheet

What do you mean you put them at the top? I use two seperate CSS files. One regular (firefox) and one for IE. I build for FF and then make the necessary changes for IE in the IE css file. When you say "put them at the top" do you mean you put the IE fixes inside the same file? How do you get it to differentiate? This is what I am using:

<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="IE-override.css" />
<![endif]-->

Thanks.

yes just put the IE fix's at top we put at top as you can find and edit faster but anywhere in the css file is fine as far as i know.

Not sure on the code used as I dont do much of the coding at work just the seo and a bit of coding at home from time to time.

Just google "css IE fix code" or something and im sure you will find some good examples and even good fix codes to use