468,257 Members | 1,501 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

CSS Offset Positionings Problem

I am new to CSS. My task is to add a table and frequently used link on
the right hand side. Here's the html code and css, I really appreciate
if u can copy and paste and take a look. It looks fine if the user
doesn't resize the browser. When the user resize the browser, the
"Frequently Used Link" and "Table 1" and "Table 2" will shift to the
left hand side, but table position is unchanged. I really have no idea
how to fix that. I don't know what's the correct approach, I just try
in different figures manually.

Please advise. Thanks!!

--------------------- test.html ------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<LINK href="style.css" type=text/css rel=stylesheet></HEAD>
<BODY>

<TABLE cellPadding=0 width="100%" border=0>
<TBODY>
<TR cellpadding="0">
<TD height=30><FONT face="Verdana, Arial, Helvetica, sans-serif"
color=white size=6><B><I>T</I></B></FONT><FONT
face="Verdana, Arial, Helvetica, sans-serif" color=white
size=5><B>E<I>S</I>T</B></FONT>&nbsp;&nbsp;<FONT color=white
size=5><B>TEST PAGE</B></FONT> <FONT color=red
size=1>&nbsp;<I>{Version 10.0}</I></FONT></TD>
<TD align=right bgColor=white height=20><BR><A
href=""
target=_blank>Check Sessions</A> </TD></TR></TBODY></TABLE>

<DIV id=FUL_DEV>
<H2 class=SECOND>Frequently Used Links</H2>
<P class=links><A
onclick="MM_showHideLayers('COIS','','show', 'COISUT','','hide')"
href="#">Table 1</A> | <A
onclick="MM_showHideLayers('COIS','','hide', 'COISUT','','show')"
href="#">Table 2</A>
</P></DIV>
<DIV id=COIS style="VISIBILITY: visible">
<TABLE class=SECOND border=1>
<TBODY>
<TR>
<TH class=SECOND>Table 1</TH>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 100</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 101</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 102</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 103</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 104</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 105</A> </TD></TR></TBODY></TABLE></DIV>
<DIV id=COISUT style="VISIBILITY: hidden">
<TABLE class=SECOND border=1>
<TBODY>
<TR>
<TH class=SECOND>Table 2</TH>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 101</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 102</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 103</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 104</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 105</A> </TD></TR>
<TR>
<TD class=SECOND><A
href=""
target=_blank>BUILD 106</A> </TD></TR></TBODY></TABLE></DIV>
<H2>Link 1</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 101</A> </TD>
<TD><A href=""
target=_blank>BUILD 102</A> </TD></TR></TBODY></TABLE>

<H2>Link 2</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 103</A> </TD>
<TD><A href=""
target=_blank>BUILD 104</A> </TD></TR></TBODY></TABLE>

<H2>Link 3</H2>
<TABLE class=THIRD border=0>
<TBODY>
<TR>
<TD><A href=""
target=_blank>BUILD 105</A> </TD>
<TD><A href=""
target=_blank>BUILD 106</A> </TD></TR></TBODY></TABLE>
</BODY></HTML>
---------------------------- style.css
--------------------------------

H1 {
FONT: 21px Georgia
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 120%;
PADDING-BOTTOM: 12px; MARGIN: 0px; COLOR: #006; PADDING-TOP: 12px
}
H2.SECOND {
COLOR: red
}
DIV {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN:
0px; WIDTH: auto; PADDING-TOP: 0px
}
#FUL_TEST {
PADDING-RIGHT: 60px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM:
0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px
}
#FUL_DEV {
PADDING-RIGHT: 110px; PADDING-LEFT: 0px; FLOAT: right;
PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: auto; PADDING-TOP: 0px
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN:
0px; PADDING-TOP: 10px
}
..links {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE:
80%; PADDING-BOTTOM: 6px; MARGIN: 0px; PADDING-TOP: 0px
}
INPUT {
FONT: 9px Arial, Helvetica, sans-serif
}
TABLE {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid;
BORDER-LEFT: #000 1px solid; WIDTH: 100%; BORDER-BOTTOM: #000 1px
solid; BORDER-COLLAPSE: collapse
}
TABLE.SECOND {
RIGHT: 10px; WIDTH: 30%; POSITION: absolute; TOP: 135px
}
TABLE.THIRD {
WIDTH: 65%
}
TABLE.PROD {
RIGHT: 10px; WIDTH: 30%; POSITION: absolute; TOP: 83px
}
TH {
FONT: 9px Arial, Helvetica, sans-serif; COLOR: #fff;
BACKGROUND-COLOR: #006
}
TH.SECOND {
FONT: bold 12px Georgia; BACKGROUND-COLOR: #0000ff
}
TD {
BORDER-RIGHT: #999 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #999
1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 4px; FONT: 11px Verdana,
Geneva, Arial, Helvetica, sans-serif; VERTICAL-ALIGN: top;
BORDER-LEFT: #999 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #999 1px
solid; BACKGROUND-COLOR: #ccc
}
TD.SECOND {
BACKGROUND-COLOR: #ffffcc
}
A:visited {
COLOR: black
}
Jul 20 '05 #1
0 11165

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Michael Jordan | last post: by
4 posts views Thread by __jakal__ | last post: by
2 posts views Thread by =?Utf-8?B?Sm9ubnk=?= | last post: by
8 posts views Thread by Thomas Mlynarczyk | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by kermitthefrogpy | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.