web page opens in the middle???

**mlegg** · 06-09-2011, 12:34 AM

I can't figure this out. I made this web page and ran the HTML and CSS through the W3C Validation service to make sure all my coding is good and I change the few errors it found.

Can you help me figure this out? I want the page to open and show the top/header properly and then you scroll down like all web pages. This happened before and you all were able to help.
thanks

HTML

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LiveInNewCastle .com brought to you by Samonas Realty</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
 div.c4 {text-align: right;}
 div.c3 {text-align: center}
 div.c2 {line-height:20px;}
 span.c1 {color:#458B00;}
</style>
</head>
<body>
<div id="mainPicture"><img src="images/NewCastle_logo.jpg" alt="LiveInNewCastle logo"></div>
<div class="contentBox innerBox">
<div class="contentText">
<h3>111 Main Street, New Castle, New Hampshire <span class="c1">$1,295,000</span></h3>
<a href="http://www.nneren.com/listing_detail.html?id=4059995&amp;return=1" target="_blank">MLS#: 4059995</a>
<p>Exquisite Colonial, in the Heart of New Castle Village. Circa 1775. Sophisticated, yet Warm in Style. Open &amp; Bright Kitchen &amp; Dining Room, Living Room with Custom Bookshelves &amp; Fireplace &amp; Relaxing Family Room w/Fireplace &amp; French Doors Leading to Full Length Deck, Office &amp; Half Bath on 1st Floor. 3 Roomy Bedrooms, Laundry &amp; 2 Full Baths on 2nd Floor. Well manicured Landscape &amp; Gardens in Fenced Backyard...enjoy the views from the Back Deck!</p>
<div class="c3"><embed width="900" height="500" flashvars="showLogo=false&amp;showVersionInfo=false&amp;dataFile=http://www.homesandland.com/ClientSide/SlideShow/slideshowconfig.cfm?SlideShowId=1394720%26ListingId=16829295%26Unbranded=1" quality="high" bgcolor="##ffffff" name="SOEZTour" src="http://www.homesandland.com/ClientSide/SlideShow/HNLEZTour.swf" type="application/x-shockwave-flash"><br>
<div id="ldpPFHeadline"></div>
<table class="ldpPropFeatures" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td colspan="3" class="ldpPFHeadline"></td>
</tr>
<tr>
<td width="310px">
<ul>
<li><strong>Home Features Amenities</strong></li>
<li>MLS #: 4059995</li>
<li>Price: $1,295,000</li>
<li>Total Rooms: 8</li>
<li>BedRooms: 3</li>
<li>Total Baths: 3</li>
<li>Acres: 0.25</li>
<li>Square Feet: 2000 Sq Ft</li>
<li>Above GRD: 2000 Sq Ft</li>
<li>Below GRD: 0</li>
<li>Taxes: $4,018</li>
<li>Tax Year: 2010</li>
<li>Year Built: 1775</li>
</ul>
</td>
<td width="310">
<ul>
<li><strong>Features:</strong></li>
<li>Style:Colonial, Historic Vintage</li>
<li>Color:Taupe</li>
<li>Full Baths: 2</li>
<li>1/2 Baths: 1</li>
<li>Water Heater: Electric</li>
<li>Water: Public</li>
<li>Basement: Full, Unfinished</li>
<li>Construction: Existing, Wood Frame</li>
<li>Driveway: Paved</li>
<li>Electric: 200 Amp</li>
<li>Exterior: Clapboard, Wood</li>
<li>Foundation: Brick, Stone</li>
<li>Garage/Parking: 2 Parking Spaces</li>
<li>Heating/Cooling: Hot Air</li>
<li>Heat Fuel: Gas-LP/Bottle, Oil</li>
<li>Lot Description: Country Setting, Fenced, Landscaped, Level</li>
<li>Roof: Shingle-Architectural</li>
<li>Interior Features: 2nd Floor Laundry, Cable, Cable Internet, Family Room, Fireplace-Gas, Foyer, Island, Kitchen/Dining, Living Room, Smoke Det-Hdwired w/Batt, 2 Fireplaces</li>
</ul>
</td>
<td width="310">
<ul>
<li>Exterior Features: Full Fence, Shed</li>
<li>School Elementary: Maude H. Trefethen School</li>
<li>Junior High: Portsmouth Middle School</li>
<li>High School: Portsmouth High School</li>
<li>Seasonal: No</li>
<li>Surveyed: Yes</li>
<li>Zoning: Residential</li>
<li>Flood Zone: Unknown</li>
<li>Book: 3491; Page: 1731; Map: 0013; Lot: 0017</li>
<li>Sewer: Public</li>
<li>Roads: Public, Paved</li>
<li>Room Dimensions:</li>
<li>Master Bedroom: 13 x 19</li>
<li>Bedroom 2: 11 x 13</li>
<li>Bedroom 3: 10 x 11</li>
<li>Kitchen: 9 X 22</li>
<li>Living Room: 13 X 19</li>
<li>Family Room: 14 X 23</li>
<li>Dining Room: 10 X 13</li>
<li>Office: 8 X 11</li>
</ul>
</td>
</tr>
</tbody>
</table>
<br>
<div id="mapviewer"><iframe id="map" name="mapFrame" scrolling="no" width="900" height="450" frameborder="0" src="http://www.bing.com/maps/embed/?lvl=14&amp;cp=43.071301~-70.718039&amp;sty=r&amp;draggable=true&amp;v=2&amp;dir=0&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;q=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW&amp;pp=43.071169~-70.717986&amp;emid=b655c7e0-bf23-f0f7-41fa-e492ad839619&amp;w=900&amp;h=450"></iframe>
<div id="LME_maplinks" class="c2"><a id="LME_largerMap" href="http://www.bing.com/maps/?mm_embed=map&amp;cp=43.071301~-70.718039&amp;lvl=14&amp;sty=r&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW" target="_blank">View Larger Map</a> <a id="LME_directions" href="http://www.bing.com/maps/?mm_embed=dir&amp;cp=43.071301~-70.718039&amp;rtp=~pos.43.071169_-70.717986_111+Main+St%2C+New+Castle%2C+NH+03854&amp;lvl=14&amp;sty=r&amp;form=LMLTEW" target="_blank">Get Directions</a> <a id="LME_birdsEye" href="http://www.bing.com/maps/?mm_embed=be&amp;cp=43.071301~-70.718039&amp;lvl=18&amp;sty=b&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW" target="_blank">View Bird's Eye</a></div>
</div>
</div>
</div>
<div class="c4"><a href="mailto:John@samonasgroup.com%20?subject=WalkToDowntown.com"><strong>Click here to make an appointment to view this wonderful home.</strong></a></div>
</div>
<div id="footer"><a href="http://samonasgroup.com/">Samonas Realty</a> | 111 Bow St, Portsmouth, NH 03801 | <a href="mailto:Suzanne@samonasgroup.com">Suzanne Butcofski</a> | (603) 957-1210</div>
</body>
</html>

CSS

Code:

body {
margin : auto;
color : #003366;
background-color : #003366;
background-repeat : repeat;
max-width : 960px;
}
#navBar {
color : #ceeaee;
font-family : sans-serif;
margin-top : 30px;
margin-bottom : 0;
padding : 0;
}
#navBar li {
display : inline;
list-style-type : none;
}
#navBar li a {
display : inline-block;
height : 1.5em;
color : #cde2fc;
padding-top : 0.2em;
padding-left : 1em;
padding-right : 1em;
text-decoration : none;
}
#navBar li a:hover {
color : #0c61c9;
background-color : white;
}
#mainPicture {
height : 170px;
width : 960px;
padding-top : 10px;
margin : auto;
}
.contentBox {
font-family : sans-serif;
clear : both;
}
.sidebar {
float : right;
width : 370px;
padding : 10px;
clear : both;
}
.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top : 1em;
padding-left : 1em;
padding-right : 1em;
padding-bottom : 1em;
}
.agent-block img {
border : 1px solid #e5e5e5;
padding : 4px;
margin : 0 8px 1px 0;
}
.ldpPFHeadline h3 {
font-weight : bold;
}
.ldpPropFeatures td {
vertical-align : top;
margin : 0;
padding : 0 0 10px 0;
width : 310px;
}
.ldpPropFeatures ul {
margin : 0 0 0 10px;
}
.ldpPropFeatures li {
margin : 0;
padding : 0;
list-style-position : outside;
}
.ldpSecHeadline {
margin : 0 0 5px 0;
}
#footer {
background : url(images/footer.png) no-repeat;
text-align : center;
font-size : small;
font-family : sans-serif;
color : #010101;
padding-top : 5px;
padding-bottom : 5px;
}
#footer A {
color : #010101;
}

**Beverleyh** · 06-09-2011, 07:40 AM

The problem looks like its with the slideshow code - when you take out the embed line, the half-way jump doesn't happen.

I dont know what software you're using to generate the slideshow (or even if you are using a pre-made solution, rather than something you've developed yourself) but maybe you could research that more? Maybe ask the developer of the script/software to see if they've come across the problem before? Or maybe they have a forum on their site with the answer already there?

**jscheuer1** · 06-09-2011, 08:22 AM

Not what I'm seeing here. For me it's removing the map code that fixes it.

I've also noticed that this doesn't seem to be an issue in Firefox, and that in Opera it jumps all the way to the bottom. In Chrome it jumps nearly to the bottom. It's in IE that it jumps to the middle.

So I'd go with asking support for the map feature.

One thing that might work though would be to put the map on a separate page and show it on the page you linked us to via an iframe.

**mlegg** · 06-09-2011, 04:50 PM

thanks, I'll look into it more

**mlegg** · 06-09-2011, 07:27 PM

The slideshow is from http://www.homesandland.com/ It's a real estate website, and they do a nice job of how they tie it in with a listing you upload. Maybe I can find a comparable slideshow builder? I will download and mess around with a few. I've tried Visual Slideshow; it seems to replicate what I would need in the paid version.
What do you think about this product?

Originally Posted by Beverleyh

The problem looks like its with the slideshow code - when you take out the embed line, the half-way jump doesn't happen.

I dont know what software you're using to generate the slideshow (or even if you are using a pre-made solution, rather than something you've developed yourself) but maybe you could research that more? Maybe ask the developer of the script/software to see if they've come across the problem before? Or maybe they have a forum on their site with the answer already there?

**jscheuer1** · 06-09-2011, 08:34 PM

Before you go trying to replace the slideshow, setup a demo page without it. That's what I did. It still had the same problem.

Next I setup a page with the slideshow, but without the map. The problem disappeared.

That's what led me to believe that if the map where put in an iframe, it might work out.

I'll see if I can try that out. If I can, and if it works or not, I'll let you know either way.

**jscheuer1** · 06-09-2011, 08:54 PM

OK, I went to try it and saw that - The map was already in an iframe! I tried it anyway, no luck. But then I thought, what if onload of the iframe the page were to scroll to the top. That would be almost as good. It's non-standard, but it worked and worked so fast I could hardly tell. Here's what I did, addition highlighted:

Code:

<div id="mapviewer"><iframe onload="window.scrollTo(0,0);" id="map" name="mapFrame" scrolling="no" width="900" height="450" frameborder="0" src="http://www.bing.com/maps/embed/?lvl=14&amp;cp=43.071301~-70.718039&amp;sty=r&amp;draggable=true&amp;v=2&amp;dir=0&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;q=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW&amp;pp=43.071169~-70.717986&amp;emid=b655c7e0-bf23-f0f7-41fa-e492ad839619&amp;w=900&amp;h=450"></iframe>
<div id="LME_maplinks" class="c2"><a id="LME_largerMap" href="http://www.bing.com/maps/?mm_embed=map&amp;cp=43.071301~-70.718039&amp;lvl=14&amp;sty=r&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW" target="_blank">View Larger Map</a> <a id="LME_directions" href="http://www.bing.com/maps/?mm_embed=dir&amp;cp=43.071301~-70.718039&amp;rtp=~pos.43.071169_-70.717986_111+Main+St%2C+New+Castle%2C+NH+03854&amp;lvl=14&amp;sty=r&amp;form=LMLTEW" target="_blank">Get Directions</a> <a id="LME_birdsEye" href="http://www.bing.com/maps/?mm_embed=be&amp;cp=43.071301~-70.718039&amp;lvl=18&amp;sty=b&amp;where1=111+Main+St%2C+New+Castle%2C+NH+03854&amp;form=LMLTEW" target="_blank">View Bird's Eye</a></div>
</div>

**mlegg** · 06-09-2011, 10:28 PM

Oh thanks John. I was wondering if/where to put an onload like that.

Another thing, would you suggest I try using a different embeddable map service? I've used Google Maps in the past but the owner of the company likes the way that Bing Maps adds View Larger Map / Get Directions / View Bird's Eye links under the maps.

**jscheuer1** · 06-10-2011, 01:02 AM

If the client likes the map, it's probably easiest to adapt it. Any other map service you use will probably require its own tweaking anyway.

The thing with the onload attribute for iframe is that it's technically invalid and/or not respected by all browsers.

But it definitely appears to work in IE 6, 8, 9 (7 I'm not 100% sure of, looks like it), Opera, and Chrome for this. Firefox as I said before didn't need it anyway.

I just double checked though, in HTML 5 - what you're using for the page, onload is a valid attribute for iframe. It's invalid for HTML 4.01 strict (no iframes) and transitional (iframes are OK, just not onload attributes for them). I'm pretty sure XHTML breaks down the same visa vis its strict and transitional flavors. Firefox 4 does fire the event. So perhaps whatever browser(s) didn't respect it before do so now.

Thread: web page opens in the middle???

Thread Tools

Search Thread

web page opens in the middle???

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions