Position an element dynamically on top of an existing element

  • Thread starter Konrad Hammerer
  • Start date
K

Konrad Hammerer

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>
 
C

Chaddy2222

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.
 
K

Konrad Hammerer

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
 
E

Els

Konrad said:
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.
 
J

Jeff

Konrad said:
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
 
K

Konrad Hammerer

Got a URL?
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
 
K

Konrad Hammerer

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
 
E

Els

Konrad said:
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 :)
 
N

Neredbojias

Well bust mah britches and call me cheeky, on Tue, 05 Feb 2008 14:02:17 GMT
Konrad Hammerer scribed:
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.


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.
 
K

Konrad Hammerer

Paste your markup here and see.

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

Thanks,
Konrad
 
J

Jeff

Jonathan said:
<!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
 
J

Jonathan N. Little

Jeff said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top