SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    Albuquerque, NM
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cannot scroll down

    I made a new layout for my page at www.woventhorns.com using only CSS, and in IE 6.0 I can't scroll down, and I have to set a right margin for my description to keep it from going off the page horizontally, which makes the page ugly in non-IE browsers..

    any ideas?

  2. #2
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the overflow: hidden; attributes in your css files.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    As well as removing unnecessary overfow hiddens as mentioned above your page will still not display correctly.

    You have a strange mix of relative and absolute positioning there that is throwing ie and mozilla off (the div above_content disappears in mozilla when the window is resized).

    Change these 2 styles as follows:
    Code:
    #content{
     position:relative;
     padding: 10px;
     text-align: left;
     border: 0;
     align: left;
     }
    #above_content{
     position:absolute;
     top: -90px;
     left: 130px;
     text-align: left;
     padding: 10px;
     font-size: 1.15em;
    }
    That should keep the page as you intend.

    However you have a lot of unnecessary nesting and odd positioning that could be simplified to make your page more logical. Remember that when you use relative positioning to move objects that the space it originally occupied is preserved.

    Hope that helps anyway.

    Paul

  4. #4
    SitePoint Member
    Join Date
    May 2003
    Location
    Albuquerque, NM
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great!

    Any advice on how to make it more logical?

    I don't want you to do my code for me, but I am interested in learning how to be more efficient. I've done a lot of CSS based sites, but they were all very simple and boring, this was my first attempt at a 'shiny' page.

    Maybe just mention a few examples of unneccessary nestings and odd positionings, and why they are so unneccessary and odd? (I'm sure you are right, but since I'm farily new to this, I can't see it yet)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I was thinking about the <div id="bottom_half"> that doesn't seem to be defined in the stylesheet and doesn't seem to be doing anything.

    Also you could get rid of the header div altogether by moving the background image into the body and moving things around a bit.
    e.g.
    Code:
    body{
     margin:0;
     padding:0;
     background-color: #5D92B6;
     font-family: verdana, arial, helvetica, sans-serif;
     background: #5D92B6 url(images/wtdisk.gif) no-repeat top left;
    }
    #right_header{
     background: url(images/curve_right_header.gif) no-repeat top left;
     height: 279px;
     margin: 0 0 0 440px;
     padding-left:50px;
    }
    #right_right_header{
     background: #356A8B url(images/top_right_background.gif) repeat-x top left;
     color: #FFF; 
     height: 175px;
     text-align:right;
     padding:0 0 0 100px;
    }
    #right_header_content {
     padding-top:5px;
     height:170px;
     overflow:hidden;
    }
    I realise now that a lot of your extra elements are taken up by your background images which is why it looked a little strange first off

    Hope that helps anyway.

    Paul


Bookmarks

Posting Permissions

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