Results 1 to 9 of 9

Thread: Minor problem, but im css handicapped

  1. #1
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default Minor problem, but im css handicapped

    I am currently developing my second website using CSS. It is being displayed the way I want it in FF but in IE the content and sidebar boxes are going over the footer.

    http://www.lincolnbuyinggroup.com/new

    I have a margin-bottom: -300px; applied to both the content and sidebar to pull the footer closer to them. Now they just want some personal space, like FF is giving. Ya know?

    Here is my CSS;

    Code:
    #html,body {
       	margin-top:0;
       	padding:0;
    	margin-bottom:0;
    }
    
    a{
    	color:#96cb45;
    }
    
    
    #allContent {
    	width: 1000px;
    	background:#FFFFFF;
    	font-family:arial;
    	font-size:12px;
            margin-left:auto;
            margin-right:auto;
    	}
    
    h1 { 
    	font-family:arial;
    	font-size:15px;
    	font-weight:bold;
    	color:#033f78;
    	border-bottom: 1px dotted #033f78; 
    	margin-bottom:0px;
    
    }
    
    h2 { 
    	font-family:arial;
    	font-size:12px;
    	font-weight:bold;
    	color:#033f78;
    	margin-bottom:-1px;
    	margin-top:0px;
    	margin-right:-1px;
    	margin-left:-1px;
    }
    
    #head { 
    	float:center;
    	width:1000px;
    	height: 280px;
    }
    
    #bodywrapper {
    	background-image:url(images/lbgbody.jpg);
    	height:300px;
    	width:1000px;
    	float:center;
    	margin-top:0px;
    	background-repeat:no-repeat;
    }
    
    #sidebar {
    	background-image:url(images/bgtrans.png);
    	float:left;
    	width:265px;
    	min-height:540px;
    	position:relative;
    	border: 0px solid;
    	z-index:1;
    	margin-bottom: -300px;
    	padding-top:5px;
    	padding-bottom:10px;
    	padding-left:0px;
    }
    
    #sidebartitle {
    	width:250px;
    	height:25px;
    	color:#FFFFFF;
    	position:relative;
    	z-index:2;
    	font-weight:bold;
    	font-family:arial;
    	}
    
    #sidebarwrap{
    	float:left;
    	margin-left: 10px;
    }
    
    #contentwrap {
    	float:right;
    	width:698px;
    	margin-right:10px;
    
    	
    }
    #contenttitle {
    	
    	width:700px;
    	height:25px;
    	position:relative;
    	z-index:2;
    	color:#FFFFFF;
    	font-weight:bold;
    	font-family:arial;
    	float:right;
    
    
    }
    #contentmain{
    	background-image:url(images/bgtrans.png);
    	min-height:600px;
    	width:680px;
    	float:right;
    	z-index:1;
    	position:relative;
    	border: 0px solid;
    	padding-top:5px;
    	padding-left:10px;
    	padding-right:10px;
    	padding-bottom:10px;
    	margin-bottom: -300px;
    
    }
    #footer{
    	position:relative;
    	display: block;
    }
    
    #endthepage {
    
    	background-image:url(images/lbgfoot.png); 
    	background-position:bottom; 
    	position:relative;
    	min-height:375px; 
    	padding-bottom:0px;
    	clear:both;
    	background-repeat:no-repeat;
    }
    
    #subfooter {
    	height:31px; 
    	padding-top:2px; 
    	background: #104680;
    	padding-bottom:2px; 
    }
    	
    #linknav {
    	color:#FFFFFF; 
    	float:left;
    	border:0px solid; 
    	width:825px; 
    	padding-top:8px; 
    	padding-left:50px;
    }
    #validation {
    	 float:right; 
    	 background:#104680; 
    	 width:100px;"
    }
    
    #whatwebuywrap{
    	width: 300px;
    	min-height:150px;
    	 padding-left:60px;
    	 padding-right:30px;
    	 padding-top:10px;
    	border:0px solid;
    }
    #whatwebuy {
    	 border: 0px solid;
    	 float:left;
    	}
    #whatwebuy2 {
    	 border: 0px solid;
    	 float:right;
    }
    #sidebox1 {
    	width:240px;
    	background:#FFFFFF:
    	float:center;
    	padding-left:8px;
    	padding-right:0px;
    }

    Any help is appreciated. I want the footer to be pushed down as content expands.
    Last edited by cbier; 11-25-2008 at 04:52 PM.

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Link not working =/

    Edit: Fixed - You need to take out the "www" to make it work

  3. #3
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    It is working fine over here, please try copying and pasting it. Thanks

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Quick note, not a solution to your problem, but thought I'd mention it anyway:

    Code:
    float:center
    Is not a valid command, you can only float elements left or right.

  5. #5
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Thank you for the input, im new to CSS im really trying to gather all the concepts

  6. #6
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You can use this to validate your css as well

    http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

    I don't have ie unfourtnatley so 8/10 css probs i cant even see.

  7. #7
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    my suggestion is to remove the position: relative......becoz i think position sometimes create prob in IE

    try..best of luck

  8. #8
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    I ran the CSS Through the validator, and it made no change.
    So i tried removing position attributes, also to no avail. When i removed the position attributes from the content and sidebar it just put them behind the "endthepage" div. Heres the updated css. I think this issue is with margins, not positions. Because it works perfectly fine in FF with a -300px margin.

    Code:
    #html, body {
    margin-top : 0;
    padding : 0;
    margin-bottom : 0;
    }
    
    a {
    color : #96cb45;
    }
    
    #allContent {
    width : 1000px;
    background : #ffffff;
    font-family : arial;
    font-size : 12px;
    margin-left : auto;
    margin-right : auto;
    }
    
    h1 {
    font-family : arial;
    font-size : 15px;
    font-weight : bold;
    color : #033f78;
    border-bottom : 1px dotted #033f78;
    margin-bottom : 0;
    }
    
    h2 {
    font-family : arial;
    font-size : 12px;
    font-weight : bold;
    color : #033f78;
    margin-bottom : -1px;
    margin-top : 0;
    margin-right : -1px;
    margin-left : -1px;
    }
    
    #head {
    width : 1000px;
    height : 280px;
    }
    
    #bodywrapper {
    background-image : url(images/lbgbody.jpg);
    height : 300px;
    width : 1000px;
    margin-top : 0;
    background-repeat : no-repeat;
    }
    
    #sidebar {
    background-image : url(images/bgtrans.png);
    float : left;
    width : 265px;
    min-height : 540px;
    position : relative;
    border : 0 solid;
    z-index : 1;
    margin-bottom : -300px;
    padding-top : 5px;
    padding-bottom : 10px;
    padding-left : 0;
    }
    
    #sidebartitle {
    width : 250px;
    height : 25px;
    color : #ffffff;
    position : relative;
    z-index : 2;
    font-weight : bold;
    font-family : arial;
    }
    
    #sidebarwrap {
    float : left;
    margin-left : 10px;
    }
    
    #contentwrap {
    float : right;
    width : 698px;
    margin-right : 10px;
    }
    
    #contenttitle {
    width : 700px;
    height : 25px;
    position : relative;
    z-index : 2;
    color : #ffffff;
    font-weight : bold;
    font-family : arial;
    float : right;
    }
    
    #contentmain {
    background-image : url(images/bgtrans.png);
    min-height : 600px;
    width : 680px;
    float : right;
    z-index : 1;
    position: relative;
    border : 0 solid;
    padding-top : 5px;
    padding-left : 10px;
    padding-right : 10px;
    padding-bottom : 10px;
    margin-bottom : -300px;
    }
    
    #footer {
    position : relative;
    display : block;
    }
    
    #endthepage {
    background-image : url(images/lbgfoot.png);
    background-position : bottom;
    min-height : 375px;
    padding-bottom : 0px;
    clear : both;
    background-repeat : no-repeat;
    }
    
    #subfooter {
    height : 31px;
    padding-top : 2px;
    background : #104680;
    padding-bottom : 2px;
    }
    
    #linknav {
    color : #ffffff;
    float : left;
    border : 0 solid;
    width : 825px;
    padding-top : 8px;
    padding-left : 50px;
    }
    
    #whatwebuywrap {
    width : 300px;
    min-height : 150px;
    padding-left : 60px;
    padding-right : 30px;
    padding-top : 10px;
    border : 0 solid;
    }
    
    #whatwebuy {
    border : 0 solid;
    float : left;
    }
    
    #whatwebuy2 {
    border : 0 solid;
    float : right;
    }
    Thanks for your help guys. Any help is appreciated.

  9. #9
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    3
    Thanked 1 Time in 1 Post

    Talking

    ITS A MIRACLE! HAHA!

    I made #bodywrapper a min height so it expanded with the nested #contentmain and #sidebar divs. I also added 200px to the #bodywrapper min-height to make the negitive margin at the bottom of the page behave. I think this is kind of ghetto-rigged. But it works. Code is as follows..

    Code:
    #html, body {
    margin-top : 0;
    padding : 0;
    margin-bottom : 0;
    }
    
    a {
    color : #96cb45;
    }
    
    #allContent {
    width : 1000px;
    background : #ffffff;
    font-family : arial;
    font-size : 12px;
    margin-left : auto;
    margin-right : auto;
    }
    
    h1 {
    font-family : arial;
    font-size : 15px;
    font-weight : bold;
    color : #033f78;
    border-bottom : 1px dotted #033f78;
    margin-bottom : 0;
    }
    
    h2 {
    font-family : arial;
    font-size : 12px;
    font-weight : bold;
    color : #033f78;
    margin-bottom : -1px;
    margin-top : 0;
    margin-right : -1px;
    margin-left : -1px;
    }
    
    #head {
    width : 1000px;
    height : 280px;
    }
    
    #bodywrapper {
    background-image : url(images/lbgbody.jpg);
    min-height : 500px;
    width : 1000px;
    margin-top : 0;
    background-repeat : no-repeat;
    }
    
    #sidebar {
    background-image : url(images/bgtrans.png);
    float : left;
    width : 265px;
    min-height : 540px;
    position : relative;
    border : 0 solid;
    z-index : 1;
    margin-bottom : -300px; 
    padding-top : 5px;
    padding-bottom : 10px;
    padding-left : 0;
    }
    
    #sidebartitle {
    width : 250px;
    height : 25px;
    color : #ffffff;
    position : relative;
    z-index : 2;
    font-weight : bold;
    font-family : arial;
    }
    
    #sidebarwrap {
    float : left;
    margin-left : 10px;
    }
    
    #contentwrap {
    float : right;
    width : 698px;
    margin-right : 10px;
    }
    
    #contenttitle {
    width : 700px;
    height : 25px;
    position : relative;
    z-index : 2;
    color : #ffffff;
    font-weight : bold;
    font-family : arial;
    float : right;
    }
    
    #contentmain {
    background-image : url(images/bgtrans.png);
    min-height : 600px;
    width : 680px;
    float : right;
    z-index : 1;
    position: relative;
    border : 0 solid;
    padding-top : 5px;
    padding-left : 10px;
    padding-right : 10px;
    padding-bottom : 10px;
    margin-bottom : -300px; 
    
    
    }
    
    #footer {
    display: inline;
    }
    
    #endthepage {
    background-image : url(images/lbgfoot.png);
    background-position : bottom;
    min-height: 375px;
    padding-bottom : 0px;
    
    clear : both;
    background-repeat : no-repeat;
    }
    
    #subfooter {
    height : 31px;
    padding-top : 2px;
    background : #104680;
    padding-bottom : 2px;
    }
    
    #linknav {
    color : #ffffff;
    float : left;
    border : 0 solid;
    width : 825px;
    padding-top : 8px;
    padding-left : 50px;
    }
    
    #whatwebuywrap {
    width : 300px;
    min-height : 150px;
    padding-left : 60px;
    padding-right : 30px;
    padding-top : 10px;
    border : 0 solid;
    }
    
    #whatwebuy {
    border : 0 solid;
    float : left;
    }
    
    #whatwebuy2 {
    border : 0 solid;
    float : right;
    }

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
  •