Skip navigation
Currently Being Moderated

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

Apr 26, 2012 2:48 PM

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

 
Replies
  • Currently Being Moderated
    Apr 26, 2012 2:56 PM   in reply to John Nez

    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%2Fmainb ooks.html&charset=%28detect+automatically%29&doctype=Inline&group=0

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 10:18 PM   in reply to John Nez

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 12:25 AM   in reply to martcol

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 10:52 AM   in reply to John Nez

    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_attribu tes/

     

    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);

     

     

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 3:21 PM   in reply to John Nez

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 28, 2012 8:17 AM   in reply to John Nez

    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!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points