Page CSS Markup. New at it. Can someone help me point out what is considered bad?

HTML & CSS
1

Hello,

I am new at web development and have done tons of reading and walked with some good and then some uncertain knowledge. I marked up a page and validated it with W3 Validator. However I would highly appreciate it if someone can point out if there any mistakes or NO NOs which I would highly appreciate it.

You can check the layout here:
http://jsbin.com/ikakiv/10/

CSS


body
    {
      margin:0;
      padding:0;
      background:rgba(255,255,255,1.0);
      font-family:'arial';
      font-size:.8em;
    }

    .wrapper
    {
      overflow:auto;
      width:100%;
      height:100%;
      background:rgba(85,85,85,0);
    }

    .siteWrapper
    {
      margin:0 auto;
      padding:.5em; width:80%;
      height:auto;
      background:rgba(255,255,255,1);
    }

    .header
    {
      padding:.5em 0 .5em 0;
      width:100%;
      height:auto;
      background:rgba(135,125,125,0);
    }

    .header ul {margin:0; padding:0; text-align:right;}
    .header li {list-style-type:none; display:inline;}
    .header li a { display:inline-block; margin:0 1em; text-decoration: none; color:#ff6644; curson:hand; }

    .banner
    {
        width:100%;
        min-height: 350px;
        height:auto !important;
        height: 350px;
        margin:.2em 0 .5em 0;
        background:rgba(240,240,240,.5);
    }

    .content
    {
        width:100%;
        min-height: 200px;
        height:auto !important;
        height: 200px;
        background:rgba(240,240,240,.5);
    }

    .footerWrapper
    {
        overflow:auto;
        margin:0;
        padding:0;
        width:100%;
        min-height:100px;
        height:auto !important;
        height:100px;
        background:rgba(0,0,0,.5);
    }

    .footer
    {
      margin:0 auto;
      padding:1em;
      width:79%;
      height:auto;
      background:rgba(255,255,255,0);
    }

    .textCenter
    {
        text-align:center;
    }

HTML


<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
    </head>
      <body>

      <!--   WRAPPER  -->
        <div id="wrapper" class="wrapper">

        <!--    SITE WRAPPER    -->
          <div id="siteWrapper" class="siteWrapper">

          <!--    HEADER -->
          <div id="header" class="header">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div><!-- HEADER ENDS HERE -->

          <!--  BANNER -->
          <div id="banner" class="banner">
              BANNER GOES HERE
          </div><!--   BANNER  -->

          <!--    CONTENT    -->
            <div id="content" class="content">

            CONTENT HERE

          </div><!--   CONTENT ENDS  -->
        </div><!-- SITE WRAPPER -->

        <!-- FOOTER WRAPPER -->
        <div id="footerWrapper" class="footerWrapper">

        <!-- FOOTER -->
          <div id="footer" class="footer textCenter">
          FOOTER
        </div><!-- FOOTER -->

        </div><!-- FOOTER WRAPPER ENDS    -->


      </div><!-- WRAPPER END -->

    </body>
    </html>
2

The first thing that jumps out at me is all the height settings, such as:

min-height: 200px; 
height:auto !important; 
height: 200px;

That seems to me a bit like betting on every horse in the race. Height: auto is the default, so it’s rarely needed. It’s not clear why you’d insist that auto is important and then set a height in px. It’s rarely worthwhile or useful to set a height at all on page elements.

3

Hello Ralph.m

Thank you so much for pointing it out. Last week I was on an interview, I was asked to markup a page which I did just like what I have done here. I was told that this mark up is the ugliest markup ever written, I was told to not ever look into web development by a certain well-known figure in the industry. I can sense egos from miles, and didn’t let it bother me, however I did wanted to see what others might see in this ugly markup and help me learn more.

With regards to min-height, I wanted to make sure that the page renders as it should in most of the popular browsers such IE7-9 & Opera.

Thank you,

4

Whoever told you that is just king-sized @sshole, nothing else. Nobody with any integrity would make a comment like that—especially about your code, which is quite OK. Sure, it can be improved a bit, but you won’t have to look at many posts in this forum to see how bad—I mean really bad—a lot of coding can be out there.

Min-height is always fine to use, but if you also have a height set, it’s redundant. Use one or the other. And there’s also no point in setting the height twice on an element. That’s all I was really saying. In general, try to avoid setting heights at all. All it takes is for the end user to have their fonts set a little larger than usual to smash your layout to pieces.

(In my early web design days, I went to visit a potential client with a list of web sites to show him as nice examples that might inspire him. To my horror, each of the sites was horribly broken on all his office computers. Turns out, he and all his employees had decided to set their system font size to something larger than the default, as none of them liked the horribly small type that was common on their screens. It was a truly awful wake up call for me about how bad an idea it is to set heights on anything.)

5

Thank you Ralph for your advice and kind words. I appreciate all your help.

6

Hmm.

It could be improved slightly, refined and simplified - as Ralph noted - though it’s not anything I would call diabolical or “really ugly”, and if they [interviewers] rank that as the most hideousness thing ever going… Then obviously they don’t have a clue what on earth they are taking about; regardless of whether they are so-called “famous”. Plus certainly that person [figure] has NEVER helped answer many questions in a thriving web development forum.

Let alone they gave you; a completely unprofessional, unintelligent response and treatment. Anyway; those who live inside their egos are continually bewildered. So I am glad you could see beyond their other inflated egos. Keep on practising and you will get better don’t be deterred by some throwaway feedback comments from an interview.

Perhaps they were expecting to see a little more structure in the markup like headings and paragraph outlines more on the lines of: Spot the Error 3: Calling all Sleuths! Obviously the code in the competition is purposely riddled with many errors and lacking in proper semantics but it is a little more fleshed out with different elements and “dummy text”.

7

You should have at least one basic fall-back font family. It’s not likely that someone won’t have Arial, but I think it’s good practice.

There’s a small typo in the “header li a” - cursor, not curson.

rgba isn’t going to work in IE 7 or 8. If you’re going for standard colors, you could just write their names or hex codes. The alpha value is not really needed. Maybe I’m missing some effect you’re trying to create?


body {font-family:'arial', san-serif; background:white;}
.header li a {cursor:hand;}
.footer{background:#7f7f7f;}
8

I cannot thank you enough for looking over my markup and highly appreciate all your feedback, it will help me fill the lacking gaps within my learning.