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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div issues (first issue resolved, new problems listed)

    See Post #8 for new issue.
    Last edited by stormcloud; 12-01-2008 at 07:13 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello stormcloud,
    There could be SO many things wrong it would not even pay to guess. If you post your code so we can look at what your doing you'll get a lot better help.

    Copy/paste it in a new message using the [ code] [ /code] tags (the # button up there in the new/reply msg box.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excuse the mess!

    Thanks for your help.

    Code:
    <html>
    
    <head>
    <style type="text/css">
    	body {
    		font: 80% verdana, arial, helvetica, sans-serif;
    		text-align: center; 
    		background: #87723d url(images/bg.jpg) fixed top left repeat-x;
    		}
    	#container {
    		position: fixed; z-index: 1;
    		margin: 0 auto ;  
    		text-align: left; 
    		width: 100%;
    		top: 53px;
    		left: 0;
    		right: 0;
    		max-width: 1400px;
    		height: 100%;
    		background: #3f8cb9 url(images/contentbg.jpg) fixed top left repeat-x;
    		}
    
    	#container2 {
    		position: relative; z-index: 2;
    		margin: 0 auto ;  
    		text-align: left;
    		width: 100%;
    		top: 53px;
    		bottom: 114px;
    		max-width: 1400px;
    		height: 100%;
    		}
    	#header {
    		position: fixed; z-index: 4;
    		height: 45px;
    		width: 100%;
    		margin: 0 auto ;  
    		left: 0;
    		right: 0;
    		max-width: 1400px;
    		background:#091521 url(images/headbg.jpg) top left repeat-x;
          	}
        #footer {
    		margin: 0 auto ; 
    		position: fixed; z-index: 3;
    		width: 100%;
    		bottom: 0; 
    		left: 0; 
    		right: 0;
    		height: 114px;
    		background:#000000 url(images/footbg.jpg) top left repeat-x;      
          	}
    	#fcontent {
    		margin: 0 auto ;  
    		position: fixed; z-index: 5;
    		width: 100%;
    		bottom: 0; 
    		left: 0; 
    		right: 0;
    		height: 114px;
    		max-width: 1400px;
    		background:#000000 url(images/footbg.jpg) top left repeat-x;      
    	    }
    
        </style>
    </head>
    
    <body>
    
    <div id="header">
    	<img border="0" src="images/headlogo.jpg" width="600" height="45"></div>
    <div id="container">
    </div>
    <div id="container2">
    	Scrolling content goes here.
    </div>
    <div id="footer">
    	<div id="fcontent">
    		<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="500" height="114" align="left">
    			<param name="movie" value="menu.swf">
    			<param name="quality" value="High">
    			<embed src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="505" height="114">
    		</object>
    		<img border="0" src="images/logo.jpg" width="409" height="114" align="right"></div>
    </div>
    
    </body>
    
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Something like this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	font: 80% verdana, arial, helvetica, sans-serif;
    	text-align: center; 
    	background: #87723d url(images/bg.jpg) fixed top left repeat-x;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #header {
    	background: #091521 url(images/headbg.jpg) top left repeat-x;
    	height: 45px;
    }
    #container {
    	overflow: auto;
    	text-align: left; 
    	max-width: 1400px;
    	min-width: 740px;
    	background: #3f8cb9 url(images/contentbg.jpg) fixed top left repeat-x;
    }
    #content {
    	background: #0F0;
    	text-align: left;
    	padding: 25px;
    }
    p {
    	margin: 10px 25px;
    }
    #footer {
    	background: #000000 url(images/footbg.jpg) top left repeat-x; 
    	clear: both;
    	overflow: auto;
    }
    #footer img {
    	float: right;
    	width: 505px;
    }
    #fcontent {
    	background: #ccc url(images/footbg.jpg) top left repeat-x; 
    	float: left;
    	width: 500px;  
    }
    </style>
    </head>
    <body>
      <div id="container">
            <div id="header">
                <img src="images/headlogo.jpg" width="600" height="45" />
            </div>
    <div id="content">  
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
    <!--end content--></div>      
        <div id="footer">
            <div id="fcontent">
                <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="500" height="114">
                    <param name="movie" value="menu.swf" />
                  <param name="quality" value="High" />
                    <embed src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="505" height="114">          </embed>
              </object>
            <!--end fcontent--></div>
                    <img src="images/logo.jpg" width="409" height="114" />
        <!--end footer--></div>
    <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 12-01-2008 at 04:19 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Not REALLY.

    I'd prefer to just have the normal browser scrollbar as opposed to the individual div having a scrollbar.

    Thanks for your help anyway. Much appreciated.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Well, it's not REALLY hard to change. The way I read your post I thought that's what you were trying for.

    I edited that code, try it again.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    nah it's all good. I need the site centered and the header/footer to be fixed.

    i've added 115px of padding to the bottom of my content div.. that seems to do the trick for now.

    thanks again for your help.

  • #8
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, so i managed to sort out my first problem, and everything works the way i need it to... in FF anyway...

    http://www.stormclouddesigns.com/spirit/

    IE keeps the header/footer/background fixed, but it shoves it all to the left.

    To say i'm frustrated is an understatement!

    I used what i thought was a trick for centering a div in IE, but it doesn't work on fixed divs.

    Any hints?

    Thanks in advance

    css:
    Code:
    body {
    		font: 80% verdana, arial, helvetica, sans-serif;
    		color: #ffffff;
    		text-align: center; 
    		background: #87723d url(images/bg.jpg) fixed top left repeat-x;
    		}
    	#container {
    		position: fixed; z-index: 1;
    		margin: 0 auto ;  
    		text-align: left; 
    		width: 98%;
    		top: 45px;
    		left: 0;
    		right: 0;
    		min-width: 915px;
    		max-width: 1400px;
    		height: 100%;
    		background: #3f8cb9 url(images/contentbg.jpg) fixed top left repeat-x;
    		border-left: solid medium black;
    		border-right: solid medium black;
    		}
    
    	#container2 {
    		position: relative; z-index: 2;
    		margin: 0 auto ;  
    		text-align: left;
    		width: 98%;
    		top: 45px;
    		bottom: 114px;
    		min-width: 915px;
    		max-width: 1400px;
    		padding-bottom: 120px;
    		}
    	#cnr {
    		position: fixed; z-index: 6;
    		height: 45px;
    		width: 98%;
    		margin: 0 auto ;  
    		left: 0;
    		right: 0;
    		max-width: 1400px;
    		background:#091521 url(images/headbg.jpg) top left repeat-x;
          	}
    
    	#header {
    		position: fixed; z-index: 4;
    		height: 45px;
    		width: 98%;
    		margin: 0 auto ; 
    		top: 0; 
    		left: 0;
    		right: 0;
    		min-width: 915px;
    		max-width: 1400px;
    		background:#091521 url(images/headbg.jpg) top left repeat-x;
    		border-bottom: solid medium black;
          	}
    	#footer {
    		margin: 0 auto ; 
    		position: fixed; z-index: 3;
    		width: 100%;
    		bottom: 0; 
    		left: 0; 
    		right: 0;
    		height: 114px;
    		background:#000000 url(images/footbg.jpg) top left repeat-x;      
          	} 
          #fcontent {
    		margin: 0 auto ;  
    		position: fixed; z-index: 5;
    		width: 98%;
    		bottom: 0; 
    		left: 0; 
    		right: 0;
    		height: 114px;
    		max-width: 1400px;
    		min-width: 915px;
    		background:#000000 url(images/footbg.jpg) top left repeat-x;    
    		border-top: solid medium black;  
    	    }
    html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
        <meta http-equiv="Content-Language" content="en-au">
        <title>psychicreadingroom.com.au</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      	<link rel="stylesheet" type="text/css" href="style.css">
      </head>
    
    <body>
    
    <div id="header">
    	<img border="0" src="images/headlogo.jpg" width="600" height="45"></div>
    <div id="container">
    </div>
    <div id="container2">
    	<table width=98% align="center"><tr><td><p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>          
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                       diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                       aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                       justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                       sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    </p></td></tr></table>
    	</div>
    <div id="footer">
    	<div id="fcontent">
    		<img border="0" src="images/logo.jpg" width="409" height="114" align="right">
    		<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="505" height="114">
    			<param name="movie" value="menu.swf">
    			<param name="quality" value="High">
    			<embed src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="505" height="114"></object>
    	</div>
    </div>
    
    </body>
    </html>

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    This works now... untill you add the borders on the side. Borders change the width and break the layout.

    Have a look at this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	text-align: center;
    	font: 100% "Comic Sans MS";
    	color: #333333;
    	text-decoration: none;
    	background: #87723d url(http://www.stormclouddesigns.com/spirit/images/bg.jpg) fixed top left repeat-x;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #header {
    	width: 98%;
    	height: 45px;
    	position: fixed;
    	margin: 0 auto;
    	background:#091521 url(http://www.stormclouddesigns.com/spirit/images/headbg.jpg) top left repeat-x;
    	border-bottom: solid medium black;
    	left: 1%;
    	top: 0px;
    	right: 1%;
    	z-index: 3;
    }
    #container {
    	position: fixed; z-index: 1;
    	text-align: left; 
    	width: 98%;
    	top: 45px;
    	right: 1%;
    	left: 1%;
    	height: 100%;
    	background: #3f8cb9 url(http://www.stormclouddesigns.com/spirit/images/contentbg.jpg) fixed top left repeat-x;
    }
    #container2 {
    	position: relative;
    	z-index: 2;
    	text-align: left;
    	width: 98%;
    	top: 45px;
    	right: 1%;
    	left: 1%;
    	padding-bottom: 114px;
    }
    #container2 p {
    	margin: 0 10px;
    }
    #footer {
    	margin: 0 auto;
    	position: fixed;
    	width: 98%;
    	bottom: 0;
    	height: 114px;
    	background:#000000 url(http://www.stormclouddesigns.com/spirit/images/footbg.jpg) top left repeat-x;
    	left: 1%;
    	right: 1%;
    	z-index: 4;
    } 
    </style>
    </head>        
    <body>
    		<div id="header">
                <img src="http://www.stormclouddesigns.com/spirit/images/headlogo.jpg" alt="header logo" width="600" height="45" />
            </div>
    <div id="container">
    </div>
                	<div id="container2">
                                <p>This is the beginning
                                   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                </p>          
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                                   this is the end.
                                </p>
                    </div>
        <div id="footer">
            <img src="http://www.stormclouddesigns.com/spirit/images/logo.jpg" alt="footer logo" height="114" width="409" />	
        </div>        
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    stormcloud (12-01-2008)

  • #10
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That sort of works.

    But i was trying to keep the max-width at 1400px and as soon as i add that back in, it jumps back to the left in IE

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You must be talking about IE6.
    Have a look at a min-width solution that works in that browser.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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