SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling Problem....and its driving me crazy!

    Hey, I'm being annoyed by this problem.....I've started to code my new site but no matter what size it is no browser will scroll. And so i'm left with half a viewable site

    My html :
    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">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <link rel="stylesheet" media="screen" type="text/css" href="default.css"/>
    <title>GfxAngel &brvbar; Where Art Meets Attitude</title>
    </head>
    
    <body>
    	<div id="head_bar">
    		<img src="images/ga-head.png" alt="Gfx Angel"/>
    	</div>
    	<div id="main">
    		<div id="b1">
    			<div id="b1l"></div>
    			<div id="b1c"></div>
    		</div>
    		<div id="b2">
    			<div id="b2c"></div>
    		</div>
    		<div id="b3">
    			<div id="ml"><div id="mlc"></div></div>
    			<div id="mr"><div id="mrc"></div><div id="mr-top"></div></div>
    		</div>
    	</div>
    </body>
    
    </html>
    My Css:
    Code:
    body{
    	background: #6d6e70 url('images/background.png') repeat-x scroll -80px 250px;
    	overflow: auto;
    }
    
    #head_bar{
    	position: fixed;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    	height: 60px;
    	background: #000011 url('images/head.png') repeat-x scroll 0px 0px;	
    }
    
    #main{
    	position: fixed;
    	left: 2%;
    	width: 96%;
    	top: 60px;
    	padding: 0px;
    	margin: 0px;
    }
    
    #b1{
    	position: relative;
    	left: 2%;
    	width: 96%;
    	height: 75px;
    	background: #2f333d url('images/b1.png') repeat-x scroll 0px 0px;
    }
    
    #b1c{
    	position: relative;
    	float: right;
    	right:0px;
    	top: 65px;
    	width: 10px;
    	height: 10px;
    	background: url('images/b1c.png') no-repeat 0px 0px;
    }
    
    #b1l{
    	position: relative;
    	float: left;
    	top: 0px;
    	width: 263px;
    	height: 75px;
    	background: url('images/b1l.png') no-repeat 0px 0px;
    }
    
    #b2{
    	position: relative;
    	left: 2%;
    	width: 96%;
    	height: 35px;
    	background: #1b1e24 url('images/b2.png') repeat-x scroll 0px 0px; 
    }
    
    #b2c{
    	position: relative;
    	top: 25px;
    	width: 10px;
    	height: 10px;
    	background: url('images/b2c.png') no-repeat 0px 0px;
    }
    
    #b3{
    	position: relative;
    	left: 2%;
    	margin-top: 30px;
    	width: 96%;
    }
    
    #ml{
    	float: left;
    	width: 20%;
    	height: 900px;
    	background: #b7b9bd url('images/mlb.png') repeat-x scroll 0px 0px;
    }
    
    #mlc{
    	position: relative;	
    	float: left;
    	width: 10px;
    	height: 10px;
    	background: url('images/mlc.png') no-repeat 0px 0px;
    }
    
    #mr{
    	float: right;
    	width: 80%;
    	height: 900px;
    	background: #cbd0d6 url('images/mrb.png') repeat-x scroll 0px 0px;
    }
    
    #mrc{
    	position:relative;
    	float: right;
    	width: 10px;
    	height: 10px;
    	background: url('images/mrc.png') no-repeat 0px 0px;
    }
    
    #mr-top{
    	position: static;
    	left: 0px;
    	margin-top: 35px;
    	width: 85px;
    	height: 185px;
    	background: url('images/mr-top.png') no-repeat 0px 0px;
    }
    
    #b4{
    	position: relative;
    	left: 2%;
    	width: 96%;
    	height: 150px;
    	margin-top: 30px;
    	background-color: #2f333d;
    }
    Can anyone help or give me advice...please

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A working version can be found here....http://gfxangel.110mb.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #main{
    position: fixed;

    }

    I haven't edited the page to see, but the whole of your main container is fixed, and stays fixed as browsers scroll. Why did you apply position: fixed?

    Also, it really doesn't work in IE 6, especially with the transparent PNG's (it doesnt support them).

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks you know im a retard sometimes. Do you think you could send a pic of what it looks like in ie6 because in ie7 and ff it looks good....


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
  •