Small CSS problem

Discussion in 'HTML' started by Paul F. Johnson, Jul 8, 2005.

  1. Paul F. Johnson, Jul 8, 2005
    #1
    1. Advertising

  2. Paul F. Johnson

    Els Guest

    Paul F. Johnson wrote:

    > Hi,


    Hello

    > Could someone have a look at
    > http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >
    > The problem simple - scroll the window and you will see the text and
    > images appearing above (in part) the ChemiCAL header bar.
    >
    > Any ideas how to prevent this from happening?


    Just guessing:
    set h1{margin-top:0;} and see if it disappears.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: The Rocky Horror Picture Show - Touch-a, Touch-a, Touch
    Me
     
    Els, Jul 8, 2005
    #2
    1. Advertising

  3. Paul F. Johnson wrote:
    > Could someone have a look at
    > http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >
    > The problem simple - scroll the window and you will see the text
    > and images appearing above (in part) the ChemiCAL header bar.


    Are you aware that IE does not recognize position: fixed and that
    your whole page scrolls, including your "header bar?" I don't see any
    reason for you to do this, as that area is quite large and takes away
    from viewing content space in my other, modern, browser windows.

    > Any ideas how to prevent this from happening?


    Remove position: fixed?

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Jul 8, 2005
    #3
  4. Hi,

    Els wrote:

    > Just guessing:
    > set h1{margin-top:0;} and see if it disappears.


    Not locally - so I doubt it will on the server :-(

    The problem looks like it's in the content div. If I change

    h1 {margin-top: -5px;}

    The text still appears at the top. I've tried altering content to be
    either absolute or relative, but that doesn't seem to be doing the trick.

    TTFN

    Paul
     
    Paul F. Johnson, Jul 8, 2005
    #4
  5. Paul F. Johnson

    kchayka Guest

    Paul F. Johnson wrote:

    > http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >
    > The problem simple - scroll the window and you will see the text and
    > images appearing above (in part) the ChemiCAL header bar.


    Per your stylesheet:
    #topblock {
    height: 160px;
    }
    #content {
    padding-top: 160px;
    }

    You apparently expect the text in #topblock to stay within the specified
    height. That is highly dependent on the actual text and viewport sizes.

    When a larger text size than you expect is used, and/or it wraps due to
    smaller viewport size, an overflow on #topblock occurs. The padding on
    #content does not adjust accordingly and you get overlapping text.

    You cannot expect #content to adjust to variables the specs mandate it
    must ignore. Abandon the fixed/absolute positioning, leave the elements
    staticly positioned and automatically sized, and the problem goes away.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jul 8, 2005
    #5
  6. Paul F. Johnson

    Els Guest

    Paul F. Johnson wrote:

    > Hi,
    >
    > Els wrote:
    >
    >> Just guessing:
    >> set h1{margin-top:0;} and see if it disappears.

    >
    > Not locally - so I doubt it will on the server :-(
    >
    > The problem looks like it's in the content div. If I change
    >
    > h1 {margin-top: -5px;}
    >
    > The text still appears at the top. I've tried altering content to be
    > either absolute or relative, but that doesn't seem to be doing the trick.


    #topblock{
    top:0;
    }
    (you used position:fixed without setting a position for it)

    Now.. open up any browser that is not called Internet Explorer, narrow
    your window till the red text wraps. Then scroll...
    Solution:
    Change 'height:160px;' to:
    min-height: 160px;
    _height:160px;

    min-height for browser that understand min-height (will expand when
    the contents are higher (by font-size change or wrapping), and _height
    for WinIE, which will ignore the underscore. Other browsers reckon
    _height doesn't exist, and will ignore the line altogether.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Nazareth - Bad, Bad, Boy
     
    Els, Jul 8, 2005
    #6
  7. Paul F. Johnson

    Els Guest

    kchayka wrote:

    > Paul F. Johnson wrote:
    >
    >> http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >>
    >> The problem simple - scroll the window and you will see the text and
    >> images appearing above (in part) the ChemiCAL header bar.

    >
    > Per your stylesheet:
    > #topblock {
    > height: 160px;
    > }
    > #content {
    > padding-top: 160px;
    > }
    >
    > You apparently expect the text in #topblock to stay within the specified
    > height. That is highly dependent on the actual text and viewport sizes.
    >
    > When a larger text size than you expect is used, and/or it wraps due to
    > smaller viewport size, an overflow on #topblock occurs. The padding on
    > #content does not adjust accordingly and you get overlapping text.
    >
    > You cannot expect #content to adjust to variables the specs mandate it
    > must ignore. Abandon the fixed/absolute positioning, leave the elements
    > staticly positioned and automatically sized, and the problem goes away.


    Yup - that's better advice than I just gave in my other post - I
    hadn't counted with the padding-top on the #content :\

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: The Stranglers - Golden Brown
     
    Els, Jul 8, 2005
    #7
  8. Paul F. Johnson

    dorayme Guest

    > From: "Paul F. Johnson" <>

    > Could someone have a look at
    > http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >
    > The problem simple - scroll the window and you will see the text and
    > images appearing above (in part) the ChemiCAL header bar.
    >
    > Any ideas how to prevent this from happening?
    >


    I could not see your problem in my browsers but there *may* be a few
    mistakes in the css, check these out (courtesy of iCab):

    CSS Error (23/9): Unknown CSS property ³_height².
    CSS Error (51/22): Invalid property value
    ³url="chemical/mirror/images/chemicalcd.png"².
    CSS Error (51/22): Unknown identifier
    ³="chemical/mirror/images/chemicalcd.png"².
    CSS Error (51/62): Invalid property value
    ³"chemical/mirror/images/chemicalcd.png"².
    CSS Error (51/69): Invalid property value ³repeat².
    CSS Error (51/76): Invalid property value ³scroll².

    And in the HTML check out:

    HTML error (4/44): Illegal character ³/² in tag.
    HTML error (5/50): Illegal character ³/² in tag.
    HTML error (6/50): Illegal character ³/² in tag.
    HTML error (7/75): Illegal character ³/² in tag.
    HTML error (26/66): Illegal character ³/² in tag.
    HTML error (38/66): Illegal character ³/² in tag.
    HTML error (39/143): Illegal character ³/² in tag.
    HTML error (43/66): Illegal character ³/² in tag.
    HTML error (55/66): Illegal character ³/² in tag.
    HTML error (56/105): Illegal character ³/² in tag.
    HTML error (60/100): Illegal character ³/² in tag.
    HTML error (61/102): Can¹t find start tag for end tag </FONT>. Maybe the tag
    was implicitly closed before.
    HTML error (61/106): Can¹t find start tag for end tag </B>. Maybe the tag
    was implicitly closed before.
    HTML warning (62/8): The tag <CENTER> is deprecated and should no longer be
    used. It is suggested CSS be used instead.
    HTML warning (66/46): The tag <FONT> is deprecated and should no longer be
    used. It is suggested CSS be used instead.

    dorayme
     
    dorayme, Jul 8, 2005
    #8
  9. Paul F. Johnson

    kchayka Guest

    Els wrote:

    > kchayka wrote:
    >
    >> Abandon the fixed/absolute positioning,

    >
    > Yup - that's better advice than I just gave in my other post - I
    > hadn't counted with the padding-top on the #content :\


    :)
    I've used a similar technique myself, so I spotted the padding right off.

    Positioning like the OP is attempting really only works with graphics
    (known, fixed dimensions) or setting lengths/dimensions in em units, but
    only with short bits of text that aren't likely to cause an overflow,
    even at large text sizes. Pretty much anything else is doomed to failure.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jul 9, 2005
    #9
  10. Paul F. Johnson

    windandwaves Guest

    Paul F. Johnson wrote:
    > Hi,
    >
    > Could someone have a look at
    > http://www.all-the-johnsons.co.uk/chemical/mirror/Postlabs.htm?
    >
    > The problem simple - scroll the window and you will see the text and
    > images appearing above (in part) the ChemiCAL header bar.
    >
    > Any ideas how to prevent this from happening?


    Keep it simple.

    There is nothing fancy about your page. It is just a really simple, easy to
    understand piece of HTML so why add all the complicated css.

    Just like photography css and html are more about leaving things out then
    adding them. It is about knowing when not to shoot rather than when to shoot
    (or use css for that matter).

    Make a page without any formatting at all and then only add what is strictly
    necessary to make it look nice.

    just my five cents worth

    - Nicolaas
     
    windandwaves, Jul 10, 2005
    #10
  11. Hi,

    On Sun, 2005-07-10 at 22:34 +1200, windandwaves wrote:

    > Make a page without any formatting at all and then only add what is strictly
    > necessary to make it look nice.


    I'm trying to make the mirror look and behave like the original - the
    only difference being that the original used frames and that is
    something I never want to touch.

    TTFN

    Paul
    --
    "The city of Washington was built on a stagnant swamp some 200 years ago
    and very little has changed; it stank then and it stinks now. Only
    today, it is the fetid stench of corruption that hangs in the air" -
    Simpson, L. Mr Lisa Goes to Washington (1991) Fox. 8F01 (Sep).
     
    Paul F. Johnson, Jul 10, 2005
    #11
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Learning SQL Server

    Re: DataGrid binding... small problem... help please

    Learning SQL Server, Aug 7, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    320
    Steven
    Aug 7, 2003
  2. Stuart J. Shillinglaw

    <<CSS>> Menu for Opera small screen

    Stuart J. Shillinglaw, Jun 6, 2005, in forum: HTML
    Replies:
    2
    Views:
    541
    Stuart J. Shillinglaw
    Jun 7, 2005
  3. =?Utf-8?B?Q2hpV2hpdGVTb3g=?=

    small problem with ASP 1.1 version problem in IIS6

    =?Utf-8?B?Q2hpV2hpdGVTb3g=?=, Apr 2, 2007, in forum: ASP .Net
    Replies:
    6
    Views:
    395
    =?Utf-8?B?Q2hpV2hpdGVTb3g=?=
    Apr 2, 2007
  4. I.N. Galidakis
    Replies:
    36
    Views:
    1,496
    Gene Wirchenko
    Nov 25, 2011
  5. Singeo
    Replies:
    3
    Views:
    385
    Singeo
    May 27, 2008
Loading...

Share This Page