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
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_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);
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).
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
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!
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!
North America
Europe, Middle East and Africa
Asia Pacific