CSS backward compatibility and file size

Can someone help me tweaking my web site enbedded CSS for improved backward compatibility and schrinking the code?

Code:

---

/* ###### Copyright Webnauts Net###### */
 body{color: #000; background-color: #fff; font-size: 80%; margin: 0em; padding: 0em; background-repeat: no-repeat; background-attachment: scroll; font-family: arial, verdana, helvetica, tahoma, sans-serif}
 h1, h2, h3, h4, h5, h6 {color: #000; background-image: url("http://www.webnauts.net/images/h_gradient.jpg");
 background-repeat: repeat-x; padding-left: 0.6em; padding-right: 0.6em; font-weight: bold; font-size: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em; margin-top: 1.0em}
 a:visited img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #800080; color: #fff}
 a:hover img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #800080; color: #fff}
 a:hover img.square1 {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #fff; color: #000}
 img {border: none; margin-top: 0.55em}
 img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #000; color: #fff}
 img.right {float: right; margin-left: 0em; padding-right: 0em}
 img.leftone {float: left; margin-top: 0em; margin-left: 3.3em; }
 img.left{float: left; margin-top: 0em; margin-left: 0.7em; padding-right: 1.4em; padding-bottom: 0.45em}
 img.square1 {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #000; color: #fff}
 p.danke {color: #000; font-size: 1.0em; font-weight: bold; text-align: center; background-color: #fff}
 p.fehler {color: red; font-size: 1.1em; font-weight: bold; text-align: center; background-color: #FBFBFB}
 p.lila {color: #000; font-family: arial, verdana, helvetica, tahoma, sans-serif; font-size: 0.9em; font-weight: bold; font-style: italic; text-align: center; background-color: #fff}
 dt {font-weight: bold; padding-left: 0.6em; padding-right: 0.6em; font-size: 1.1em}
 dd {padding-left: 0.6em; padding-right: 3em; padding-bottom: 0.25em}
 html>body q span {display:none}
 .smallCaps {font-variant: small-caps}
 code {font-family: monospace}
 acronym {border-bottom-style: dotted; border-bottom-width: 0.09em; cursor: help; color: #000; background-color: #eee}
 html>#bodyText {height: 1%; float: left; margin: 0em}
 #bodyText {background-repeat: no-repeat; background-position: center; background-color: #FBFBFB; color: #000; line-height: 1.4em; margin: 0 0 0 15.5em; padding: 1.4em 1.4em 0.9em 1.4em; border-left: 1px solid}
 #bodyText p {padding-left: 0.6em; padding-right: 3em}
 #bodyText a {color: #000; text-decoration: none; border-bottom-style: solid; border-bottom-width: 0.09em}
 #bodyText a:hover {font-weight: bold; border-bottom: none; background-color: #800080; color: #fff; text-decoration: underline}
 #bodyText a:active {border-bottom: none; color: #fff; background-color: #800080; text-decoration: underline}
 #bodyText .topOfPage {font-size: 80%; font-weight: bold; font-variant: small-caps; border: 0; padding: 0.45em 0.6em; float: right; text-decoration: underline}
 #bodyText a.topOfPage:hover {color: #fff; background-color: #800080; text-decoration: none; padding-top: 0.3em; padding-bottom: 0.3em}
 #bodyText li {list-style: square}
 
 #upperMenuBar .highlight, #lowerMenuBar .highlight {color: #000; text-decoration: none}
 #upperMenuBar {height: 2.1em; color: #fff}
 #upperMenuBar a {color: #fff; font-size: 90%; text-decoration: none; padding-left: 0.48em; padding-right: 0.96em}
 #upperMenuBar a:hover {text-decoration: underline; color: #f93}
 .LHS {left: 1.8em; top: 0.8em}
 .RHS a:active {background-color: #eee; color: #000}
 .RHS li {list-style: square; padding: 0; margin-left: 0}
 .RHS ul li a:link {color: #000; background-color: #fff;  text-decoration: none}
 .RHS ul li a:visited {color: #800080; background-color: #fff; text-decoration: none}
 .RHS ul li a:hover {color: #fff; background-color: #800080; text-decoration: none}
 .RHS ul li a:active {color: #000; background-color: #fff; text-decoration: none}
 
 html>body #lowerMenuBar {height:auto;}
 #header {min-height: 75px; padding-left: 0.45em; background-color: #fff; color: #000;}
 * html #header {height:75px}
 * > html #header {height:auto}
 #header .left{margin-left: 1px; margin-top: 10px;width:228px}
 #lowerMenuBar {clear:both; background-image:url("http://www.webnauts.net/images/nav_gradient.jpg"); background-repeat: repeat-x; color: #000000; font-weight: bold; min-height: 2.9em;line-height:2.9em; padding-left: 0em; padding-right: 1.8em; border-bottom: 1px solid #000; text-align: right}
 * html #lowerMenuBar {height:2em}
 * > html #lowerMenuBar {height:auto}
 .RHS {float:right;margin-right: 1.0em; width: 14.5em; margin-top: 1.0em; font-weight: bold; text-align: left;}
 
 /* Tweaks */
 #header {text-align:center}
 .RHS {float:right;margin-right: .5em; width: 12.5em; margin-top: 1.0em; font-weight: bold; text-align: left;display:inline;}
 img.left{float: left; margin-top: 0em; margin-left: 0.7em; padding-right: .2em; padding-bottom: 0.45em}
 
 #lowerMenuBar a {color: #fff; font-weight: bold; text-decoration: underline; margin: 0 0.5em}
 #lowerMenuBar a:hover {text-decoration: none; color: #000}
 #lowerMenuBar a:visited {color: #800080}
 .sideMenuBox, .sideTextBox {background-color: #eee; color: #000; width: 15.5em; border-bottom: 1px solid; padding: 1.5em 0 1.5em 0em; margin-bottom: 0.05em; float: left; clear: left}
 .sideMenuBox div, .sideTextBox div {font-weight: bold; padding-left: 0.8em; padding-bottom: 0.8em; border-bottom: 0px}
 .sideMenuBox ul li a {list-style: square; text-decoration: none; margin: 1.2em 0 1.2em 0em}
 .sideMenuBox ul {margin-top: 0; margin-left: 2.4em; padding: 0; list-style: none; font-family: arial, verdana, helvetica, tahoma, sans-serif; font-size: 95%; line-height: 150%}
 .sideMenuBox ul li a:hover {text-decoration: underline}
 .sideMenuBox a {color: #000}
 .sideMenuBox a:visited {color: #800080}
 .sideMenuBox a:hover {color: #f93}
 .sideTextBox span {line-height: 1.5em; display: block; padding: 0 0.8em 0 1.06em; list-style: none}
 .sideTextBox a {text-decoration: none; border-bottom-style: solid; border-bottom-width: 0.09em}
 .sideTextBox a:hover {border-bottom: none; text-decoration: underline; background-color: #fff; color: #000}
 .sideTextBox span {color: #000; background-color: #eee}
 .lighterBG {background-color: #fff;color: #000}
 .sideLastBox {font-weight: bold; background-color: #fff; color: #000; width: 15.5em; padding: 1em 0 1em 0; margin-bottom: 0.09em}
 .sideLastBox .centered {margin-left: -1em; border-bottom-style: solid; border-bottom-width: 0.09em}
 div.boxgroup {width: 15.5em; margin: 0 0 0 0; padding: 0; text-align: left; float: left}
 div.centered {text-align: center}
 div.special{text-align: center; margin-right: 2em}
 div.small {font-family: arial, verdana, helvetica, tahoma, sans-serif; font-size: 80%}
 div.row {clear: both; padding-top: 10px; width: 100%; text-align: left}
 div.red {background-color: #fff; color: red; float: right}
 #footer {font-size: 85%; padding: 0em 0.55em 2.4em 0.55em; clear: none; border-top-style: solid;  border-width: 0.00em; background-color: #fff; color: #000}
 #footerlow {background-image:url("http://www.webnauts.net/images/footer_gradient.jpg"); background-repeat: repeat-x; color: #fff; font-size: 30%; padding: 0em 0.55em 1.44em 0.55em; border-top-style: solid; border-width: 0.00em}
 #footer div {text-align: center; line-height: 1.45em; padding-top: 0.1em}
 #footer ul, li {list-style-type: square}
 /*#footer ul, li {list-style-type:none; display: inline; line-height: 1.5em}*/
 #footer a {text-decoration: none; color: blue}
 #footer a:active {background-color: #eee}
 #footer a:hover {background-color: #800080; color: #fff; text-decoration: none}
 .footerLHS {line-height: 1.7em; float: none; clear: none}
 .footerLHSRB {color:#ff0000; line-height: 1.7em; float: none; clear: none}
 fieldset {width: 550px; padding: 10px; border: 1px solid}
 label {color: #000;  background-color: #FBFBFB; font-weight: bold}
 legend {color: #000; background-color: #FBFBFB; font-weight: bold}
 .row label {text-align: right; width: 150px; margin-right: 5px; display: block; float: left}
 .row input {width:200px; text-align: left}
 .row2 input {text-align: right; width: 150px; margin-right: 5px; display: block; float: left}
 .row2 label {width:360px; text-align: left; float: left}
 .row textarea {width:250px; text-align: left}
 input, textarea {background-color: #eee; border: 1px solid; color: #000;}
 .submit {text-align: center}

---

Thanks in advance.

Jesus Christ, that's a lot of CSS.:lol:

Well, right off the bat, I can tell you can shrink the code by quite a bit by setting the properties in one declaration. Glazing over it, you should be able to do this for background, padding and margins, and mabye more. Should decrease the size abit.

It could be usefull if you provided HTML together with this CSS. For me it is too big to start optimising without appliance. I need to SEE what you try to do in this way to be able to suggest alternatives.

Quote:

---

Originally Posted by AdamsHC

It could be usefull if you provided HTML together with this CSS. For me it is too big to start optimising without appliance. I need to SEE what you try to do in this way to be able to suggest alternatives.

---

AdamsHC you can may find my page online.
For HTML see here: http://www.webnauts.net
For CSS see here: http://www.webnauts.net/styles/style.css

Thank you so much for your kind support in advance.

After all can someone help?

Start using shorthand CSS. For example, instead of:

Code:

---

p.lila {color: #000; font-family: arial, verdana, helvetica, tahoma, sans-serif; font-size: 0.9em; font-weight: bold; font-style: italic; text-align: center; background-color: #fff}

---

Try:

Code:

---

p.lila {color: #000; font: bold italic .9em arial, verdana, helvetica, tahoma, sans-serif; text-align: center; background: #fff}

---

See the difference? Multiply that for every rule you have in your stylesheet and the file savings will add up. Use smarter selectors instead of a class for everything and you'll see still more savings in both your HTML and CSS.

Yah, thats what I recommended too vgarcia. However I think he wants us to do it for him ;)