By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,925 Members | 732 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,925 IT Pros & Developers. It's quick & easy.

resize the browser and change the CSS position settings

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
On 29 Feb 2004 22:20:06 -0800, Matt <jr********@hotmail.com> wrote:
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!!


You've floated things, and this is normal and expected behavior for
floats. Things bump around on purpose.

What's the desired effect? Hard to correct when it all acts normally to
me... I don't know, try using <H2
class=SECOND>Frequently&nbsp;Used&nbsp;Links</H2> and
<H2>Link&nbsp;1</H2>, see if it helps do what you want.

BTW, unrelated, but there's no cellspacing allowed on TR, and you get a
warning on the CSS for not indicating a generic family (th.second). Be
sure your server declares the charset too.
Jul 20 '05 #2

P: n/a
Neal <ne*****@spamrcn.com> wrote in message
You've floated things, and this is normal and expected behavior for
floats. Things bump around on purpose.

What's the desired effect? Hard to correct when it all acts normally to
me... I don't know, try using <H2
class=SECOND>Frequently&nbsp;Used&nbsp;Links</H2> and
<H2>Link&nbsp;1</H2>, see if it helps do what you want.


When we resize the browser, I guess there are 2 different possible
effects, please correct me if i am wrong.

1. When we resize the browser, the html elements float around and
offset the positions, but the user doesn't need to scroll the bottom
scroll bar to see all the contents.

2. the user needs to scroll the bottom scroll bar in order to see all
the contents in the browser.

Which effect is more popular? seems like the second one?

So what you mean is my code has the first effect. How about if i want
the second effect?

Please advise. thanks!
Jul 20 '05 #3

P: n/a
On 1 Mar 2004 10:19:31 -0800, Matt <jr********@hotmail.com> wrote:
When we resize the browser, I guess there are 2 different possible
effects, please correct me if i am wrong.

1. When we resize the browser, the html elements float around and
offset the positions, but the user doesn't need to scroll the bottom
scroll bar to see all the contents.

2. the user needs to scroll the bottom scroll bar in order to see all
the contents in the browser.

Which effect is more popular? seems like the second one?

So what you mean is my code has the first effect. How about if i want
the second effect?

Please advise. thanks!

Rule of thumb to follow - scrolling up and down is fine. Scrolling left to
right is not fine. Users do prefer all elements in the browser at once. So
I'd go for scenario 1 if I were you.

What is happening on your page is the text wraps and causes that weird
up-and-down jumping as you shrink the browser. The bit below can be up
close, but when the text wraps the other box jumps to be where it needs to
be in relation to that.

Adding the &nbsp; like I did prevents the jumping, and IIRC (wish you
posted this on a live page for reference, I've erased my mockup) the
browser hadto be somewhere near 300px to have a scroll bar. To me,
scrolling when that small is acceptable, as it's not an accessibility
issue, it's a user preference at that small a viewport sizing. (As long as
any element is assigned a width, you're going to see a horizontal
scrollbar at some point.)

Try that first, see if you like it.
Jul 20 '05 #4

P: n/a
Neal <ne*****@spamrcn.com> wrote in message
Rule of thumb to follow - scrolling up and down is fine. Scrolling left to
right is not fine. Users do prefer all elements in the browser at once. So
I'd go for scenario 1 if I were you.

What is happening on your page is the text wraps and causes that weird
up-and-down jumping as you shrink the browser. The bit below can be up
close, but when the text wraps the other box jumps to be where it needs to
be in relation to that.

Adding the &nbsp; like I did prevents the jumping, and IIRC (wish you
posted this on a live page for reference, I've erased my mockup) the
browser hadto be somewhere near 300px to have a scroll bar. To me,
scrolling when that small is acceptable, as it's not an accessibility
issue, it's a user preference at that small a viewport sizing. (As long as
any element is assigned a width, you're going to see a horizontal
scrollbar at some point.)

Try that first, see if you like it.

Thanks Neal.

I added nbsp; in between Frequently Used Link as you suggested,
but the text still jumps to the left hand side. But I dont understand
what's the difference between "A B" and "A&nbsp;B" ?? I think
both are the same and has a space between.

I put the page in the following links. If there are banners, please close it.

Here's the page
http://www21.brinkster.com/xpproject...t/csstest.html

Here's the screen shot that specifies the problem
http://www21.brinkster.com/xpproject...creenshot.html

Here's the source code
http://www21.brinkster.com/xpproject...st/source.html

I really hope when we resize the browser, the text Frequently Used
Link and the links table 1 and table 2 will still line up with
table 1 on the right hand side.

Please advise. Thanks!
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.