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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Website positioning

    Hello everyone.

    I apologise, you probably get alot of these but I need help!!

    I am fairly new to CSS..the problems I'm having:

    Www.leoliens.com

    Looks almost exactly how I want it to look in IE but I can't get it to look right in firefox, it always leaves a gap at the bottom, I fixed this in IE by setting the containing to only being 100px high.

    The CSS is:

    Www.leoliens.com/CSS/mainlayout.CSS

    Thanks for any help in advance!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    What gap? I see no gap at the bottom (FF 3.6 / win7). can you attach a screen shot, or something?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think the OP is referring to the page extending well beyond what I assume may be his footer element. I do see it in FF. Havent figured out yet whats causing it though.
    Teed

  • #4
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I believe I have now fixed it?

    I had positioned all my images using top or bottom which seemed to be the issue in firefox... I changed and edited the margins instead and it seems to work in IE, firefox and safari.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Boburob,
    You are using an image that does not repeat on the X axis very well. You probably only want to see the grass once...

    Make a full width footer that shows your green colored bar and then place your grass image in the centered container.
    Something like this -
    Code:
    d="link3">
    <a href="alien_home.html">      </a>
    </div>
    <div id="test">
    
    </div>
    <div id="test2">
    </div>
    </div>
    <div id="footer"></div>
    And the CSS -
    Code:
    html, body {
    
    
    	font-family:Arial;
    	height:100%;
    	width:100%;
    	background: url('images/test2.jpg') repeat ;
    
    }
    
    body 
    {
    	margin:0;
    	padding: 0;
    	text-align:center;
    }
    
    #content {
    	margin-left: 10%;
    
    
    	/*height: 100%;*/}
    
    #header {
    	position: relative;
    	background:  url('images/Newheadher.png') no-repeat;
    	height: 333px;
    	margin-left: 10px;
    	margin-top:0;
    	width: 1000px;
    }
    
    #maintext {
    	position: relative;
    	background:  url('images/wrapbg4.png') no-repeat;	
    	height: 500px;
    	padding-top: 0;
    	margin-top: -270px;
    	margin-left: -100px;
    	width: 1150px;
    
    }
    
    #link1 {
    	position: absolute;
    	margin-left:10%;
    	top:223px;
    	left: 70px;
    }
    
    #link1 a
    {
    	display: block;
    	height:40px;
    	width: 150px;
    	text-decoration: none;
    }
    #link1 a:hover
    {
    	background: url('images/testhover.png') no-repeat;
    }
    #link2 {
    	position: absolute;
    	margin-left:10%;
    	top:223px;
    	left: 230px;
    }
    
    #link2 a
    {
    	display: block;
    	height:40px;
    	width: 150px;
    	text-decoration: none;
    }
    
    #link2 a:hover
    {
    	background: url('images/testhover.png') no-repeat;
    }
    
    #link3 {
    	position: absolute;
    	margin-left:10%;
    	top:223px;
    	left: 390px;
    }
    
    #link3 a
    {
    	display: block;
    	height:40px;
    	width: 150px;
    	text-decoration: none;
    }
    
    
    #link3 a:hover
    {
    	background: url('images/testhover.png') no-repeat;
    }
    #background {
    	position: relative;
    	background:  url('images/maintext.png') repeat-y;	
    	padding-left: 120px;
    margin-left: -100px;
    	margin-top:-116px;
    	padding-bottom: 110px;
    	width: 990px;
    	min-height:50%;
    	margin-bottom:-165px;
    }
    
    
    #test {
    	position: relative;
    	height: 200px;
    	background:  url('http://www.leoliens.com/css/images/test.png') no-repeat;
    	width: 100%;
    margin: 0 0 -35px;
    }
    #footer {
    height: 35px;
    width: 100%;
    background: #4f6145;
    }
    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
    •