CodingForums.com - Internet Explorer Format Help

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Internet Explorer Format Help (http://www.codingforums.com/showthread.php?t=224309)

Internet Explorer Format Help

I'm building a website and it seems to work well in Chrome and Firefox but when it comes to IE (programmer's bane), it doesn't work. It seems that whenever I try to position something in IE, it always goes below the "list" of images that I have. Here's my html code for the contact page (note: I haven't done any of the meta tags or anything -- I'm going to do that later when I get it online. For now it's just the basic code):

Code:

<html>



  <head>



    <link rel="stylesheet" type="text/css" href="stylesheet.css" />



  </head>



  <body>



    <ul id="stoplight">

      <li id="stoplight1"><a href="Index.html"></a></li>

      <li id="stoplight2"><a href="AboutUs.html"></a></li>

      <li id="stoplight3"><a href="ContactUs.html"></a></li>

    </ul>

    



    <div id="stoplightbottom">

      <img src="stoplightbottom.png"/>

    </div>

    

    <div id="smartboard">

      <img src="smartboard.png"/>

    </div>



    <div id="specials">

      <img src="specials.png"/>

    </div>



    <div id="avsign">

      <img src="AVAvenueLeftSign.png" />

    </div>



    <div id="states">

      <img src="states.png" />

    </div>



    <div id="contractorstext">

      <span class="blackfont1">Technology Systems Contractors Power Limited Technicians</span>

    </div>





    <div id="company1">

      <img src="company1.png" height="30" width="100">

    </div>



    <div id="company2">

      <img src="company2.png" height="30" width="100">

    </div>



    <div id="company3">

      <img src="company3.png" height="30" width="100">

    </div>



    <div id="company4">

      <img src="company4.png" height="30" width="100">

    </div>



    <div id="company5">

      <img src="company5.png" height="30" width="100">

    </div>





    <div id="contactimage">

      <img src="contactimage.png" width="650" height="450">

    </div>



    <div id="contactinfo">

      <img src="contactinfo.png" width="650" height="450">

    </div>







  </body>



</html>

And here's my CSS (most of it refers to other pages):

Code:

  html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,

  small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, 

  form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 

  {

     margin: 0;

     padding: 0;

     border: 0;

     outline: 0;

     font-size: 100%;

     vertical-align: baseline;

     background: transparent;

  } 

  body    { line-height: 1; }

  ol, ul    { list-style: none; }

  blockquote, q { quotes: none; }

  :focus        { outline: 0; }

  ins     { text-decoration: none; }

  del     { text-decoration: line-through; }

  table    { border-collapse: collapse; border-spacing: 0; }

  textarea      { overflow:auto; }









  ul#stoplight {



                margin: 0 840;

                width:0px;

                height:0px;

                list-style:none;



  }



  ul#stoplight li {

  

                display:inline;



  }



  ul#stoplight li a {



                float:left;

                text-indent:-9999px;

                text-decoration:none;





  }



  ul#stoplight li#stoplight1 a {



                width:178px;

                height:82px;

                background:url(sprites.png) no-repeat 0 0;



  }



  ul#stoplight li#stoplight1 a:hover {



                background-position: -179px 0;



  }



  ul#stoplight li#stoplight2 a {



                width:179px;

                height:63px;

                background:url(sprites.png) no-repeat 0 -82px;



  }



  ul#stoplight li#stoplight2 a:hover {



                background-position: -359px -82px;



  }



  ul#stoplight li#stoplight3 a {



                width:179px;

                height:66px;

                background:url(sprites.png) no-repeat 0 -145px;

  }



  ul#stoplight li#stoplight3 a:hover {



                background-position: -538px -145px;

  }





  body {

  

                background-image:url('GradientBackground.png');  

                background-repeat:no-repeat;

                background-position:0px 0px;



  }







  .arial {font-family: Arial;}

  .tahoma {font-family: Tahoma;}

  .verdana {font-family: Verdana;}

  .underline {text-decoration: underline}

  .blackfont1 {font-size: 16px;}

  .whitetext1 {color: #F2F2F2; font-size: 30px;}

  .whitetext2 {color: #EBEBEB; font-size: 17px;}

  .whitetext3 {color: #DBDBDB; font-size: 18px;}









  #background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}

  #stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;} 

  #smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}

  #specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}

  #text2 {margin: 600 430; position: absolute; z-index: 1; visibility: show;}

  #avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}

  #states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}

  #contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 200;}

  #company1 {margin: 220 200; position: absolute; z-index: 1; visibility: show;}

  #company2 {margin: 220 300; position: absolute; z-index: 1; visibility: show;}  

  #company3 {margin: 220 400; position: absolute; z-index: 1; visibility: show;}

  #company4 {margin: 220 500; position: absolute; z-index: 1; visibility: show;}

  #company5 {margin: 220 600; position: absolute; z-index: 1; visibility: show;}





  #contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}

  #contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}



  #greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

  #greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}



  #aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}

  #aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}



  #list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}

It has this problem on every page, but I just listed the contact page for simplicity. Here's two screenshots of the problem:

Internet Explorer Screenshot: http://i986.photobucket.com/albums/a...enueerror2.jpg

Chrome Screenshot: http://i986.photobucket.com/albums/a...enueerror1.jpg

As you can see, it separates the top of the stoplight with the rest of the page. Can anyone help me fix this problem? Thanks in advance everyone :).

It is a good idea to start your CSS with this piece of code.

*{margin:0;
padding:0;}

It will reset a browser before the main code is read.

Give it a try.

Frank

My CSS now reads:

Code:

  * {margin:0; padding:0;}  



  html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,

  small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, 

  form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 

  {

     margin: 0;

     padding: 0;

     border: 0;

     outline: 0;

     font-size: 100%;

     vertical-align: baseline;

     background: transparent;

  } 

  body    { line-height: 1; }

  ol, ul    { list-style: none; }

  blockquote, q { quotes: none; }

  :focus        { outline: 0; }

  ins     { text-decoration: none; }

  del     { text-decoration: line-through; }

  table    { border-collapse: collapse; border-spacing: 0; }

  textarea      { overflow:auto; }









  ul#stoplight {



                margin: 0 840;

                width:0px;

                height:0px;

                list-style:none;



  }



  ul#stoplight li {

  

                display:inline;



  }



  ul#stoplight li a {



                float:left;

                text-indent:-9999px;

                text-decoration:none;





  }



  ul#stoplight li#stoplight1 a {



                width:178px;

                height:82px;

                background:url(sprites.png) no-repeat 0 0;



  }



  ul#stoplight li#stoplight1 a:hover {



                background-position: -179px 0;



  }



  ul#stoplight li#stoplight2 a {



                width:179px;

                height:63px;

                background:url(sprites.png) no-repeat 0 -82px;



  }



  ul#stoplight li#stoplight2 a:hover {



                background-position: -359px -82px;



  }



  ul#stoplight li#stoplight3 a {



                width:179px;

                height:66px;

                background:url(sprites.png) no-repeat 0 -145px;

  }



  ul#stoplight li#stoplight3 a:hover {



                background-position: -538px -145px;

  }





  body {

  

                background-image:url('GradientBackground.png');  

                background-repeat:no-repeat;

                background-position:0px 0px;



  }







  .arial {font-family: Arial;}

  .tahoma {font-family: Tahoma;}

  .verdana {font-family: Verdana;}

  .underline {text-decoration: underline}

  .blackfont1 {font-size: 16px;}

  .whitetext1 {color: #F2F2F2; font-size: 30px;}

  .whitetext2 {color: #EBEBEB; font-size: 17px;}

  .whitetext3 {color: #DBDBDB; font-size: 18px;}

  











  #background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}

  #stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;} 

  #smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}

  #specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}

  #text2 {margin: 600 430; position: absolute; z-index: 1; visibility: show;}

  #avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}

  #states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}

  #contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 200;}

  #company1 {margin: 220 200; position: absolute; z-index: 1; visibility: show;}

  #company2 {margin: 220 300; position: absolute; z-index: 1; visibility: show;}  

  #company3 {margin: 220 400; position: absolute; z-index: 1; visibility: show;}

  #company4 {margin: 220 500; position: absolute; z-index: 1; visibility: show;}

  #company5 {margin: 220 600; position: absolute; z-index: 1; visibility: show;}





  #contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}

  #contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}



  #greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

  #greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}



  #aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}

  #aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}



  #list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}

I reopened the file in Internet Explorer and Firefox. It looks like the same result. Assuming I did it right, the code doesn't seem to be working :S. Thanks anyway.

Btw I still need help on this and my site is live if you wanna see it at www.avavenue.com.

You have no doctype on your page. IE will (generally) not display a page correctly without one. It's possibly something else, but that's the first thing you need to fix.

Your "http://www.avavenue.com/Images/GradientBackground.png" should be 1 pixel wide, and in your CSS you can do:

Code:

body {

                  background: url('GradientBackground.png') repeat-x top;

}

That will save you a lot of bandwidth, as the image is 2MB at the moment.

Also, like SB65 said, use a doctype, it will make it more consistent with chrome/firefox:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also, don't position the stop light by using margin, instead you should be making a container for the page the width you want, then position it in the center. Then you can do float right for the stop light and pole, just make sure to set the width of the divs.

Well, I've been busy all day doing errands and I've just sat down to work on the website again. As you can tell, I'm sort of a noob at websites (still) so I'm having a bit of trouble with the doctypes. I used all the ones that were recommended on the link that sb65 gave, but then it displayed all the images over each other like it was ignoring my css.

Also, wojjie, I'm a bit new to containers too. Do you think I should position my specials and smartboard images left of the stoplight? How would I position all the images inside the container (besides the ones that can be centered, moved to the left, etc)?

Anyway, thanks everyone for all your help so far.

By the way, my html pages now read:

Code:

<html>



  <head>



    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems.">

    <meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12">



    <title>AV Avenue</title>



    <link rel="stylesheet" type="text/css" href="stylesheet.css">



  </head>



  <body>



    <ul id="stoplight">

      <li id="stoplight1"><a href="index.html"></a></li>

      <li id="stoplight2"><a href="aboutus.html"></a></li>

      <li id="stoplight3"><a href="contactus.html"></a></li>

    </ul>

    



    <div id="stoplightbottom">

      <img src="Images/Home Page/StoplightBottom.png" alt="">

    </div>

    

    <div id="smartboard">

      <img src="Images/Home Page/Smartboard.png" alt="">

    </div>



    <div id="specials">

      <img src="Images/Home Page/AprilSpecials.png" alt="Check out our special services for April!">

    </div>



    <div id="text2">

      <img src="Images/Home Page/Text2.png" alt="">

    </div>



    <div id="avsign">

      <img src="Images/Home Page/AVAvenueLeftSign.png" alt="">

    </div>



    <div id="states">

      <img src="Images/Home Page/States.png" alt="">

    </div>



    <div id="contractorstext">

      <span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>

    </div>





    <div id="company1">

      <img src="Images/Home Page/Company1.png" height="30" width="100" alt="">

    </div>



    <div id="company2">

      <img src="Images/Home Page/Company2.png" height="30" width="100" alt="">

    </div>



    <div id="company3">

      <img src="Images/Home Page/Company3.png" height="30" width="100" alt="">

    </div>



    <div id="company4">

      <img src="Images/Home Page/Company4.png" height="30" width="100" alt="">

    </div>



    <div id="company5">

      <img src="Images/Home Page/Company5.png" height="30" width="100"alt="">

    </div>











    <div id="flashmovie">



      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="600" height="400" id="AV_Ave" align="middle">



        <param name="movie" value="AV_Ave.swf">

        <param name="quality" value="high">

        <param name="bgcolor" value="#000000">

        <param name="play" value="true">



        <param name="loop" value="true">

        <param name="wmode" value="window">

        <param name="scale" value="showall">

        <param name="menu" value="true">

        <param name="devicefont" value="false">

        <param name="salign" value="">

        <param name="allowScriptAccess" value="sameDomain">





        <object type="application/x-shockwave-flash" data="AV_Ave.swf" width="600" height="400">



          <param name="movie" value="AV_Ave.swf">

          <param name="quality" value="high">

          <param name="bgcolor" value="#000000">

          <param name="play" value="true">



          <param name="loop" value="true">

          <param name="wmode" value="window">

          <param name="scale" value="showall">

          <param name="menu" value="true">

          <param name="devicefont" value="false">

          <param name="salign" value="">

          <param name="allowScriptAccess" value="sameDomain">         



            <a href="http://www.adobe.com/go/getflash">

              <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">

            </a>



        </object>



      </object>



    </div>





  </body>



</html>

Code:

<html>



  <head>



    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems." />

    <meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12" />





    <title>AV Avenue</title>



    <link rel="stylesheet" type="text/css" href="stylesheet.css" />



  </head>



  <body>



    <ul id="stoplight">

      <li id="stoplight1"><a href="index.html"></a></li>

      <li id="stoplight2"><a href="aboutus.html"></a></li>

      <li id="stoplight3"><a href="contactus.html"></a></li>

    </ul>

    



    <div id="stoplightbottom">

      <img src="Images/About Us/StoplightBottom.png"/>

    </div>

    

    <div id="smartboard">

      <img src="Images/About Us/Smartboard.png"/>

    </div>



    <div id="specials">

      <img src="Images/About Us/AprilSpecials.png"/>

    </div>



    <div id="avsign">

      <img src="Images/About Us/AVAvenueLeftSign.png" />

    </div>



    <div id="states">

      <img src="Images/About Us/States.png" />

    </div>



    <div id="contractorstext">

      <span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>

    </div>



    <div id="greenbackground">

      <img src="Images/About Us/GreenBackground.png" height="500" width="630"/>

    </div>



    <div id="aboutusheader" width="250">

      <span class="whitetext1 tahoma">Classroom Technology Specialists</span>  

    </div>



    <div id="aboutusparagraph">

      <span class="whitetext3 arial">AV Avenue has been specializing in K-12 and Higher Education for nearly 10 years. We provide audio/video equipment sales, systems installations, and services for existing systems. While our focus is in classroom technology, we also offer the following services below:

      </span>

    </div>



    <div id="list1">

      <span class="whitetext2 arial underline">Classrooms</span>

      <ul>

        <li><span class="whitetext2 arial">Projectors</span></li>

        <li><span class="whitetext2 arial">SMART Boards</span></li>

        <li><span class="whitetext2 arial">Audio Systems</span></li>

        <li><span class="whitetext2 arial">Sound Field Systems</span></li>

        <li><span class="whitetext2 arial">Control Systems</span></li>

        <li><span class="whitetext2 arial">Acoustics</span></li>

      </ul>

      </br>



      <span class="whitetext2 arial underline">Building Wide</span>

      <ul>

        <li><span class="whitetext2 arial">Video Surveillance</span></li>

        <li><span class="whitetext2 arial">Paging</span></li>

      </ul>

      </br>





      <span class="whitetext2 arial underline">Cafeteria</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

      </ul>



    </div>



    <div id="list2">

      <span class="whitetext2 arial underline">Auditorium</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

        <li><span class="whitetext2 arial">Video Displays</span></li>

        <li><span class="whitetext2 arial">Video Recordings</span></li>

      </ul>

      </br>



      <span class="whitetext2 arial underline">Library</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

      </ul>

      </br>





      <span class="whitetext2 arial underline">Music Rooms</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

        <li><span class="whitetext2 arial">Video Systems</span></li>

      </ul>



    </div>



    <div id="list3">

      <span class="whitetext2 arial underline">Gymnasium</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

        <li><span class="whitetext2 arial">Video Displays</span></li>

        <li><span class="whitetext2 arial">Video Recording</span></li>

      </ul>

      </br>



      <span class="whitetext2 arial underline">Swimming Pool</span>

      <ul>

        <li><span class="whitetext2 arial">Acoustics</span></li>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

      </ul>

      </br>





      <span class="whitetext2 arial underline">Athletic Fields</span>

      <ul>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

        <li><span class="whitetext2 arial">Video Recording</span></li>

        <li><span class="whitetext2 arial">Scoreboards</span></li>

      </ul>

      </br>



      <span class="whitetext2 arial underline">Dance Studio</span>

      <ul>

        <li><span class="whitetext2 arial">Sound Systems</span></li>

        <li><span class="whitetext2 arial">Acoustics</span></li>

      </ul>



    </div>



  </body>



</html>

Code:

<html>



  <head>



    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <meta name="description" content="AV Avenue is a K-12 Classroom Technology Specialists company. We provide audio/video equipment sales, systems installations and service of existing systems." />

    <meta name="keywords" content="av avenue, audio, video, audio visual, classroom, education, installation, smartboard, k-12" />





    <title>AV Avenue</title>



    <link rel="stylesheet" type="text/css" href="stylesheet.css" />



  </head>



  <body>



    <ul id="stoplight">

      <li id="stoplight1"><a href="index.html"></a></li>

      <li id="stoplight2"><a href="aboutus.html"></a></li>

      <li id="stoplight3"><a href="contactus.html"></a></li>

    </ul>

    



    <div id="stoplightbottom">

      <img src="Images/Contact Us/StoplightBottom.png"/>

    </div>

    

    <div id="smartboard">

      <img src="Images/Contact Us/Smartboard.png"/>

    </div>



    <div id="specials">

      <img src="Images/Contact Us/AprilSpecials.png"/>

    </div>



    <div id="avsign">

      <img src="Images/Contact Us/AVAvenueLeftSign.png" />

    </div>



    <div id="states">

      <img src="Images/Contact Us/States.png" />

    </div>



    <div id="contractorstext">

      <span class="blackfont1 comicsansms">Technology Systems Contractors Power Limited Technicians</span>

    </div>





    <div id="contactimage">

      <img src="Images/Contact Us/ContactImage.png" width="650" height="450">

    </div>



    <div id="contactinfo">

      <img src="Images/Contact Us/ContactInfo.png" width="650" height="450">

    </div>







  </body>



</html>

And my CSS reads:

Code:

  * {margin:0; padding:0;}  



  html, body, div, span,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp,

  small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, 

  form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 

  {

     margin: 0;

     padding: 0;

     border: 0;

     outline: 0;

     font-size: 100%;

     vertical-align: baseline;

     background: transparent;

  } 

  body    { line-height: 1; }

  ol, ul    { list-style: none; }

  blockquote, q { quotes: none; }

  :focus        { outline: 0; }

  ins     { text-decoration: none; }

  del     { text-decoration: line-through; }

  table    { border-collapse: collapse; border-spacing: 0; }

  textarea      { overflow:auto; }









  ul#stoplight {



                margin: 0 840;

                width:0px;

                height:0px;

                list-style:none;



  }



  ul#stoplight li {

  

                display:inline;



  }



  ul#stoplight li a {



                float:left;

                text-indent:-9999px;

                text-decoration:none;





  }



  ul#stoplight li#stoplight1 a {



                width:178px;

                height:82px;

                background:url(Images/Stoplights.png) no-repeat 0 0;



  }



  ul#stoplight li#stoplight1 a:hover {



                background-position: -221px 0;



  }



  ul#stoplight li#stoplight2 a {



                width:178px;

                height:63px;

                background:url(Images/Stoplights.png) no-repeat 0 -82px;



  }



  ul#stoplight li#stoplight2 a:hover {



                background-position: -221px -83px;



  }



  ul#stoplight li#stoplight3 a {



                width:179px;

                height:66px;

                background:url(Images/Stoplights.png) no-repeat 0 -145px;

  }



  ul#stoplight li#stoplight3 a:hover {



                background-position: -221px -144px;

  }





  body {

  

                background-image: url('Images/GradientBackground.png');

                background-repeat: repeat-x;



  }







  .arial {font-family: Arial;}

  .tahoma {font-family: Tahoma;}

  .verdana {font-family: Verdana;}

  .comicsansms {font-family: Comic Sans MS;}

  .underline {text-decoration: underline}

  .blackfont1 {font-size: 16px;}

  .whitetext1 {color: #F2F2F2; font-size: 30px;}

  .whitetext2 {color: #EBEBEB; font-size: 17px;}

  .whitetext3 {color: #DBDBDB; font-size: 18px;}

  











  #background {top: 2.7em; left: 4em; position:absolute; z-index: -2; visibility: show;}

  #stoplightbottom {margin: 211 840; position: absolute; z-index: 1; visibility: show;} 

  #smartboard {margin: 230 970; position: absolute; z-index: 1; visibility: show;}

  #specials {margin: 410 970; position: absolute; z-index: 1; visibility: show;}

  #text2 {margin: 650 155; position: absolute; z-index: 3; visibility: show;}

  #avsign {margin: -5 50; position: absolute; z-index: 1; visibility: show;}

  #states {margin: 90 540; position: absolute; z-index: 1; visibility: show;}

  #contractorstext {margin: 30 530; position: absolute; z-index: 1; visibility: show; width: 250;}

  #company1 {margin: 210 250; position: absolute; z-index: 1; visibility: show;}

  #company2 {margin: 210 350; position: absolute; z-index: 1; visibility: show;}  

  #company3 {margin: 210 450; position: absolute; z-index: 1; visibility: show;}

  #company4 {margin: 210 550; position: absolute; z-index: 1; visibility: show;}

  #company5 {margin: 210 650; position: absolute; z-index: 1; visibility: show;}





  #contactinfo {margin: 270 170; position: absolute; z-index: 2; visibility: show;}

  #contactimage {margin: 270 170; position: absolute; z-index: 1; visibility: show;}



  #greenbackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}

  #greybackground {margin: 230 170; position: absolute; z-index: 1; visibility: show;}



  #aboutusheader {margin: 240 260; position: absolute; z-index: 2; visibility: show; width: 600;}

  #aboutusparagraph {margin: 290 180; position: absolute; z-index: 2; visibility: show; width: 630;}



  #list1 {margin: 400 190; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list2 {margin: 400 400; position: absolute; z-index: 2; visibility: show; width: 200;}

  #list3 {margin: 400 610; position: absolute; z-index: 2; visibility: show; width: 200;}



  #flashmovie {margin: 240 200; position: absolute; z-index: 2; visibility: show; width: 200;}

Any other suggestions or corrections for any of my code is welcomed. Thanks again everyone for your time.

I would start by having one big container, with two containers inside, the left content in one, and the stop light with menu floating on the right.

Then I would put the stop light like you have it, and put the pole as a background of the rest of the right, positioning the rest of it with paddings/margins in that container.

Though the way I would do it would require some testing/tweaking.

ie:

Code:

<body>

<div class="page">

  <div class="logo">

     ... logo with top part of pole and map (since logos really should be at the top of html pages, dont forget to put an anchor on the logo to your home page ...

  </div>

  <div class="rightSide">

     <div id="stopLight">

    ... stop light ...

     </div>

     <div id="stopLightPole">

        <div id="poleTop"><img src=".." ... /></div>

        <img class="board" src="..." width=".." height="..." />

        <div class="menu">

               ... your menu / specials ...

        </div>



     </div>

   <div class="leftSide">

      <div class="pole">&nbsp;</div>

      <div class="content">

         .. small logos ...

         ... flash video ..

         ... classroom technology specialists ...

      </div>

   </div>

</div>

Then the CSS would be something like:

Code:

body{margin:0;padding:0;text-align:center;background:url('verticalgradient.png') repeat-x top #aaa /*or whatever the color code the gradient ends at*/;  ... }

.page{width:980px;margin:0 auto;}

.logo {float:left; width:660px;/*assuming right side is 300px and we are leaving atleast 10px of space in case*/}

.rightSide{width:300px;float:right; ...}

#stopLightPole{background: url(pole.png) repeat-y left;position:relative}

#stopLightPole .poleTop{position:absolute;top:0px}

.rightSide .board{margin:...}

.rightSide .menu{margin:... }



.leftSide {width:670px; ... } /* you might need float:left, not sure, have to test it, possibly test the width */

.leftSide .pole {background: url... repeat-y left; ...}

etc

Sorry, was a quick rough example just to give you some ideas.

Oh cool, that looks good, I'll have to mess around with it a bit. Any idea why my doctype is causing my css to be ignored?

Essentially tells the browser (IE specifically) how to render the page or what kind of page it is.

There is a good explanation I read a while back on the internet, basically stating that IE defaults to a certain mode/rendering that messes stuff up, probably meant for older sites that expect IE to work a certain way?

No, I mean whenever I use a doctype, all of my images are displayed at the top left corner of the screen (probably because my css is ignored). I can't figure out why and I've tried several doctypes now :S.

In the absence of a doctype IE will display in "quirks mode" - here's an explanation.