11 Replies Latest reply on May 23, 2010 5:50 AM by jxlusa

    CSS Validation + Divs Text Colour

    Natasha06

      Hi

       

      I have 2 problems at the moment which I need assistance with solving:

       

      1. Errors have been found on the CSS validation tool as per following link (mainly focusing on my menu bar) :

       

      http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. wizcleaners.com.au%2Findex.html%2F

       

      As you can see, there are 6 errors and I have no clue how to fix these errors. Is there some one that can help me fix these issues?

       

       

      2. On IE 7 & 8, my 2 divs at the bottom of my website titled 'National Reach' and 'Customer Satisfaction- Guarantee' (website url: www.wizcleaners.com.au), the entire text in the 2 divs appear brown instead of the normal black. What coding, and where do I need to apply this to tell the browsers that I want the text to be black, not brown?

       

      I would be very grateful if I can please get some help or assistance on the above issues. Thank you.

        • 1. Re: CSS Validation + Divs Text Colour
          jxlusa Level 2

          HI Natasha,

          You really only have two errors but the validator breaks the second one down into several parts.

           

          First, on line 23 near the top of SpryMenuBarHorizontal.css

          you have:

           

          ul.MenuBarHorizontal
          {
              margin: 0;
              padding: 0;
              font-size: 20px;
              cursor: pointer;
              width: auto;
              text-transform: uppercase;
              float: left;
              background-position: centre;
          }

           

          The background position should use the American spelling:
          background-position: center;

           

          or better yet, use 50% instead of center, like this:
          background-position: 50% 0;

           

          The first number is the horizontal position, the second number the vertical position, in other words, the above is the same as saying:

          background-position: center top;

          • 2. Re: CSS Validation + Divs Text Colour
            jxlusa Level 2

            The second problem is Internet explorer.

            You have:


            ul.MenuBarHorizontal iframe
            {
                position: absolute;
                z-index: 1010;
                filter:alpha(opacity:0.1);
            }

             

            The rule

            filter:alpha(opacity:0.1);

             

            is not valid CSS. It is a Microsoft proprietary property.

            You can remove it to make you style rule valid, but you can't do anything else to fix it.

             

            One thing that can help in the future (though probably not with the above problems) is to set your preferences for Dreamwaver to not try to make things work in IE5.

            I noticed that you have a few IE5 hacks in there. We are at a point where IE5 can be safley ignored unless you have a specific request for it.

            IE6 is also going the way of the Dodo, but some companies still use it so that's a judgement call only you can make.

            • 3. Re: CSS Validation + Divs Text Colour
              Natasha06 Level 1

              Hi there

               

              Thank you for your reply, i appreciate it very much. I have applied the coding to the home page for the spry menu bar, can you please check I have done this correctly before i go on and apply it to each of the other pages? Will this fix the error problem on the css validation site once applied across the site?

               

              So with respects to the divs colour issue, you have told me to apply the below 2 rules, correct? if so, where exactly do i place this? (sorry I am a complete novice at all this - as you can tell!)

               

              Finally with the IE 5 thing that dreamweaver has created, should I simply replace that to IE 6? so everything remains the same, just the number itself changes to appear from IE 5 to IE 6?

               

              I look forward to your response.

               

              Natasha

              • 4. Re: CSS Validation + Divs Text Colour
                jxlusa Level 2

                Sorry Natasha,

                I see that you needed a little more explanation. You added styles to the head of your document instead of to the external stylesheet. While that may make things render correctly, it will also make it difficult to manage your site styles, AND, since the incorrect styles still exist in the external stylesheet, they will still show up as errors.

                 

                So..

                For the brown text, you have this in the head of index.html (I did not check to see if it is in any other pages.)
                <style type="text/css">
                <!--
                body,td,th {
                    color: #390000;
                    font-family: Calibri;
                    font-size: 16px;
                }
                -->
                </style>

                 

                Remove all of the above. If you want Calibri as your base font, you will need to add it to wizcleaners.css

                In wizcleaners.css you have this:

                 

                body  {
                    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                    padding: 0;
                    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
                    color: #000000;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 100%;
                    background-color: #FFF;
                }

                 

                Change it to this:

                 

                body  {
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    color: #000000;
                    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
                    font-size: 100%;
                    background-color: #FFF;
                }

                • 5. Re: CSS Validation + Divs Text Colour
                  jxlusa Level 2

                  This:


                  ul.MenuBarHorizontal
                  {
                      margin: 0;
                      padding: 0;
                      font-size: 20px;
                      cursor: pointer;
                      width: auto;
                      text-transform: uppercase;
                      float: left;
                      background-color:#FFF
                      background-position: 50% 0;
                  }

                   

                  Is now written correctly in the head of your document, but it doesn't belong there at all.

                  Remove it completely and make the background-position change to

                  SpryMenuBarHorizontal.css instead.

                  • 6. Re: CSS Validation + Divs Text Colour
                    jxlusa Level 2

                    You have a lot of extra code in both indexl.html page and in wizclears.css.

                     

                    You probably don't need any styles in the head of index.html at all. I suggest tathat you go through that and remove anythng you don't need (which is probably everything.) the only problem is, there may be things in there that are overridding what is in wizcleaners.css.

                    You will have to check to see if anything should be put into wizclearners.css instead of the head of the html.

                     

                    Any groups of code that are repeated exactly the same in the css should appear only once. Fo rinstance, in wizcleaners.css you have:


                    .twoColFixLtHdr #container #mainContent p {
                        font-family: Calibri;
                        font-size: 14px;
                    }
                    .twoColFixLtHdr #container #mainContent p {
                        font-family: Calibri;
                        font-size: 15px;
                    }
                    .twoColFixLtHdr #container #column #national_reach p {
                        font-family: Calibri;
                        font-size: 15px;
                    }
                    .twoColFixLtHdr #container #column #satisfaction p {
                        font-family: Calibri;
                        font-size: 15px;
                        text-align: left;
                    }
                    .twoColFixLtHdr #container #mainContent p {
                        font-family: Calibri;
                        font-size: 15px;
                    }
                    .twoColFixLtHdr #container #mainContent p {
                        font-family: Calibri;
                        font-size: 15px;
                    }
                    .twoColFixLtHdr #container #mainContent ul li {
                        font-family: Calibri;
                        font-size: 15px;
                    }
                    .twoColFixLtHdr #container #mainContent p {
                        font-size: 14px;
                    }

                     

                    (Actually there is a lot more, but you get the idea...)

                     

                    This could all be replaced by simply putting


                        font-size: 14px;

                     

                    inside the body {} rules of wizcleaners.css. That will set the default font size for the page to 14px, and you won't hae to specify it at all for paragraphs. (This is assuming you also already put Calibri inside the body {} rule as suggested in the previous post.)

                    • 7. Re: CSS Validation + Divs Text Colour
                      jxlusa Level 2

                      in index.html, you have:


                      <meta name="Keywords" content="cleaning, cleaners, cleaning specialists
                      " />
                      <meta name="Description" content="Wiz Cleaners has a proud heritage of providing domestic, commercial and mobile car cleaning services
                      " />
                      <meta name="Keywords" content="domestic cleaning, domestic cleaning services, domestic house cleaning
                      " />
                      <meta name="Description" content="We offer a range of domestic cleaning services to houses of all sizes
                      " />
                      <meta name="Keywords" content="commercial cleaning, commercial clean, commercial cleaning service, commercial cleaning business
                      " />
                      <meta name="Description" content="We offer a range of commercial cleaning services to businesses of all sizes across every industry
                      " />
                      <meta name="Keywords" content="window cleaning, window cleaners, window cleaning service
                      " />
                      <meta name="Description" content="We provide window cleaning services to businesses and homes nationwide
                      " />
                      <meta name="Keywords" content="mobile car cleaning, car cleaning, clean car
                      " />
                      <meta name="Description" content="we provide mobile car cleaning services for all size vehicles
                      " />
                      <meta name="Keywords" content="cleaning, cleaners, cleaning specialists
                      " />
                      <meta name="Description" content="providing cleaning services nationally
                      " />
                      <meta name="Keywords" content="cleaning, cleaners, cleaning specialists
                      " />
                      <meta name="Description" content="customer satisfaction guarantee across all our services
                      " />
                      <meta name="Cleaners" content="we provide cleaning to homes and offices nationwide. Our services also include mobile car cleaning and carpet cleaning" />

                       

                      The meta tags for "Description" and for "Keywords" should ony appear once each.

                      The description sould be a single thougt that describes you website.

                      The Keywords should be a comma seperated list of words and phrases that you think people might use to find you in a search engine, and that ALSO appear in the text of your page. Maybe something like this to replace all of the above:


                      <meta name="Keywords" content="cleaning, cleaners, cleaning  specialists, window cleaning, window cleaners, mobile car cleaning, car cleaning, clean car" />
                      <meta name="Description" content="We provide cleaning to homes and  offices nationwide. Our services also include mobile car cleaning and  carpet cleaning. Customer satisfaction guaranteed." />

                       

                       

                       

                      There is a lot more to clean up and to learn, but I don't want ot overwhelm you. Nor do I want to rewrite you whole website for you, so I'll just say this. You are doing a great job and you can make this work. It won't be perfect and can always be improved as you learn more, but  it doesn't need to be perfect. Nobodys website is. You can always go back and re-do things as you feel the need.

                      • 8. Re: CSS Validation + Divs Text Colour
                        Natasha06 Level 1

                        Hi there,

                         

                        thank you for your detailed instructions, it really helped me, i appreciate it very much. I have applied all your recomendations to the wizcleaners.css, sprymenuebar.css + home.html to begin with, can you please confirm I have done it correctly? If I have done this correctly, I will go apply to other pages if necessary.

                         

                        Also, in reference to the 'group code' issue you have mentioned below, I tried to look through wizcleaners.css to replace it with the words ' font-size: 14px;' however noticed that there were a number of these group codes. Did you want me to remove all of them (that look alike) completly, or should I be leaving the first ones that appear?

                         

                        If you can please clarify this point, I would appreciate it and if you can please double check that I have applied the rest of the codes correclty, that would be fantastic.

                         

                        Also, while i have your attention, can you please advise what coding I can put into wizcleaners.css to change the colour of my background? so not the background colour of where my content is, but the actual forground of which the whole content is siting on...hope that makes sense?

                         

                        I would like to change the colour of it to contrast with the white front.

                         

                        Thanks again for all your help!

                        • 9. Re: CSS Validation + Divs Text Colour
                          jxlusa Level 2

                          Natasha,

                          The code looks much better, but there is stll quite a bit of un-needed code that makes download time longer and changes much more difficult.


                          The things that I would recommend at this point is to take ALL of the CSS out of your page headers. You may want to save it in a text file in case you find that there is anything you need to add back in.

                           

                          Do Not add it back in to the HTML page however. Only add it back in to the wizcleaners.css stylesheeet, and only if it is needed.

                          If you do it that way, changes will be applied to all pages at once, and you wont have to do anything to "go apply to other pages".

                           

                          For the redundancies, generally you need to leave only the first one. However, for you specific question, you don't even need to leave that one.

                           

                          Instead, put the font-size on the body tag. Then you only need to specify font sizes for anything that you want to be different (right now I don't see anything that is different in that respect.) you will end up with NO specifications for p{ } needed at all.

                          Instead, Your body { } rules will look like this:

                           


                          body  {
                              margin: 0;
                              padding: 0;
                              text-align: center;
                              color: #000000;
                              font-family: Calibri;
                              font-size: 14px;
                              background-color: #FFF;
                          }

                           

                           

                          In the sample above, I changed what you have for the font-size from 100%, to 14 pixels, the size you are specifying many times over in the rest of the stylesheet.

                          Also in red above, is the background color you were asking about.

                          Right now it is specified as #FFF.

                          To change it, you can do use several different methods. Easiest at the begining, it to use words. Only a few colors are accepted as words and I don't know them very well since I don't use that method, but some that work are: white, blue, lightblue, yellow, lightyellow, purple, brown, etc. Simple color words like those generally will work.

                           

                          so you would change

                          background-color: #FFF;

                          to

                          background-color: purple;

                           

                          A method that will give you much more control over the exact color is to use the hex code.

                          This means colors coded in base 16. so that on through 9 use the regular number symbols but ten uses "a" 11 uses "b" and so on up to "f" for 15 (sixteen would be "10")

                           

                          To use the number system, all you really need to know is this:

                          The numbers corespond to how much red, blue, and green are in them.

                          usually there are two digits for each color, for a total of six digits.

                          There is also a shorthand where, if there are only three digits, the browser understands that eachone should be pu there twice, so:

                          #FFF is the same as #FFFFFF

                           

                          the higher the number, the more of that color is used:

                          #FFCC00

                          means the maximum amount of red, somewhat less green, and no blue - which gives you a nice broght yellow color when taken all together.

                           

                          #FFF  (or #ffffff)  is the maximum vlue for all three colors, which gives you white.

                          #000 is none of the colors, which gives you black.

                          • 10. Re: CSS Validation + Divs Text Colour
                            Natasha06 Level 1

                            Ok thank you so much, I changed the colour of my background & font size on css as per your instructions, i appreciate your help very much

                            • 11. Re: CSS Validation + Divs Text Colour
                              jxlusa Level 2

                              It looks much better.

                               

                              The next three thing I would fix are:

                               

                              1. Alternative fonts.

                              YOu have only font Calibri specified in your body tag. If any of your visitors do not have Calibri on their computer, their browser will just choose whatever the default font is, Often that's Times New Roman.

                               

                              You should specify some fallback fonts more similar to calibri. to this, change you rbody rules from this:

                               

                               

                              body  {

                                  margin: 0;

                                  padding: 0;

                                  text-align: center;

                                  color: #000000;

                                  font-family: Calibri;

                                  font-size: 14px;

                                  background-color:#C8C8C8;

                              }

                               

                              to this:

                               

                               

                              body  {

                                  margin: 0;

                                  padding: 0;

                                  text-align: center;

                                  color: #000000;

                                  font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;

                                  font-size: 14px;

                                  background-color:#C8C8C8;

                              }

                               

                              The other fonts will not be used unless Calibri is not available on the computer. Once that is done, you will also want ot remove the line

                               

                              font-family: Calibri;

                               

                              from EVERY other place it appears in your stylesheet.

                               

                               

                              2. You still have an extra Description and an extra Keywords metatag. Also, there are still extras css styles in the HTML that don't do anything.

                               

                              This entire section can be removed from the head of your home page html:

                               

                              <style type="../Templates/text/css"><!--

                              a img { border: none; }

                              body,td,th {

                                  font-family: Calibri;

                                  font-size: 14px;

                              }

                              .twoColFixLtHdr #container #mainContent h3 {

                                  font-size: 15px;

                                  font-weight: bold;

                              }

                              #apDiv1 {

                                  position:absolute;

                                  left:695px;

                                  top:646px;

                                  width:241px;

                                  height:274px;

                                  z-index:1;

                              }

                              #apDiv2 {

                                  position:absolute;

                                  left:1336px;

                                  top:630px;

                                  width:294px;

                                  height:281px;

                                  z-index:1;

                              }

                              #apDiv3 {

                                  position:absolute;

                                  left:95px;

                                  top:570px;

                                  width:244px;

                                  height:286px;

                                  z-index:2;

                                  background-color: #FFF;

                                  text-align: left;

                                  clip: rect(auto,1000px,auto,auto);

                              }

                              #apDiv4 {

                                  width:248px;

                                  height:287px;

                                  z-index:3;

                                  background-color: #FFF;

                                  text-align: left;

                                  position: absolute;

                                  float: left;

                                  left: 1362px;

                                  top: 653px;

                                  visibility: visible;

                                  overflow: visible;

                              }

                              -->

                              </style>

                              <meta name="domestic cleaning" content="" />

                              <meta name="Description" content="domestic cleaning" />

                              <meta name="Keywords" content="domestic cleaning" />

                               

                               

                              3. Confusing Redundencies

                               

                              You still have things like this in your stylesheet, ALL of which could be deleted since none of it does anything that is not already done by the rules for the body tag:

                               

                              .twoColFixLtHdr #container #mainContent p {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #mainContent p {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #mainContent p {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #mainContent p {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #mainContent p {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #mainContent {

                                  font-family: Calibri;

                                  font-size: 14px;

                              }

                              .twoColFixLtHdr #container #mainContent h3 {

                                  font-family: Calibri;

                              }

                              .twoColFixLtHdr #container #sidebar1 h3 {

                                  font-size: 14px;

                              }

                               

                               

                              4. Sidebar Images

                               

                              All your sidebar images are larger than specified. You are using larg images, then re-sizing them in the HTML. This causes several problems. 1. the images take longer to download than neccessary. 2. the images are squished in one direction or another. 3. the images are pixelated, they show up as much poorer quality than they really are.

                              If you dont have any photo editing software that you can use to make your sidebar photos 168 pixels wide, you can use an online photo editor such as:

                              http://www.picnik.com/