10 Replies Latest reply on Mar 18, 2010 1:32 PM by EricFight

    Invalid HTML Problem..

    EricFight

      Ok, so here's my problem. My site looks good in dreamweaver and when i test it. I do have a couple browser compatability errors. But i don't know any other way to get them positioned like i want. Here's my browser errors

       

      1) Expanded Bob Problem

      Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

       

      2)Double Float Margin Bug

      When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.

       

      These are the 2 errors. But my index is uploaded to my hosting account(godaddy.com) and nothin show sup. then i called them to trouble shoot and they said that my html file is not a valid html file. How is this? I'm still not too familiar with dreamweaver. Can someone please help me? I will past my code here

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Fun Destin Condo Home</title>
      <style type="text/css">
      <!--
      body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      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;
      background-color: #003C74;
      background-image: url(background.jpg);
      background-repeat: no-repeat;
      margin-left: 0px;
      }
      .thrColAbsHdr #container {
      position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
      width: 780px;
      margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
      border: 1px solid #000000;
      text-align: left;
      background-color: #FFC;
      }

      /* Tips for absolutely positioned sidebars with header and footer:
      1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
      2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
      3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
      4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
      */
      .thrColAbsHdr #header {
      height: 354px;
      background-image: url(Header.png);
      padding-top: 0;
      padding-right: 10px;
      padding-bottom: 0;
      padding-left: 20px;
      background-repeat: no-repeat;
      background-position: left top;
      }
      .thrColAbsHdr #header h1 {
      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
      padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
      }
      .thrColAbsHdr #sidebar1 {
      position: absolute;
      top: 356px;
      left: 2px;
      width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
      padding: 15px 10px 15px 20px;
      border-right-style: solid;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-color: #FC0;
      border-right-color: #FC0;
      border-bottom-color: #FC0;
      border-left-color: #FC0;
      }
      .thrColAbsHdr #sidebar2 {
      position: absolute;
      top: 356px;
      right: 0;
      width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
      padding: 15px 10px 15px 20px;
      border-left-style: solid;
      border-top-color: #FC0;
      border-right-color: #FC0;
      border-bottom-color: #FC0;
      border-left-color: #FC0;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      }
      .thrColAbsHdr #mainContent {
      margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
      padding: 0 10px;
      }
      .thrColAbsHdr #footer {
      padding: 0 10px 0 20px;
      height: 40px;
      background-color: #DDDDDD;
      background-image: url(Nav.png);
      }
      .thrColAbsHdr #footer p {
      margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
      padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
      font-size: 14px;
      font-style: normal;
      text-align: center;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
      float: right;
      margin-left: 50px;
      padding-left: 50px;
      top: 0px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
      float: left;
      height: 50px;
      margin-top: 80px;
      margin-left: 260px;
      width: 500px;
      background-image: url(navbig.png);
      text-align: center;
      font-size: 16px;
      font-style: normal;
      text-decoration: none;
      font-weight: bold;
      font-family: Verdana, Geneva, sans-serif;
      background-position: top;
      padding-top: 20px;
      background-repeat: no-repeat;
      color: #000;
      }
      a:link {
      color: #000;
      }
      a:hover {
      color: #FF0;
      }
      a:active {
      color: #FFF;
      }
      a:visited {
      color: #0F0;
      }
      -->
      </style><!--[if IE 5]>
      <style type="text/css">
      /* place css box model fixes for IE 5* in this conditional comment */
      .thrColAbsHdr #sidebar1 { width: 180px; }
      .thrColAbsHdr #sidebar2 { width: 190px; }
      </style>
      <![endif]--></head>

      <body class="thrColAbsHdr">

      <div id="container">
        <div id="header">
          <div class="fltlft"><a href="../../Flordia Site/Index.html">Home</a> | <a href="../../Flordia Site/Rates.html">Rates</a> | <a href="../../Flordia Site/Amenities.html">Amenities</a> | <a href="../../Flordia Site/Attractions.html">Attractions</a> | <a href="../../Flordia Site/Directions.html">Directions</a></div>
          <h1> </h1>
        <!-- end #header --></div>
        <div id="sidebar1">
        <h3>Calender will go here</h3>
          <p>Show availablity days and then will have a book now button and then it will link to a pay pal account</p>
          <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
        <!-- end #sidebar1 --></div>
        <div id="sidebar2">
          <h3>Pictures will go here</h3>
          <p>THere will be a bunch of small pictures here and you will be able to click on one and go to a picture gallery</p>
          <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p>
        <!-- end #sidebar2 --></div>
        <div id="mainContent">
          <h1> Description </h1>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
          <h2>H2 level heading </h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
        <!-- end #mainContent --></div>
        <div id="footer">
          <p><a href="../../Flordia Site/Index.html">Home</a> | <a href="../../Flordia Site/Rates.html">Rates</a> | <a href="../../Flordia Site/Amenities.html">Amenities</a> | <a href="../../Flordia Site/Attractions.html">Attractions</a> | <a href="../../Flordia Site/Directions.html">Directions</a></p>
        <!-- end #footer --></div>
      <!-- end #container --></div>
      </body>
      </html>

        • 1. Re: Invalid HTML Problem..
          Nancy OShea Adobe Community Professional & MVP

          GoDaddy hosting. Ahem...you have my condolences. I wouldn't use them to host my cat's website.

          That aside, what did you name your page?

          Most servers require you to name your home page either index.html or index.htm

           

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: Invalid HTML Problem..
            EricFight Level 1

            Oh no.....did i do i wrong by having them host  my account??? EEEK......my site is named index.html

            And like i said, my site works all fine when i test it but nothin at all shows up when i load it......you think it would at least show something even if it was messed up...then i called him and he ran a test on it and said it showed a invalid html format....and i have NO i dea how to fix it and they said they dont deal with coding or html files so i would just have to figure it out and get it fixed myself.....   i started with a template when i made it too????

            • 3. Re: Invalid HTML Problem..
              osgood_ Level 8

              I'd try another host because I get something show up in the web browser.

               

              Obviously you need to make sure the page has the correct naming convention applicable to the host......index.html, home.html etc and of course you have to make sure you have uploaded the page to the correct directory on the server.

              • 4. Re: Invalid HTML Problem..
                EricFight Level 1

                ok....i already purchased 5 years of hosting so i'm kinda stuck with it now.

                 

                What do you mean by? >>>"I'd try another host because I get something show up in the web browser."

                 

                i opened a template and saved it and uploaded and it worked fine?....i dunno why my site is different..i didn;t do anything different to it beside just customize a template dreamweaver already had.....

                 

                Do u think i should just try to start from scratch and remake the site? or is there another way?

                • 5. Re: Invalid HTML Problem..
                  M.R.Biesheuvel Level 3

                  Do you receive an http error when you try to load the page?

                  • 6. Re: Invalid HTML Problem..
                    osgood_ Level 8

                    EricFight wrote:

                     

                    ok....i already purchased 5 years of hosting so i'm kinda stuck with it now.

                     

                    What do you mean by? >>>"I'd try another host because I get something show up in the web browser."

                     

                    I mean...I've tested the page using my hosting provider and it works. If this is that case then it points to there being something incorrect with your hosting provider OR you have not followed the uploading advice from them i.e., page naming convention, uploading to the correct directory etc


                    Do u think i should just try to start from scratch and remake the site? or is there another way?

                    Probably not. I would try and find some free hosting space first, upload to that and see if it works. If it does, as I expect it to, then go back to your host provider and tell them you've tested it with other hosts and it works.

                    1 person found this helpful
                    • 7. Re: Invalid HTML Problem..
                      EricFight Level 1

                      ok thanks to all you...i dont get any error when i upload it....im gonna try a free uploading host and see how that goes!!

                      • 8. Re: Invalid HTML Problem..
                        EricFight Level 1

                        Whats a good free website hosting place i can use to test and see if my html file will work else where???

                        • 9. Re: Invalid HTML Problem..
                          Nancy OShea Adobe Community Professional & MVP

                          Your HTML works fine for me. It is valid code and a valid HTML document type.  So you are either trying to upload your page to the wrong folder on your server space, or GoDaddy tech support is, in typical fashion, blaming you for their own incompetence. 

                           

                          I highly recommend LunarPages.com if you want to cancel your GD hosting and move to a more reliable host. Just because you pre-paid for 5 years doesn't mean you can't cancel it.

                           

                          As for free hosting, check with your Internet Service Provider.  Many ISPs offer small web space as part of your package (earthlink, att, sbc, verizon...)

                           

                          Good luck,

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb
                          http://alt-web.blogspot.com

                          • 10. Re: Invalid HTML Problem..
                            EricFight Level 1

                            Thanks Everyone for your help....i went somewhere else and changed a couple things its fine! You all are awesome!