# Website layout problem



## Frosty714 (May 8, 2007)

I am having a layout issue with the website i work for and i can't find the source of the issue. When i view the site on my computer everything looks fine. My coworker is seeing the layout issue on about 50% of the pages she views. 

The main site content is being pushed below the fold and is not visible unless you scroll way down. (See attached screenshot) When she refreshes the page, the problem is fixed. I am not seeing the issue at all on my computer. 
Example link: http://www.educationworld.com/a_tech/techlp/techlp011.shtml

we are using the same version of IE. i think it must be something with the coding of the page? The weird thing is this is a new problem. For the past 3 years this problem has not existed. I would really appreciate any help!

Thanks
Lisa


----------



## FredT (Nov 16, 2007)

Wow, the same website I used to know and love throughout elementary school and middle school and now I am helping fix it! Neato!


There are a LOT of problems with this page.

For one, you have 2 <html> tags (lines 1 and 11), 2 <head> tags (lines 2 and 12), and 2 <body tags> (lines 17 and 107).

On line 187, <form> cannot be a child of <tr>

There is a random </p> on line 312.

On line 463, my browser complains that <noscript> tags cannot be children of <p>

You have one too many </p> tags on line 532

Random </p> on line 556

It appears that the Javascript starting at line 612 might be creating an unmatched </embed> tag.

Unmatched </p> on line 627

Extra </font> on line 713

By browser complains of unmatched </td></tr></table> on lines 892-894


The above is a short list of errors produced by my browser. I don't even want to look at the list of 124 errors and 46 warnings picked out by the W3C validator. If I were in charge of this website, I would have the whole thing bulldozed and rewritten in semantic XHTML. Welcome to the 21st century.


This code is HTML 4, table based, and really messy. Potential problems abound. With any luck, repairing the above errors may fix the problem, but I kind of doubt it. One weird thing I see is a random table with nothing in at line 594. This ends up in the general vicinity of where the large gap is in the screen shot, so it might be something to consider.

Another possibility is that the javascript used for the advertisements might be causing the huge gap considering that in my browser there is an ad showing up where the gap is in the screen shot. Maybe there is an error in one of the scripts.

Edit:

P.S. The 124 errors isn't as bad as it looks... there are a lot of "missing alt tag" errors, which aren't crucial. But don't get me wrong, the pressing issues are extremely numerous and need to be fixed.

P.P.S. Interested in hiring another web developer to help you fix all those errors? :tongue:


----------



## Frosty714 (May 8, 2007)

Yes,it's a flat file html site with 20,000 plus pages. we are hopefully moving over to Drupal soon! Thank you for your advice.


----------



## FredT (Nov 16, 2007)

Wow! That is a LOT OF PAGES!!!

Good luck on your migration!


----------



## abajan (Jun 27, 2010)

Lisa, on my computer the site in question (at least the page at the link) is displaying correctly in Firefox 3.6.4, Safari 4.0.5 (although that browser is reporting that there’s one error on the page), Chrome 5.0.375.70 and Opera 10.53. To find out how other browser/platform combos are displaying the page, BrowserShots is a useful FREE (but kinda slow) service.

One reason why the problem you alluded to is only recently showing up may be that there is a major push on to have new browsers and new versions of old browsers adhere more strictly to web standards. Or, stated more precisely, only pages that are coded in a standards compliant fashion will be guaranteed to render correctly.

We have all heard the term “Google is your friend.” Well, to webmasters the W3C Validation Service is _our_ friend! Granted, to the uninitiated, the number of errors reported there can seem daunting to fix but it is often the case that correcting just a few errors, automatically fixes several others.

FredT offers sage advice.

Incidentally, free tools abound online to make our tasks easier. Of course, knowing _where_ to find those tools is the tricky part. When I saw that you had 20,000 plus pages to deal with, my heart went out to you and Free Text Blocks Replacer (screenshot) came readily to mind. As its name implies, you can replace entire blocks of text across multiple pages in one fell swoop. (Yes, I’m pretty sure it could easily handle 20,000+ pages without even breaking a sweat!)

It may be worth your while to also give Notepad++ a try, assuming you don’t already use it.


Cheers


----------

