Alignment Problems

General PHP Help
#7

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.

http://www.anokhi.co.uk/test/index2

#8

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!

#9

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

#10

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…

#11

Many thanks. The header/navigation code, in index2.php, is below.

xxx

<?php include('navigation.htm');?>
#12

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…

#13

One more important error in your code. After looking at the source of the page you have posted, I found that your

tags are all incorrect. You are not closing them correctly with
… I bet that is part of the problem, too!
#14

TonyRome, clear out some of your personal messages… Your PM mailbox is full… Here is my note on your alignment problems…

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…

  • <---- This one never closes!!!

    So, here is a copy of the table with 2 spaces used for each indent! Hope that helps!

    <table style="width: 736px" cellspacing="0" class="style15" cellpadding="0">
  <tr>
    <td class="style20">
      <ul id="navbar">
        <li class="style3" style="width: 115px">
          <a href="index.php"><div class="style3" style="width: 85px; margin-left: 10px">Startseite</div></a>
          <li style="width: 80px">
            <a href="#"><div class="style3">Praxis</div></a>
            <ul>
              <li><a href="sprechzeiten.php">Sprechzeiten</a></li>
              <li><a href="aktuelles.php">Aktuelles</a></li>
              <li><a href="anfahrt.php">Anfahrt</a></li>
              <li><a href="kontakt.php">Kontakt</a></li>
            </ul>
          </li>
          <li style="width: 130px">
            <a href="#"><div class="style3">Dermatologie</div></a>
            <ul>
              <li><a href="angebot.php">Angebot</a></li>
              <li><a href="allgemeine.php">Allgemeine Dermatologie</a></li>
              <li><a href="allergologie.php">Allergologie</a></li>
              <li><a href="videodokumentation.php">Videodokumentation</a></li>
              <li><a href="operative.php">Operative Dermatologie</a></li>
              <li><a href="photodynamische.php">Photodynamische Therapie</a></li>
            </ul>
          </li>
          <li style="width: 125px">
            <a href="#"><div class="style3">Lasermedizin</div></a>
            <ul>
              <li><a href="laserangebot.php">Laserangebote</a></li>
              <li><a href="erbiumyag.php">Erbium:YAG-Laser</a></li>
              <li><a href="co2.php">Fraktionierter CO2-Laser</a></li>
              <li><a href="erbiumglass.php">Erbium Glass-Laser</a></li>
              <li><a href="alexandrit.php">Alexandrit-Laser</a></li>
              <li><a href="ktp.php">KTP-Laser</a></li>
            </ul>
          </li>
          <li style="width: 170px">
            <a href="#"><div class="style3" style="width: 154px">Ästhetische Medizin</div></a>
            <ul>
              <li><a href="kosmetik.php">Medizinische Kosmetik</a></li>
              <li><a href="faltenbehandlung.php">Faltenbehandlung</a></li>
            </ul>
          </li>
          <li style="width: 114px">
            <a href="impressum.php"><div class="style3">Impressum</div></a>
          </li>
        </ul>
    </td>
  </tr>
</table

    GOOD LUCK!
#15

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.

#16

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…

#17

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.

#18

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…

#19

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 the
element. 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:
    [php]

    Dermatologie und Ästhetik im Schweizer Viertel :: Startseite
    [/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…

    #20

    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 a

    tag.

    As for closing each individual

    tag, we also discussed that previously. If I close them, like this…

    … this is the result.
    http://www.anokhi.co.uk/test/test.php

    #21

    You still have two tags, this not make sense.

    Line #56:

    <body id="main_body" class="style14">

    Line #139:

    <body style="margin-left: 0; margin-top: 0">
    #22

    TonyRome, Okay, you are not understanding what I mean about closing your DIV’s.
    You do NOT close them on the same line. If you do, you are creating just a list of DIV’s.
    Normally, as in your example, you would do it something like this:

    Your example:

    In this manner, you are just creating a list of four div’s. They do not involve each other. Usually, you would use something more like this example: (same code, just each DIV close differently)

    //Close key visual
    //Close header
    // Close container

    This creates one large DIV container that contains the others. And, creates a header DIV inside which contains the content DIV… Then, you have full control over the entire class of the div’s…

    It the page you gave us, after removing all the plain code, you had four DIV’s that did not close.
    To prove that, go to your source code and count the

    tags and count the
    tags. They do not match and this is a programming error. Most likely it is the one adding the blank area…
    #23

    Thanks for the response but closing the

    tags in the way you have shown does not solve the problem. Not only that, but it ruins the rest of the formatting.
    #24

    Well, if you view the source output of your page, NOT THE CODE, you will see that there are unclosed DIV’s and two tags. Both are invalid syntax for HTML. Somewhere inside your code, you have something that is not closing the tags correctly.

    Go to your live page, right-click on it, view-source it, copy the entire text, insert it into your html editor and
    it should show you errors. Either you have an “include” in the wrong place or your code is not putting the
    correct syntax out into the browser. Good luck!

    PS: Two tags are not correct syntax and you must fix these to continue debugging the rest!

    #25

    I have already viewed the source output and explained that closing the

    tags destroys the formatting completely.

    Perhaps, yes, but where?! The

    and tags are not the problem.

    It was written in an html editor and no

    errors are displayed by the editor.

    Removing the second tag makes absolutely no difference to the display of the page!

    As far as IE is concerned, there are no errors and it displays correctly. The and

    tags do not appear to have any (positive) impact. So, what’s the difference between IE and FF?
    #26

    tonyrome,

    ErnieAlex is absolutely correct in his advice. While it may appear to make things worse for the moment, if you don’t address the issues he has pointed out, you will never be able to rely on the output. Browsers attempt to be very forgiving and will sometimes “guess” as to what you were looking to do when they are getting bad html. Even if you do get all the browsers guessing “correctly” right now, there is a good chance that it won’t last, as each new update to the browser could easily break this process. Even with completely valid markup, each of the browsers will behave differently sometimes, but with the errors that have been pointed out you are almost guaranteeing it.

    The only link that I could find (that was working) in this thread was to http://www.anokhi.co.uk/test/test.php. Is this your current working version? Also, where is the “correct” page. When I tried the links you originally posted, I get a redirected landing page that is nothing like the page at the above link.

    I know you are frustrated, but ErnieAlex has provided very good advice. Even if it seems to take you further away from where you want to be, you should follow it and then we can make more adjustments to ultimately get you VALID html output that will do what you need it to do.

    Sponsor our Newsletter | Privacy Policy | Terms of Service