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 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Getting a footer where it should be

    Can someone please assist me as it is driving me mad. I originally coded and checking using IE, first mistake I know. I have since started using both browsers and the validator and that has helped a great deal (I had a HEAP of errors but got them down.)

    The problem is that I have a footer but am having trouble it being where I would like it to be. It is FINE in IE but no good in firefox. Currently I have not put the latest files up the net but here is the relevant coding:

    CSS:

    #body {
    margin:10px 10px 0px 10px;
    padding:0px;

    }


    #mainright {
    width:20%;
    float:left;
    background:#ffffff;
    padding-left:40px;
    padding-top:150px;
    padding-bottom:10px;

    }

    #mainright1 {
    width:20%;
    float:left;
    padding-left:40px;
    padding-top:80px;
    padding-bottom:10px;

    }

    #maincenter {
    width:55%;
    float:left;
    background:#ffffff;
    padding-top:150px;
    padding-left:10px;
    padding-bottom:10px;

    }

    #maincenter1 {
    width:70%;
    float:left;
    background:#ffffff;
    padding-top:150px;
    padding-left:50px:

    }

    #mainleft {
    width:10px;
    float:left;
    background:#ffffff;
    height:150px;
    padding-left:100px;
    width:50px;
    padding-top:230px;
    }

    #footer {
    width:100%;
    height:20px;
    text-align:center;
    margin-top:5px;
    padding:1px;
    background:lightblue;
    color:red;
    border:1px solid red;
    }

    .points1 {
    list-style-image: url('button.gif');
    margin-left:60px;

    }

    ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align:center;
    position: absolute;
    background:darkblue;
    top: 200px;
    left: 40px;
    width: 150px;
    }


    ul.navbar li {
    background: lightblue;
    margin: 3px;
    padding: 5px;

    }

    ul.navbar a {
    text-decoration: none }
    a:link {
    color: black }
    a:visited {
    color: blue }
    }

    .table, .table TD, .table TH
    {
    font-family:Comic Sans MS;
    font-size:5pt;
    background:#2554C7;

    }

    h1.pos_abs
    {
    position:absolute;
    left:250px;
    top:520px
    }

    #banner1 {
    background: #fff;
    position:absolute;
    top:0px;
    left:50px
    }

    #banner2 {
    background:url(bannerbg.gif) repeat-x;
    width:1200px;
    position:absolute;
    top:0px;
    left:-20px
    }

    p,h1,h4,pre {
    margin:0px 10px 10px 50px;




    }

    #h1 {
    font-size:15px;
    padding-top:10px;
    }



    #mainright p { font-size:15px}

    #bgboxes {
    padding-left:40px
    }


    Link:

    http://www.evolvewebservices.com.au/examples.html

    If you look at the link, it does pretty much look as I have it especially with the problem I am having, that is - part of the "footer" is up in the top right hand corner and the rest of it is in the right hand column but it needs to be on the bottom of the page. Check the difference between IE and Firefox and you will see how I would like it to how it is.

    Any help is muchly appreciated.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Yeah, as I suspected while reading the title of your thread you forgot to clear your floats:

    Code:
    #footer {
      clear: both;
    }
    Also for curiosity recently I changed the default background color and font of my browser from white and Times New Roman to some light green and Helvetica Neue to see who didnít specify it in their stylesheet. Itís funny to see the results sometimes.

    In your case I see that you didnít specify a general background color and not general font either. While the font isnít that important the background color is because this makes your page look really weird with my green default background and your snippets of white background in the content sections.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning JohnL,
    Couple other problems I see:
    you don't have a #body - should be just body in your CSS.
    I know #mainleft is wider than 10px. If you size and position #mainleft correctly you will be able to get rid of the absolute positioning on .navbar.
    As it is now, #mainleft isn't doing anything.
    Try this instead:
    Code:
    #mainleft {
    		width:150px;
    		float:left;
    		background:#ffffff;
    		margin:230px 0 0 40px;
    		}
    		
    	#footer { 
    		width:100%;
    		height:20px;
    		text-align:center;
    		margin-top:5px;
    		padding:1px;
    		background:lightblue;
    		color:red;
    		border:1px solid red;
    clear: both;
    		}
    		
    		.points1 {
    		list-style-image: url('button.gif');
    		margin-left:60px;
    	
    		}
    			
    		ul.navbar {	
    		list-style-type: none;
    		padding: 0;
    		margin: 0;
    		text-align:center;
    		background:darkblue;
    		width: 150px; 
            }

    Validator finds lots more things you can fix.



    .
    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

  • #4
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks very much for your help.

    Excavator, I have cleared most of those little errors up via the validator. I doubt I will get it to zero errrors but I found that by using the validator it clears up a lot of the problems for Firefox. I will be coding for Firefox in the future.

    I will give your suggestions a shot when I get home tonight and let you know how it goes.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #5
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, good and bad.

    Good in the fact that by adding the "clear:both;" it then places the footer where it should be - at the bottom of the page for Firefox.

    Bad because the banner is no longer there but only in IE. Looks OK in Firefox.

    Changing the main left values puts the right tables on the left side of the screen in IE but looks OK in Firefox.

    If I can just get the banner to be at the top in both browsers, I will be a happy man.....
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post a link to your updated coded please or update the original link?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Can you post a link to your updated coded please or update the original link?
    I did have the code suggested updated (clear:both) but because it takes out the banner, I then removed it as it is a live site and the banner needs to be there. It works fine in Firefox but not in IE.

    Any assistance is much appreciated.
    Last edited by JohnL; 05-22-2007 at 12:21 PM.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by JohnL View Post
    I did have the code suggested updated (clear:both) but because it takes out the banner, I then removed it as it is a live site and the banner needs to be there. It works fine in Firefox but not in IE.
    Hmm... I downloaded the page and tried VIP's suggestion. The footer goes in place in Firefox. I don't see the problem with the banner in IE6 after doing this.

    Try to make a copy of your page that is not working after the fix applied and upload it with a different filename and post a new link.

  • #9
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I may have misled you....sorry. Yes the banner is on top for the page listed but it is NOT on the home page and a few others in IE6.

    http://www.evolvewebservices.com.au/index.html - no banner
    http://www.evolvewebservices.com.au/hosting.html - no banner
    http://www.evolvewebservices.com.au/webbuilding.html - no banner
    http://www.evolvewebservices.com.au/services.html - banner is fine
    http://www.evolvewebservices.com.au/pricing.html - banner is fine
    http://www.evolvewebservices.com.au/examples.html - banner if fine and this was the original link I posted.

    Must be something simple with the actual pages themselves. I will look at them later...

    Thanks for all the input
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by JohnL View Post
    I may have misled you....sorry. Yes the banner is on top for the page listed but it is NOT on the home page and a few others in IE6.
    Ah.. I see. That's an IE bug only partially fixed in IE7:

    IE/Win: floats and disappearing absolutely positioned boxes

    To solve your problem, you can wrap your #banner2 in an anonymous div element:
    Code:
    <div>
      <div id="banner2">
      <img src="index_files/banner007.gif" alt="banner">
      </div>
    </div>
    

  • #11
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    BINGO!!!!!

    Thanks very muchly. Can you explain to me why this works? Just updating the other pages as well. Especially since I don't have the extra dvis in pricing.html....

    Seems strange to me

    AWESOME....
    Last edited by JohnL; 05-23-2007 at 12:19 AM.
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by JohnL View Post
    Can you explain to me why this works?
    I'm afraid not. It's just that IE doesn't like adjacent siblings which are absolutely positioned and floated, respectively. If you find an explanation, Bruno Fassino, the author of the link I gave you, would probably like to know.

    Anyway, glad you got it fixed.

  • #13
    New Coder
    Join Date
    Feb 2006
    Location
    Oz
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks again Koyoma.

    I will look into why the index.html needed the extra div's but why the pricing.html did not. They are pretty much the same as I remember....

    I am sure I may not get to the bottom of it, bit I too am happy it is fixed and I am even more ecstatic that forums like this exist and people are willing to assit dummies like me.

    I reckon there are 90% dummies and 10% gurus on forums like these. I salute the 10%.....
    "This is not Vietnam, there ARE rules" Walter

    Are you a Top Bloke? Take the quiz to find out!! www.topblokeday.com


  •  

    Posting Permissions

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