SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Euthanasia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal/Vertical Scrollbars in pure CSS/DIV design

    All:

    I'm having a problem with horizontal and vertical scrollbars showing up in IE 6, Opera 7.54 (and probably other browsers, although I can't really check right now) in a pure CSS/DIV (tableless) design.

    It's really starting to get aggravating.

    The code is rather dirty right now (this is still pretty raw, and I'm not done with a lot of things), but my biggest problem is cleaning up these scrollbars.

    Since the code is dirty (and large), here's a URL:

    http://www.sesock.com/abletech

    Any help you can provide would be most appreciated. Thank you in advance.

  2. #2
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Euthanasia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Alright, found a kludge for this (which will get me by for the time being, but a better fix would be much appreciated).

    Now I'm having trouble wrapping text around the #newsbox div. Float doesn't seem to be working, except for the first line of text.

    The new page with the (semi-)fixed problems and new floats is http://sesock.com/abletech/index2.html

    I know I'm missing something idiotic.

    Thanks again.

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

    You have some strange things going on in that code

    You have floated things and then used absolute positioning on them. It can't be both lol, use one or the other. This is the problem with your newsbox.

    The page is suffering from divitus in that you have a lot of nestings that could be eliminated with a little bit more thought.

    As an example I have just recoded your header into one div instead of the five that you had.

    The other problems are in specifying 100% widths and heights in elements that either are positioned in some way from the top or the side and will therefore incur scrolbars.

    Heres the page with the top recoded as an example. I haven't had time to do the whole page but I have made the page work so that it should display ok.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Oklahoma AbleTech - Oklahoma's Assistive Technology Project</title>
    <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
    <link rel='help' href='/help/' title='Help' />
    <link rel="author" href="http://www.sesock.com" title="Kevin A. Sesock" />
    <link rel="copyright" href="/help/copyright.htm" title="Copyright (c) 2004 Oklahoma AbleTech" />
    <link rev="made" href="mailto:blunruh@okstate.edu" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="description" content="Oklahoma AbleTech provides information, assistance, support, and advocacy for Oklahoma's furtherance of Assistive Technology in support of persons with disabilities" />
    <meta name="Keywords" content="Oklahoma,Oklahoma State,assistive technology,assistive tech,access,accessibility,Section 508,House Bill 2197,HB 2197,disabilities,disabled,persons with disabilities,people with disabilities,alternative,adaptive,adaptive technology" />
    <style type="text/css">
    <!--
    html, body { 
    height:100%; 
    width:100%; 
    margin:0;
    padding: 0;
    }
    body{background: url(http://sesock.com/abletech/images/navbar.png) repeat-y left top;}
    #leftcorner1 {
     position: absolute;
     top: 80px;
     left: 0px;
     z-index:1;
    } 
    #leftcorner2 {
     position: absolute;
     top: 80px;
     left:151px;
     z-index:1;
    }
    #topContainer {
     height: 80px;
     background-image: url(http://sesock.com/abletech/images/headercolor.png);
     background-repeat: repeat-x;
    }
    #navbar {
     width: 152px;
     vertical-align: top;
     float: left;
     position:relative;
     z-index:100;
    }
    .mainContainer {
     position: relative;
     margin-top:45px;
     z-index:100;
    }
    #headerimg {margin-left:-4px;}
    #newsbox {
     width: 300px;
     float: right;
     position:relative;
    }
    #newsboxhead {
     width: 300px;
     height: 23px;
     position:relative;
    }
    #newsboxcontents {
     background-color: #aaaaff;
     background-image: url(http://sesock.com/abletech/images/foldercenter.png);
     background-repeat: repeat-x;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-left-width: 1px;
     border-right-style: solid;
     border-left-style: solid;
     border-right-color: #000000;
     border-left-color: #000000;
     overflow: auto;
    }
    .standardText {
     font-family: Verdana, Tahoma, Arial, Geneva, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     clear: left;
    }
    #content {
     position: relative;
     height: auto;
     margin-right: 10px;
     margin-left: 155px;
    }
    .mainTextArea{
     position: relative;
     margin-right: 10px;
    }
    #newsboxheadleft {
     position: absolute;
     background-image: url(http://sesock.com/abletech/images/tableft.png);
     background-repeat: no-repeat;
     width: 30px;
     height: 23px;
     left: 0px;
     top: 0px;
    }
    #newsboxheadcenter {
     background-image: url(http://sesock.com/abletech/images/tabcenter.png);
     background-repeat: repeat-x;
     position: absolute;
     height:23px;
     top: 0px;
     margin-left: 29px;
     margin-right: 8px;
     voice-family: "\"}\"";
     voice-family: inherit;
    	margin-left: 30px;
    	margin-right: 10px;
     width: 263px;
    }
    html>body #newsboxheadcenter {
     margin-left: 30px;
     margin-right: 10px;
    }
    #newsboxheadright {
     background-image: url(http://sesock.com/abletech/images/tabright.png);
     background-repeat: no-repeat;
     position: absolute;
     width: 9px;
     right: 0px;
     top: 0px;
     height: 23px;
    }
    #navclear {
      display: block;
    clear: both; }
    .blankdiv{}
    -->
    	</style>
    <!--[if gte IE 5.5000]>
    <script type="text/javascript" src="http://sesock.com/abletech/scripts/pngfix.js"></script>
    <![endif]-->
    </head>
    <body>
    <div id="full"> 
      <div id="topContainer"> 
       <img src="http://sesock.com/abletech/images/topleft.png" alt="AbleTech Logo" /> 
    	<img src="http://sesock.com/abletech/images/header.png" alt= "Oklahoma AbleTech, Oklahoma's Assistive Technology Project" width="307" height="75" id="headerimg" /> 
    	<img id="leftcorner1" src="http://sesock.com/abletech/images/logodown.png" width="151" height="60" alt=" " /> 
    	<img id="leftcorner2" src="http://sesock.com/abletech/images/corner.png" width="53" height="60" alt=" " /> 
      </div>
      <div class="mainContainer"> 
    	<div id="navbar">hello</div>
    	<div></div>
    	<div id="content"> 
    	  <div id="newsbox"> 
    		<div id="newsboxhead"> 
    		  <div id="newsboxheadleft"></div>
    		  <div id="newsboxheadcenter"> 
    			<p class="standardText">Oklahoma Access News</p>
    		  </div>
    		  <div id="newsboxheadright"></div>
    		</div>
    		<div id="newsboxcontents"><span class="standardText">Do you need to buy 
    		  equipment due to a disability? Do you need a loan to make the purchase? 
    		  Then you may need one of two Low Interest Alternative Lending Programs!</span></div>
    	  </div>
    	  <div class="mainTextArea"> Oklahoma ABLE Tech's Mission is to facilitate 
    		systems change to enhance the provision of, access to and funding for 
    		assistive technology so that individuals with disabilities can achieve 
    		their greatest potential.<br />
    		<br />
    		ABLE Tech is funded by the National Institute on Disability and Rehabilitation 
    		Research of the U.S. Department of Education, Grant #H224A50007. The contents 
    		of this site were developed under a grant from the Department of Education. 
    		However the contents do not necessarily represent the policy of the Department 
    		of Education, and you should not assume endorsement by the Federal government.<br />
    		<br />
    		The pages of this website form a living document and are regularly updated. 
    		We strive to make them accessible to everyone. Suggestions for increasing 
    		the accessibility of these pages are welcome. 800-257-1705 V/TDD or email 
    		blunruh@okstate.edu<br />
    		<br />
    	  </div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    Hope that helps anyway.

    Paul

  4. #4
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Euthanasia
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So far, so good. It would appear that everything's working in IE6 and Opera 7.54. I'll keep playing with it.

    Thanks for the help.


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
  •