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

Question

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

Answer 1

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