resize the browser and change the CSS position settings

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Matt

    resize the browser and change the CSS position settings

    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;&nbs p;<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>C heck Sessions</A> </TD></TR></TBODY></TABLE>

    <DIV id=FUL_DEV>
    <H2 class=SECOND>Fr equently Used Links</H2>
    <P class=links><A
    onclick="MM_sho wHideLayers('CO IS','','show', 'COISUT','','hi de')"
    href="#">Table 1</A> | <A
    onclick="MM_sho wHideLayers('CO IS','','hide', 'COISUT','','sh ow')"
    href="#">Table 2</A>
    </P></DIV>
    <DIV id=COIS style="VISIBILI TY: visible">
    <TABLE class=SECOND border=1>
    <TBODY>
    <TR>
    <TH class=SECOND>Ta ble 1</TH>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 100</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 101</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 102</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 103</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 104</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 105</A> </TD></TR></TBODY></TABLE></DIV>
    <DIV id=COISUT style="VISIBILI TY: hidden">
    <TABLE class=SECOND border=1>
    <TBODY>
    <TR>
    <TH class=SECOND>Ta ble 2</TH>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 101</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 102</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 103</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 104</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 105</A> </TD></TR>
    <TR>
    <TD class=SECOND><A
    href=""
    target=_blank>B UILD 106</A> </TD></TR></TBODY></TABLE></DIV>


    <H2>Link 1</H2>
    <TABLE class=THIRD border=0>
    <TBODY>
    <TR>
    <TD><A href=""
    target=_blank>B UILD 101</A> </TD>
    <TD><A href=""
    target=_blank>B UILD 102</A> </TD></TR></TBODY></TABLE>

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

    <H2>Link 3</H2>
    <TABLE class=THIRD border=0>
    <TBODY>
    <TR>
    <TD><A href=""
    target=_blank>B UILD 105</A> </TD>
    <TD><A href=""
    target=_blank>B UILD 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
    }
  • Neal

    #2
    Re: resize the browser and change the CSS position settings

    On 29 Feb 2004 22:20:06 -0800, Matt <jrefactors@hot mail.com> wrote:
    [color=blue]
    > 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!!
    >[/color]

    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>Fr equently&nbsp;U sed&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.

    Comment

    • Matt

      #3
      Re: resize the browser and change the CSS position settings

      Neal <neal413@spamrc n.com> wrote in message
      [color=blue]
      > 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>Fr equently&nbsp;U sed&nbsp;Links</H2> and
      > <H2>Link&nbsp;1 </H2>, see if it helps do what you want.[/color]

      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!

      Comment

      • Neal

        #4
        Re: resize the browser and change the CSS position settings

        On 1 Mar 2004 10:19:31 -0800, Matt <jrefactors@hot mail.com> wrote:[color=blue]
        > 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![/color]


        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.

        Comment

        • Matt

          #5
          Re: resize the browser and change the CSS position settings

          Neal <neal413@spamrc n.com> wrote in message[color=blue]
          > 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.[/color]


          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


          Here's the screen shot that specifies the problem


          Here's the source code


          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!

          Comment

          Working...