SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Jesus Christ, that's a lot of CSS.

  3. #3
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  4. #4
    SitePoint Member AdamsHC's Avatar
    Join Date
    Aug 2004
    Location
    Lithuania
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    After all can someone help?

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  8. #8
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yah, thats what I recommended too vgarcia. However I think he wants us to do it for him
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •