Unaccountable space at the beginning of a HTML document.
I've designed and developed a website using Skeleton boilerplate and Perch CMS, and it works perfectly in all desktop browsers I've tested it in and almost does in Firefox 18.0.1 for Windows XP.
When I browse the site and click on the news page (http://www.f3racing.co.uk/news.html) in Firefox 18.0.1 there's a weird empty space right at the beginning of the document, so the main navigation and header is pushed down maybe 190 pixels from the top of the window pane.
This ONLY happens on the news page, Firefox doesn't add this on any other page despite it using the same boilerplate.
When using firebug if I disable this float:
.container .column, .container .columns {
float: left;
}
in the skeleton.css file the space vanishes, but this is vital to the boilerplate I'm using and removing it would mean a complete re-build of the website, is there a way I can get this page functioning as it does in all other browsers?
Ändrad av number8pie
Alla svar (3)
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
He has a thread over there.
I've found out what is causing the problem:
On all other pages I use a negative margin on the content to get the overlap of content and background image (there is a good reason I'm not using it simply as a background image), and this works fine.
On the news page I've positioned the background image absolutely and given it a negative z-index. There is a reason for this difference, but right now I can't remember it (I'll probably find out today whilst changing the layout to be the same as the other pages).
I would still like to know why every other browser handles this as I expected, yet Firefox adds this space at the beginning of the document. I think knowing why would help me avoid issues like this in future.