Position an element dynamically on top of an existing element

Discussion in 'HTML' started by Konrad Hammerer, Feb 5, 2008.

  1. Hi!

    I have a table with 2 rows and 4 columns on my web page and I need to
    position an image as a link on top of the table in the middle of the
    first four TD's. The problem with "position: absolute" is, that the
    table is created with align="center" and so the table changes it's
    position while resizing the browser. I was able to solve this problem
    for Firefox but not for IE! Can somebody tell me how to do such a thing?

    With the IE, the extra table is not even visible because of the negative
    left value. With Firefox, this negative value is ok, because the
    align="center" places the object in the middle of the page.

    My code (working with Firefox but not within IE):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>Test</title>
    </head>
    <body>
    <TABLE align="center">
    <TR>
    <TD>
    <TABLE>
    <TR>
    <TD STYLE="background-color: red; width: 100px; height:
    100px;">test1</TD>
    <TD STYLE="background-color: green; width: 100px; height:
    100px;">test2</TD>
    <TD STYLE="background-color: blue; width: 100px; height:
    100px;">test3</TD>
    <TD STYLE="background-color: yellow; width: 100px; height:
    100px;">test4</TD>
    </TR>
    <TR>
    <TD STYLE="background-color: yellow; width: 100px; height:
    100px;">test4</TD>
    <TD STYLE="background-color: blue; width: 100px; height:
    100px;">test3</TD>
    <TD STYLE="background-color: green; width: 100px; height:
    100px;">test2</TD>
    <TD STYLE="background-color: red; width: 100px; height:
    100px;">test1</TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>
    <TABLE align="center"
    STYLE="background-color:Crimson;Position:absolute; Left: -105px; Top:
    90px; width: 50px; height: 50px; Z-Index: 1;">
    <TR>
    <TD><a href="#">Button</a></TD>
    </TR>
    </TABLE>
    </body>
    </html>
     
    Konrad Hammerer, Feb 5, 2008
    #1
    1. Advertising

  2. Konrad Hammerer

    Chaddy2222 Guest

    On Feb 5, 9:59 pm, Konrad Hammerer <> wrote:
    > Hi!
    >
    > I have a table with 2 rows and 4 columns on my web page and I need to
    > position an image as a link on top of the table in the middle of the
    > first four TD's. The problem with "position: absolute" is, that the
    > table is created with align="center" and so the table changes it's
    > position while resizing the browser. I was able to solve this problem
    > for Firefox but not for IE! Can somebody tell me how to do such a thing?
    >
    > With the IE, the extra table is not even visible because of the negative
    > left value. With Firefox, this negative value is ok, because the
    > align="center" places the object in the middle of the page.
    >
    > My code (working with Firefox but not within IE):
    >

    <snip>
    Got a URL?
    BTW make it a strict DTD and validate your code.
    You should also NOT use XHTML unless you really know what your doing.
    --
    Regards Chad. http://freewebdesignonline.org
     
    Chaddy2222, Feb 5, 2008
    #2
    1. Advertising

  3. > Got a URL?

    No, but I posted the code so just copy it into a file *.html and load it
    into your browser. Then you should see the problem with Firefox and IE.

    > BTW make it a strict DTD and validate your code.
    > You should also NOT use XHTML unless you really know what your doing.


    I used Visual Studio 2005 Express Edition to create the web site and
    these two lines:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >

    were generated by the VS. I do not really now what they mean or what
    else I should use, so...

    Best and thanks,
    Konrad

    > --
    > Regards Chad. http://freewebdesignonline.org
     
    Konrad Hammerer, Feb 5, 2008
    #3
  4. Konrad Hammerer

    Els Guest

    Konrad Hammerer wrote:

    >> Got a URL?

    >
    > No, but I posted the code so just copy it into a file *.html and load it
    > into your browser. Then you should see the problem with Firefox and IE.


    Since it is your problem, it is in your best interest to make it as
    easy as possible for others to help you. This means that *you* copy it
    into an HTML file and upload it somewhere so that others can instantly
    see what the problem is.

    --
    Els http://locusmeus.com/
     
    Els, Feb 5, 2008
    #4
  5. Konrad Hammerer

    Jeff Guest

    Konrad Hammerer wrote:
    > Hi!
    >
    > I have a table with 2 rows and 4 columns on my web page and I need to
    > position an image as a link on top of the table in the middle of the
    > first four TD's. The problem with "position: absolute" is, that the
    > table is created with align="center" and so the table changes it's
    > position while resizing the browser. I was able to solve this problem
    > for Firefox but not for IE! Can somebody tell me how to do such a thing?


    It's just wrong the way you are going about this. Absolute positioning
    should overide everything else as it should be absolute to the page, it
    shouldn't be in addition to align="center".

    If you have to do something like at least do it with relative positions:

    <TABLE align="center"
    STYLE="background-color:Crimson;position:relative; left: 0px; top:
    -130px; width: 50px; height: 50px; Z-Index: 1;">
    <TR>
    <TD><a href="#">Button</a></TD>
    </TR>
    </TABLE>

    BTW, whatever you are using to edit html is writing some real crap.

    Jeff

    >
    > With the IE, the extra table is not even visible because of the negative
    > left value. With Firefox, this negative value is ok, because the
    > align="center" places the object in the middle of the page.
    >
    > My code (working with Firefox but not within IE):
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" >
    > <head>
    > <title>Test</title>
    > </head>
    > <body>
    > <TABLE align="center">
    > <TR>
    > <TD>
    > <TABLE>
    > <TR>
    > <TD STYLE="background-color: red; width: 100px; height:
    > 100px;">test1</TD>
    > <TD STYLE="background-color: green; width: 100px; height:
    > 100px;">test2</TD>
    > <TD STYLE="background-color: blue; width: 100px; height:
    > 100px;">test3</TD>
    > <TD STYLE="background-color: yellow; width: 100px; height:
    > 100px;">test4</TD>
    > </TR>
    > <TR>
    > <TD STYLE="background-color: yellow; width: 100px; height:
    > 100px;">test4</TD>
    > <TD STYLE="background-color: blue; width: 100px; height:
    > 100px;">test3</TD>
    > <TD STYLE="background-color: green; width: 100px; height:
    > 100px;">test2</TD>
    > <TD STYLE="background-color: red; width: 100px; height:
    > 100px;">test1</TD>
    > </TR>
    > </TABLE>
    > </TD>
    > </TR>
    > </TABLE>
    > <TABLE align="center"
    > STYLE="background-color:Crimson;Position:absolute; Left: -105px; Top:
    > 90px; width: 50px; height: 50px; Z-Index: 1;">
    > <TR>
    > <TD><a href="#">Button</a></TD>
    > </TR>
    > </TABLE>
    > </body>
    > </html>
     
    Jeff, Feb 5, 2008
    #5
  6. >>> Got a URL?
    >> No, but I posted the code so just copy it into a file *.html and load it
    >> into your browser. Then you should see the problem with Firefox and IE.

    >
    > Since it is your problem, it is in your best interest to make it as
    > easy as possible for others to help you. This means that *you* copy it
    > into an HTML file and upload it somewhere so that others can instantly
    > see what the problem is.
    >


    Every person has a reason for his behavior and in MY case the reason is,
    that I do have a webspace where I could provide the html file but I
    CANNOT access it from here (all necessary ports are blocked by our
    firewall). So the only thing I can do at the moment is posting the code
    and hope that people, willing to help, will copy it into a file and
    click on it. This should not be too much, I guess!

    But you are right (from your point of view) and later tonight from at
    home I will provide a link showing my problem!

    Best,
    Konrad
     
    Konrad Hammerer, Feb 5, 2008
    #6
  7. > It's just wrong the way you are going about this. Absolute positioning
    > should overide everything else as it should be absolute to the page, it
    > shouldn't be in addition to align="center".
    >
    > If you have to do something like at least do it with relative positions:
    >
    > <TABLE align="center"
    > STYLE="background-color:Crimson;position:relative; left: 0px; top:
    > -130px; width: 50px; height: 50px; Z-Index: 1;">
    > <TR>
    > <TD><a href="#">Button</a></TD>
    > </TR>
    > </TABLE>


    Ok! With relative it is working! Thank you very much...

    > BTW, whatever you are using to edit html is writing some real crap.


    What do you mean by this in particularly?

    Best,
    Konrad


    >
    > Jeff
    >
    >>
    >> With the IE, the extra table is not even visible because of the
    >> negative left value. With Firefox, this negative value is ok, because
    >> the align="center" places the object in the middle of the page.
    >>
    >> My code (working with Firefox but not within IE):
    >>
    >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >> <html xmlns="http://www.w3.org/1999/xhtml" >
    >> <head>
    >> <title>Test</title>
    >> </head>
    >> <body>
    >> <TABLE align="center">
    >> <TR>
    >> <TD>
    >> <TABLE>
    >> <TR>
    >> <TD STYLE="background-color: red; width: 100px; height:
    >> 100px;">test1</TD>
    >> <TD STYLE="background-color: green; width: 100px; height:
    >> 100px;">test2</TD>
    >> <TD STYLE="background-color: blue; width: 100px; height:
    >> 100px;">test3</TD>
    >> <TD STYLE="background-color: yellow; width: 100px; height:
    >> 100px;">test4</TD>
    >> </TR>
    >> <TR>
    >> <TD STYLE="background-color: yellow; width: 100px; height:
    >> 100px;">test4</TD>
    >> <TD STYLE="background-color: blue; width: 100px; height:
    >> 100px;">test3</TD>
    >> <TD STYLE="background-color: green; width: 100px; height:
    >> 100px;">test2</TD>
    >> <TD STYLE="background-color: red; width: 100px; height:
    >> 100px;">test1</TD>
    >> </TR>
    >> </TABLE>
    >> </TD>
    >> </TR>
    >> </TABLE>
    >> <TABLE align="center"
    >> STYLE="background-color:Crimson;Position:absolute; Left: -105px; Top:
    >> 90px; width: 50px; height: 50px; Z-Index: 1;">
    >> <TR>
    >> <TD><a href="#">Button</a></TD>
    >> </TR>
    >> </TABLE>
    >> </body>
    >> </html>
     
    Konrad Hammerer, Feb 5, 2008
    #7
  8. Konrad Hammerer

    Els Guest

    Konrad Hammerer wrote:

    >>>> Got a URL?
    >>> No, but I posted the code so just copy it into a file *.html and load it
    >>> into your browser. Then you should see the problem with Firefox and IE.

    >>
    >> Since it is your problem, it is in your best interest to make it as
    >> easy as possible for others to help you. This means that *you* copy it
    >> into an HTML file and upload it somewhere so that others can instantly
    >> see what the problem is.

    >
    > Every person has a reason for his behavior and in MY case the reason is,
    > that I do have a webspace where I could provide the html file but I
    > CANNOT access it from here (all necessary ports are blocked by our
    > firewall). So the only thing I can do at the moment is posting the code
    > and hope that people, willing to help, will copy it into a file and
    > click on it. This should not be too much, I guess!


    Well, it would of course help if you'd stated that up front :)

    --
    Els http://locusmeus.com/
     
    Els, Feb 5, 2008
    #8
  9. Konrad Hammerer

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 05 Feb 2008 14:02:17 GMT
    Konrad Hammerer scribed:

    >> Got a URL?

    >
    > No, but I posted the code so just copy it into a file *.html and load it
    > into your browser. Then you should see the problem with Firefox and IE.
    >
    >> BTW make it a strict DTD and validate your code.
    >> You should also NOT use XHTML unless you really know what your doing.

    >
    > I used Visual Studio 2005 Express Edition to create the web site and
    > these two lines:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" >
    >
    > were generated by the VS. I do not really now what they mean or what
    > else I should use, so...


    Wierd. IE can't read xhtml (correctly) but VS outputs xhtml... I feel
    light-headed.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Feb 5, 2008
    #9
  10. Konrad Hammerer wrote:
    >> It's just wrong the way you are going about this. Absolute positioning
    >> should overide everything else as it should be absolute to the page,
    >> it shouldn't be in addition to align="center".
    >>
    >> If you have to do something like at least do it with relative positions:
    >>
    >> <TABLE align="center"
    >> STYLE="background-color:Crimson;position:relative; left: 0px; top:
    >> -130px; width: 50px; height: 50px; Z-Index: 1;">
    >> <TR>
    >> <TD><a href="#">Button</a></TD>
    >> </TR>
    >> </TABLE>

    >
    > Ok! With relative it is working! Thank you very much...
    >
    >> BTW, whatever you are using to edit html is writing some real crap.

    >
    > What do you mean by this in particularly?
    >



    Paste your markup here and see.

    http://validator.w3.org/#validate_by_input
    The W3C Markup Validation Service

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 5, 2008
    #10
  11. Konrad Hammerer, Feb 6, 2008
    #11
  12. Konrad Hammerer wrote:
    >> Paste your markup here and see.

    >
    > What is the "best" doctype to use for a "normal" website?


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 6, 2008
    #12
  13. Thank you!

    Best,
    Konrad

    Jonathan N. Little schrieb:
    > Konrad Hammerer wrote:
    >>> Paste your markup here and see.

    >>
    >> What is the "best" doctype to use for a "normal" website?

    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    >
    >
     
    Konrad Hammerer, Feb 7, 2008
    #13
  14. Konrad Hammerer

    Jeff Guest

    Jonathan N. Little wrote:
    > Konrad Hammerer wrote:
    >>> Paste your markup here and see.

    >>
    >> What is the "best" doctype to use for a "normal" website?

    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">


    That would be for new work. If you have an existing page running in
    quirks mode you may, or may not have trouble with the widths of the
    standards mode box type. Things can break when your boxes are wider
    (because they now include padding and borders) than they were before as
    width calculations change. But if they don't you are good to go.

    Jeff
    >
    >
    >
     
    Jeff, Feb 7, 2008
    #14
  15. Jeff wrote:
    > Jonathan N. Little wrote:
    >> Konrad Hammerer wrote:
    >>>> Paste your markup here and see.
    >>>
    >>> What is the "best" doctype to use for a "normal" website?

    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">

    >
    > That would be for new work. If you have an existing page running in
    > quirks mode you may, or may not have trouble with the widths of the
    > standards mode box type. Things can break when your boxes are wider
    > (because they now include padding and borders) than they were before as
    > width calculations change. But if they don't you are good to go.
    >


    I believe the OP's question was in reference to *new* work for a
    "normal" website.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Feb 7, 2008
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. nrm
    Replies:
    3
    Views:
    579
  2. Frederic HOUDE
    Replies:
    4
    Views:
    629
    Frederic HOUDE
    Aug 31, 2004
  3. Replies:
    0
    Views:
    216
  4. Amir Hardon
    Replies:
    0
    Views:
    291
    Amir Hardon
    May 31, 2004
  5. Pugi!
    Replies:
    10
    Views:
    218
    Randy Webb
    Dec 19, 2006
Loading...

Share This Page