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

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

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

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.

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

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

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!