Position Problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Dan
    #1

    Position Problem

    I'm trying to create a menu in javascript. I've created the bitmaps with
    text over the top of them. The problem i'm having is that the positions
    aren't correct. If I wrap the code in PRE tags, then this fixes it. But
    this seems to be a bit of a hack, as apposed to finding what the bug is.
    I've included examples of the problem below:

    http://dracan.x-1.net/test/index.html (Demonstrates the problem)
    http://dracan.x-1.net/test/index2.html (Using the PRE hacky fix)

    The actual relevant javascript code is here:

    http://dracan.x-1.net/test/menu.js


    Thanks for any help,
    Dan.


    Tags: None
    • Paul Wellner Bou
      #2
      Re: Position Problem

      Hi Dan,

      You wrote:[color=blue]
      > I've created the bitmaps with text over the top of them.[/color]

      I hope you're not using bitmaps but jpegs or gifs... ;-)
      [color=blue]
      > The problem i'm having is that the positions
      > aren't correct.[/color]

      Just look in your JavaScript source, Line 29:

      document.writel n (">" + obj_text + "<\DIV>\n") ;

      To close a Tag you can't use <\DIV>. The backslash is to
      escape characters, like \" or \n f.e. To close tags you have
      to use the slash: </DIV>.
      So, as your DIVS aren't closed properly, the second DIV is
      into the first and it's position is relative to the margins
      of the first divs, the same thing happens with the third div,
      which is placed into the second div, and so on.
      [color=blue]
      > If I wrap the code in PRE tags, then this fixes it.[/color]

      It shouldn't. Browserbug... :-)

      Saludo
      Paul.

        Comment

        • Lasse Reichstein Nielsen
          #3
          Re: Position Problem

          Paul Wellner Bou <paul.wellner@u nited-scripts.com> writes:
          [color=blue][color=green]
          > > If I wrap the code in PRE tags, then this fixes it.[/color]
          >
          > It shouldn't. Browserbug... :-)[/color]

          Not really,

          The pre tag wrapper have the correct end tag, so the implicit missing
          end tag for the divs are placed before the end tag of the pre element.
          You could do the same by wrapping it in any block level element,
          except div.

          Example:
          Incorrect code:
          <body>
          <div> foo <\div>
          <div> bar <\div>
          </body>
          Browser interprets this as:
          <body>
          <div> foo <div>
          <div> bar <div>
          </div></div></div></div>
          </body>

          This is "correct" behavior (or at least expected). The end tag of div
          elements are not optional, but the browsers are forgiving and accepts
          it when you leave them out. It inserts the end tags where they are
          needed. The </body> terminates an element that started before the
          divs, so the divs need to be terminated first to preserve proper
          nesting. You could see this pattern when looking at the innerHTML
          of the generated page.

          Incorrect code with pre's:
          <body>
          <pre><div> foo <\div></pre>
          <pre><div> bar <\div></pre>
          </body>
          Browser interprets this as:
          <body>
          <pre><div> foo <div></div></div></pre>
          <pre><div> bar <div></div></div></pre>
          </body>

          Here the pres force the divs to end, so they are not nested. It was
          the nesting that positioned the elements incorrectly.

          The code is illegal HTML, but tag-soup-browser error correction is
          fairly predictable.

          /L
          --
          Lasse Reichstein Nielsen - lrn@hotpop.com
          Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
          'Faith without judgement merely degrades the spirit divine.'

            Comment

            Previous template Next
            Working...