I have an index.php file, referencing a header.htm file. The header contains a logo, picture and drop-down menu. If the header.htm file is displayed alone, ie. www.mydomain.com/header.htm, it displays correctly. However, when displayed as part of the index.php file, ie. www.mydomain.com/index, the header.htm file drops approximately 21px, almost as though there’s a 21px top margin set. However, all the margins are set to 0.
Does anyone have any ideas why this is happening and how I can fix it?
Sure, we can help. But, we need to see some or all of your code. Can you create a small sample so we can duplicate it and perhaps we can solve it for you. If you are using CSS to spruce up the display, it might be creating the gap. Or, if you have not included it correctly, that can do it also. Remember if it is a header that is being used at the top of HTML, it must be the first item loaded before you process anything else…
I do it this way, works well for me…
<html>
<head></head>
<body>
<?php include("HeaderMenus.html"); ?> Many thanks for your reply. I have uploaded a quick example of the problem. If you go to http://www.anokhi.co.uk/test/header.htm, you will see the header and menu as it should appear. If you then go to http://www.anokhi.co.uk/test/index, you will be able to see the issue I mentioned. Hopefully, you will be able to determine the error.
Simple, you have TWO headers in your code. How did I find that out so fast… ??? LOL…
Again, simple… A trick to remember…
Bring up both pages you posted and then RIGHT-CLICK on each in a blank area and select VIEW-SOURCE on each. (one at a time of course)
This will show you what you are actually seeing after any PHP code is handled. Then, slide both down till you see the FIRST . Make them into a window and put side by side. With both of the starting at the FIRST … You will see that after one you get normal code. The other has an extra HEADING in place and is causing the browser to render extra junk at the top. This is your issue.
Now, you have to look at your code and see where the extra junk is being placed into the final page.
But, that should be easy to find.
Hope that helps… CYA in the bitstream…
Thank you for the super fast response, it’s much appreciated! I have removed the additional header information and http://www.anokhi.co.uk/test/index2 looks much better now, at least in Firefox.
However, I’ve just checked it again in IE9 and, not only has it not fixed the problem there but, in addition, I now have some strange issues with the menu system, which were not there before and are not a problem in Firefox. I haven’t studied it in detail yet but will take another look tomorrow…
Well, that is a problem with some code. Works in IE and not in FF or the other way around…
But, use that trick and see what is different in IE. And, if you can’t figure it out, post the links…
Good luck…
I’ve had another look at this but I can’t see the problem at the moment. Part of the problem is that I am not clear about how the individual pages - in this instance index2.php, header.htm and footer.htm - should link together, in terms of the positioning of , and tags, so I suspect the problem could be there.
However, the page displays correctly in FF v10.0.2. In IE9, the original header problem remains and the menu displays differently. I’d appreciate it if you could you have a look again and point me in the right direction.
Well, I think I figured out your issue. In HTML, a normal page is something in general like this:
You had many many headers, document declares and bodies inside your code. You should only have one DOCTYPE and one BODY… I think what you did was use a header and footer that included a full HTML page. You can not do that. You need to create a header and footer that is just the items INSIDE the tags. So, no DOCTYPE’s, no 's… It’s okay to put Scripts inside them as long as they are started and ended with script tags. No tags.
Hope that makes sense… You current code has several BODY tags and what is happening is the browser is trying to mix up the various pages into one and that is pushing some around in a crazy manor. Not sure why it is sorted out in FF. I suspect that it will show up eventually in some odd problem.
Good luck!
I think I’ve now resolved this issue, having worked through your suggestions and tidied up the code, to remove the extra tags. However, I am left with one new problem, which you might be able to assist with. Previously, the navigation menu was directly underneath the header photo but, now, there is white space between the photo and the menu. I cannot see where this has come from or how to remove it. Do you have any ideas?
Many thanks
I am leaving for the afternoon. But, if you can post that section of your code, we can help.
Just where you have the header code and menu code. My guess is that you have a carriage-return
that is causing it to space one extra line of “whitespace”. I will be back in a few hours…
Many thanks. The header/navigation code, in index2.php, is below.
Well, without seeing more code, I would take a guess that it is the first two lines.
You should only have one (1) body tag, not two. This would tell the html browser to create a body and then create a second one. There can be only one! So, delete the first line. If that does not solve it, then post a bit more of the page of, post the entire page if you want. (You can private message the page if it contains items you do not want out in the public. Let us know…
One more important error in your code. After looking at the source of the page you have posted, I found that your
Interesting! I might have found it… I looked at the bad display on FF and couldn’t see anything wrong. So, next, I pulled the table out of it and put it into my editor. (Dreamweaver) and all seems fine. Got mad at it for a bit! LOL !!!
Finally, reformatted it so I could see the indentations and all. AND, low and behold…
I found one missing I is the 4th line from the bottom… So, the 4th from the top…
|
For reference, this issue was never resolved. The final suggestion was not the cause of the problem. If anyone else has the answer, let me know.
Well, I went to: http://www.anokhi.co.uk/test/index and viewed the source again.
It still contains a jumble of tags and other mismatched tags.
Is this still the live page you are working with?
Or, just repost your code again… Thanks…
Hello again. I was no longer using that link, actually, but I checked it again and couldn’t find a ‘jumble’ of body tags. There was one for the index.php file and one for the navigation.htm file, which was called. We went through the procedure of removing additional tags before and it made no difference to this problem.
I have now updated this link and you will see that there is only one tag and one tag in the entire page. However, the problem remains, as before, when viewed in Firefox v13.0.1. The same page displays perfectly in IE v9.
Okay, I went to the link again and the source code has been fixed. Perhaps, my browser was using a cached version… I have some time later and will look at it again for you. I did find a site that explained that a lot of browsers have this problem if you are using a lot of CSS. But, yours looks correct to me so far… Hmmm…
I will experiment and let you know later what I find…
Well, I took a quick peek at your page’s code. It is not the way most programmers like to set up their pages.
Normally, most programmers place their 's and 's inside the header. You have two sections
of styles. It is harder to read your way.
But, I copied your source from the test link into my Dreamweaver and it says there is a problem with your DIV’s.
So, I did a quick google search and found this quote…
Note: By default, browsers always place a line break before and after theelement. However, this can be changed with CSS. (Found at: [url=http://www.w3schools.com/tags/tag_div.asp]http://www.w3schools.com/tags/tag_div.asp[/url] )So, I took the source of your page. Removed all the
's. Removed all the text. Removed all the style’s. Removed all the script’s. Removed all of the “matched” tags like , etc. Removed all of your “matched”'s and 's. Removed all of the table tags as they matched correctly. And, finally removed all the small “matched”
's's…This is what I was left with:
Dermatologie und Ästhetik im Schweizer Viertel :: Startseite
[php][/php] You have one odd (might have been my error on that) You have four opened DIV tags and only one closing tag. I will guess that is your error. If you open a DIV and it is never closed correctly, the browser will insert a blank line as w3schools state. It is hard to debug someone else's code without access to all the sub files. (Not being able to see if a PHP code might be adding a space, etc.) But, with simply removing the correct lines, the above popped out...Hope that helps, let us know…
The
tag you mention is not an odd one. You ‘found’ that the last time we discussed the issue but it is in fact closing atag.
As for closing each individual
… this is the result.
http://www.anokhi.co.uk/test/test.php