Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS layout problem with small screen size

    I have a problem with my css layout. I'm very new to using css instead of
    relying entirely on tables so I would really appreciate your help.

    www.bitsypix.com/sigs.html
    www.bitsypix.com/fractals.html


    When the screen goes below 800 x 640, or around there somewhere, the middle
    content (#content - style sheet here: www.bitsypix.com/bitsypix.css ) drops
    way out of site, apparently below the #nav element.
    THis seems to only be happening in IE 5 and 6.
    NN6.2, NN4x, Opera 6 and Mozilla 1.0 create a scroll bar instead of dropping the content.

    What should I do about that? I'd rather have it cause a scroll bar if
    anything.
    Thanks for your help!
    Daf

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    have you tried using percentages rather than set widths. For example instead of:

    <tr>
    <td width="165"><a href="sigs.html" onmouseover="changeImages('image2', 'image2on')"
    onmouseout="changeImages('image2', 'image2off')"><img name="image2" src="images/fractalsigs.gif"
    alt="My Sigs" width="165" height="46" border="0"></a></td>
    </tr>


    try:

    <tr>
    <td width="30%"><a href="sigs.html" onmouseover="changeImages('image2', 'image2on')"
    onmouseout="changeImages('image2', 'image2off')"><img name="image2" src="images/fractalsigs.gif"
    alt="My Sigs" width="165" height="46" border="0"></a></td>
    </tr>
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes- I tried that - no joy.
    Thanks
    anyway tho.
    Daf

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure, but try taking out the margin-left from the content div. When you're floating divs (#nav), better not use margins.

    #content {
    border-left: 1px solid #bc8dd1;
    margin-left: 200px;
    padding: 10px;
    }

  • #5
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response.
    I tried your suggestion and still no joy. Content still drops. But thanks!
    Daf

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    Bulgaria
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    Look at this -> http://www.hftonline.com/forum/showt...&threadid=5488
    It seems Mike have solved Your problem...

    Alex

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As mentioned in the above link, that method does not work in Netscape 4; it's also problematic in IE6 - creates horizontal scrollbars. I would advise trimming down the width proprtions so that the total width = 97%, to avoid this issue.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •