0

I had a design sliced to html and it looked great. Then I converted it into a WordPress theme and a spacing appeared at the top of the website in every browser except FF. When turning to firebug the head tag seems to be empty and all html that should be there, appears to be in the body.

https://www.opolo.nl/kitchenaid/

Did anybody have this problem before and have a solution? Since this is a live website, I solved this by giving the header a position of absolute, but since a new project shows the same issue, I'm looking for a solution.

Foundation was used for the responsive part. Could it be WordPress and Foundation have problems? All javascript files are included by wp_register_script and wp_enqueue_script and are located in the footer. Moving them to the header didn't solve the problem.

Knut Holm
  • 3,988
  • 4
  • 32
  • 54
vespino
  • 1,714
  • 3
  • 15
  • 28

1 Answers1

0

you have a padding and font size set and something that counts as text within your body before your header

body{
    padding: 0px !important;
    font-size: 0px !important;
}

its not really a good idea to be setting dimensions for html body etc if not needed. a lot of code examples will style body tags so if using them you should change the container names from body to something else.

David
  • 5,897
  • 3
  • 24
  • 43
  • I see what you mean. When copying the source to a text editor, the first line is empty and the problem occurs. After removing the empty line, the problem is gone. So I guess WordPress is adding this line? But why is this now, do sites that work fine also show an empty first line when copying the source? – vespino Feb 13 '15 at 08:38
  • no, its a typo on someones part, just delete any spacing between body & your 1st content (prob header as i remember) – David Feb 13 '15 at 09:13
  • Very strange, I don't see any spacing. – vespino Feb 13 '15 at 10:52
  • you have a `" "` just after your body tag if you view page source. Its either in your header.php or its added through a action running just before get_header(); If you are unsure of where the action is added, remove plugins/theme function files to find out which file/function – David Feb 13 '15 at 15:27
  • I'm really going crazy over this. This is the source https://www.opolo.nl/header.phps ... I really don't see any space. In my entire WordPress career I never... – vespino Feb 13 '15 at 21:20
  • still there, its strange i dont actually see it on page source (cached), but its in the element inspector, but sure you have it sorted with the code above but i note your page elements are also positioned by padding so maybe you are good with the absolute positioning. – David Feb 13 '15 at 21:47