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