11 Replies Latest reply: Apr 28, 2012 8:17 AM by osgood_ RSS

    I can't figure out why this page splits in live preview... but not in the browser?

    John Nez Community Member

      I've finally got my site up and it all runs great... except I can't figure out why this one page behaves like it's too wide.

       

      http://www.johnnez.com/mainbooks.html

       

      It comes apart in the Live Preview.... but not in the browser preview.

       

      Thanks for any tips...

       

      jn

        • 1. Re: I can't figure out why this page splits in live preview... but not in the browser?
          martcol Community Member

          Check your page in the validator and see if you can identify some of the errors.  Find the obvious then fix, test, repeat.

           

          Martin

           

          http://validator.w3.org/check?uri=http%3A%2F%2Fwww.johnnez.com%2Fmainbooks.html&charset=%2 8detect+automatically%29&doctype=Inline&group=0

          • 2. Re: I can't figure out why this page splits in live preview... but not in the browser?
            John Nez Community Member

            Thanks for that nifty site! 

             

            I still can't get the page to stop coming apart in design view... but I've found all sorts of little bugs to fix.

            • 3. Re: I can't figure out why this page splits in live preview... but not in the browser?
              martcol Community Member

              There are a couple of problems in the validation report that might throw your layout.  Unfortunately , I only have access to a tablet device at the moment otherwise, I'd be happy to scrutinise the page myself.  It looks like you have extra or missing closing tags and that's where I would focus.

               

              It can be a bi of a blunt instrument but the validator offers to run the page through HTML Tidy with a checkbox option.  It's worth a go but I wouldn't rely on it so, if you go that way, back up your page.

               

              I so wish I was at my desk top!

               

              Martin

              • 4. Re: I can't figure out why this page splits in live preview... but not in the browser?
                martcol Community Member

                Try these:

                 

                <!-- end .sidebar1 -->

                        </div>

                </li>

                    </ul>

                    <!-- end .sidebar1 --></div>

                 

                Looks like two stray closing tags there - </li> </ul>

                 

                <img src="images/12days_bookblog.jpg" "alt=""width="324"

                 

                Should be:

                 

                <img src="images/12days_bookblog.jpg" alt="" width="324"

                 

                <img src="images/cromwell dixon blook blog.jpg" alt="" width="324" height="58"></a></p>

                                </div></th>

                 

                img not closed ...height="58" />

                 

                src="http://www.statcounter.com/counter/counter.js"></script></blockquote>

                 

                Stray </blockquote> tag

                 

                Fix those and then see what happens and if you still have a problem, post back.

                 

                Fingers crossed!

                 

                Martin

                 

                Missing alt="" text won't affect your layout but it is worth fixing those too IMO.

                • 5. Re: I can't figure out why this page splits in live preview... but not in the browser?
                  John Nez Community Member

                  Quite helpful... I'm down to just 5 errors.

                   

                  I suspect it's got something to do with the container or content.

                  When I change the class for content the box will finally move a bit.

                   

                  HTML is a total incrutable mystery to me... a mystery inside a mystery inside a mystery!

                  • 6. Re: I can't figure out why this page splits in live preview... but not in the browser?
                    martcol Community Member

                    john nez wrote:

                     

                    HTML is a total incrutable mystery to me... a mystery inside a mystery inside a mystery!

                     

                    Sounds to me like you've almost cracked it!

                     

                    You have one error that could cause problems and that's the stray </blockquote> tag.  Just delete it.

                     

                    The alt="" text will show as an error on the validator but that's easy to fix and worth doing.

                     

                    Here's an easy article on that: http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/

                     

                    In one of your CSS files (JonzheaderindexCSS.css) you have this:

                     

                    body {

                    margin-top: 20px;

                    padding: 0;

                    color: #666;

                    font-family: Verdana, Geneva, sans-serif;

                    font-size: 14px;

                    line-height: normal;

                    background-attachment: fixed;

                    background-color: #E1B852;

                    background-image: url(../images/orange%20plaid.jpg);

                    background-repeat: repeat;

                    html { overflow-y: scroll; }

                     

                    }

                     

                    It should be like this:


                    html {

                    overflow-y: scroll;

                    }

                     

                    body {

                    margin-top: 20px;

                    padding: 0;

                    color: #666;

                    font-family: Verdana, Geneva, sans-serif;

                    font-size: 14px;

                    line-height: normal;

                    background-attachment: fixed;

                    background-color: #E1B852;

                    background-image: url(../images/orange%20plaid.jpg);

                    background-repeat: repeat;

                    }

                     

                    It looks like you have that rule repeated further down the page like this:

                     

                    html { overflow-y: scroll; }

                     

                    }

                     

                    There's an extra curly brace there (}) anyway, so it is badly formed but the whole rule and extra curly brace can go.

                     

                    You can fix those errors but I have a sneaky suspicion that it isn't gong to solve the issue you describe.

                     

                    Fix those issues anyway and post back.  Maybe if you can show a screen shot of what you are seeing in DW it might help?

                     

                    Martin

                     

                    PS: It's never a good idea to have file names on the web that have spaces in.  Your background rule has this:

                     

                    background-image: url(../images/orange%20plaid.jpg);

                     

                    That .jpg should be orangeplaid.jpg or orangePlaid.jpg or orange_plaid.jpg and the change should be reflected in the reference to the image so, orangePlaid.jpg should be:

                     

                    background-image: url(../images/orangePlaid.jpg);

                     

                     

                     

                     

                    • 7. Re: I can't figure out why this page splits in live preview... but not in the browser?
                      John Nez Community Member

                      Thanks for all the clues...

                       

                      But the skewed image in Design view still remains.

                       

                      I've tried comparing the settings to various other pages that do not get skewed. 

                      But they all seem to match for measurments of the content, body, padding etc.

                       

                      It seems to work fine in Live view and in the browser... it's just design view where it gets skewed.

                       

                      Mysterious... (at least for the html-ignorant, like me).

                       

                       

                       

                       

                      skewed web page in design view.jpg

                      • 8. Re: I can't figure out why this page splits in live preview... but not in the browser?
                        martcol Community Member

                        Well, I have been staring at your code for longer than is healthy now and the only thing that I can think of is to ask if you mean to have two div containers with a class of .content?

                         

                        <!-- InstanceBeginEditable name="div content" -->

                          <div class="content">

                            <div class="content">

                             <div align="left">

                                <table width="833" border="0" align="left" cellpadding="4" cellspacing="0">

                                  <tr>

                         

                        I don't know if that's the anser but you could try deleting one of those and then finding one of the </div> tags to balance that up.

                         

                        Try just commenting them out like this:

                         

                        <!-- InstanceBeginEditable name="div content" -->

                          <div class="content">

                        <!--    <div class="content">  This will be commented out -->

                             <div align="left">

                                <table width="833" border="0" align="left" cellpadding="4" cellspacing="0">

                                  <tr>

                         

                        Then comment out the end tag and see if that helps.

                         

                        Just a thought

                         

                        Martin

                        • 9. Re: I can't figure out why this page splits in live preview... but not in the browser?
                          John Nez Community Member

                          Well thanks everyone for you help. 

                           

                          I now think the problem lies with the messed up code that I wrote to double up the div=content somehow.

                           

                          I'm able to copy an older 'good' copy from TimeMachine and then patch that up.

                           

                          It remains duecedly complicated though, trying to match up the beginning and ending tags.

                           

                          Frankly, I don't think they should let an amateur like me run amok with trying to hack my own code, for I'm afraid I often do some fearful experimentation in the name of ignorance.

                           

                          lol!

                          • 10. Re: I can't figure out why this page splits in live preview... but not in the browser?
                            John Nez Community Member

                            I finally found the problem.  It was a div ID table with an assigned class that probably had something wrong with the width.

                             

                            <td colspan="3"><div align="left" class="booktitleh1">    Clients:            </div></td>

                                      </tr>

                             

                            Anyhow I think that's what it was. 

                            One of the problems with working with HTML is it's so complex, that after changing a million things, one is never quite certain what it was that fixed it... or caused the error to begin with.

                             

                            lol!

                            • 11. Re: I can't figure out why this page splits in live preview... but not in the browser?
                              osgood_ CommunityMVP

                              John

                               

                              Colspan is created when you split table cells. A lot of the time (if you don't know a lot about working with tables) it can create havoc and throw the construction out.

                               

                              Great illustrations by the way!