We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Unaccountable space at the beginning of a HTML document.

  • 3 odgovori
  • 1 ima ovaj problem
  • 7 views
  • Posljednji odgovor poslao number8pie

more options

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?

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?

Izmjenjeno od strane number8pie

All Replies (3)

more options

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.

more options
more options

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.