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 Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with this footer...

    For some reason, my footer is not working properly in firefox or chrome, but works perfectly in IE (imagine that!).

    Here is the CSS file:
    Code:
    body
    {
        background-color: white;
    }
    
    div#page
    {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: .1px;
    }
    
    div#header
    {
        width: 900px;
        height: 145px;
        border-color: orange;
        border-style: solid;
        border-width: 1px;
        color: black;
        background-color: orange;
    }
    
    div#nav
    {
        width: 902px;
        height: 50px;
        line-height: 30px;
        background-color: blue;
    }
    
    div#contentheader
    {
          text-align: center;
          width: 900px;
          line-height: 50px;
          padding-top: 10px;
          border-left-color: black;
          border-left-style: solid;
          border-left-width: 1px;       
          border-right-color: black;
          border-right-style: solid;
          border-right-width: 1px; 
          text-transform: capitalize;
    }
    
    div#content
    {
          width: 900px;
          height: 90%;
          border-left-color: black;
          border-left-style: solid;
          border-left-width: 1px;       
          border-right-color: black;
          border-right-style: solid;
          border-right-width: 1px; 
          background-color: white;
          padding-bottom: 25px;
          float: left;
    }
    
    div#leftcolumn
    {
        width: 43%;
        float: left;
        margin: 7px 0px 0% 3%;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    div#rightcolumn
    {
        width: 43%;
        float: right;
        margin: 7px 3% 0% 0px;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    div#footer
    {
        height: 50px;
        width: 902px;
        background-color: orange;
        color: black;
    }
    
    ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    li
    {
        margin: auto;
        float: left;
    }
    
    a:link,a:visited
    {
        display: block;
        width: 178px;
        height: 48px;
        font-weight: bold;
        color: white;
        background-color: blue;
        text-align: center;
        padding: 1px;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    a:hover,a:active
    {
        background-color: black;
    }
    
    img.center
    {   
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    
    p.footer
    {
        text-align: center;
        position: relative;
        margin-top: 15px;
    }
    
    h1.center
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    h4.center
    {
        margin-top: 10px;
    }
    Here is the HTML file:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    <title>Home</title>
    <link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    
    <body>
    
    <div id="page">
    
        <div id="header">
        <img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png" class="center">
        </div>
    
        <div id="nav">
            <ul>
                <li><a href="index.html"><h4 class="center">Home</h1></a></li>
                <li><a href="info.html"><h4 class="center">Info</h1></a></li>
                <li><a href="staff.html"><h4 class="center">Staff</h1></a></li>
                <li><a href="contact.html"><h4 class="center">Contact</h1></a></li>
                <li><a href="about.html"><h4 class="center">About</h1></a></li>
            </ul>
        </div>
    
        <div id="contentheader">
            <h1 class="center">Home</h1>
        </div>
    
        <div id="content">
            <div id="leftcolumn">
                <p>Left side</p>
            </div>
            <div id="rightcolumn">
                <p>Right side</p>
            </div>
        </div>
    
        <div id="footer">
            <p class="footer">Footer</p>
        </div>
    
    </div>
    
    </body>
    
    </html>
    Google Chrome result:


    Firefox result:


    IE result:

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    you haven't set the height of the left and right columns so they are shrinking to contain whatever is in them... in this case you <p>'s containing text

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    you haven't set the height of the left and right columns so they are shrinking to contain whatever is in them... in this case you <p>'s containing text
    setting a height for the columns does not change the footer. the content and footer are in different divs, they should not affect each other apart from where one starts and the other ends, right?

    at any rate, that isn't the problem.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    i disagree- there is nothing telling the div#footer it is supposed to be anywhere near the bottom... you can achieve this a number of ways and providing a height to his col divs is one acceptable way

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    am i changing the height in my right and left columns within the content div? Or is there something wrong with the the div#footer? I am very new to CSS and you are being too vague, sorry.

    because i tried to set a height for the div#leftcolumn and div#rightcolumn and it didn't fix it.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    you can set the height of these using your % scheme, you may have issues making your margins work correctly though (since theyre in px)... you could also check out using css position property.

    also, i apologize; my response was sorta "harsh"... i didn't read who it was posted by and didnt realize it was a question- thought it was a bash on my suggested fix... my bad...

    but building off of what i had posted (bc i experienced this SAME issue when i began playing with css) the footer isnt being told anything about where it should be... When i started i used IE as my test browser (didnt follow good practice and use all 3 major ones- i do now ) I had this exact issue that IE displayed it correct but the others didnt... idk why but IE makes the divs fill the screen... i think for you case you should set the column heights because it looks like you are going to use them to be place holders for content for ur page...

    i dont know if its bad practice, but i do everything in pixels... if i want 10% of a height i just multiply it out... but thats me and im fussy about controlling every inch of the page (its the engineer in me )

    if you do go that route remember to account for you px's that are in any borders or margins and dont forget to (in most cases) double those because you will usually have a top/bottom & a left/right margin/border

    I hope that helps... when i started doing placement experiments i just made 4 blocks and gave them bgcolors so i could graphically see the changes i made to them....

    final thought... bc you want your footer to remain below the columns i would add clear:both to it so it is forced below the other two (that are floating)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Pull the footer div code outside your page div. Then you would need to set footer margin:0 auto; to center it. You will also need to add overflow: auto; to your content div to clear your floats.

    You can also get rid of the float on content. Dont need to float a full width element.

    Then you have some invalid code. For example, you insert heading tags, which are block level elements, inside inline elements, <a> tags in your ul. There are other errors you should also fix, which you can check here.

    I also dont recommend setting specified heights for floated divs. If your content grows, then you have other issues you'd have to deal with.
    Last edited by teedoff; 05-14-2011 at 10:08 PM.
    Teed

  • Users who have thanked teedoff for this post:

    borosarchangel (05-14-2011)

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I added position: relative; to the footer, which moved it down, but it is slightly lower than I want it. I will mess around with it until I get it where I want.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by borosarchangel View Post
    I added position: relative; to the footer, which moved it down, but it is slightly lower than I want it. I will mess around with it until I get it where I want.
    If you moved the footer div outside the page div, you dont need to add any position. Simply center it using the margin auto method.
    Teed

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,758
    Thanks
    41
    Thanked 191 Times in 190 Posts
    try this:

    Code:
    #page
    {
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: .1px;
    }
    
    #header
    {
        width: 900px;
        height: 145px;
        border: 1px solid orange;
        background-color: orange;
    }
    
    #nav
    {
        width: 902px;
        height: 50px;
        line-height: 30px;
        background-color: blue;
    }
    
    #contentheader
    {
          text-align: center;
          width: 900px;
          line-height: 50px;
          padding-top: 10px;
          border-left: 1px solid black;       
          border-right: 1px solid black; 
          text-transform: capitalize;
    }
    
    #content
    {
          width: 900px;
          height: 90%;
          border-left: 1px solid black;       
          border-right: 1px solid black; 
          background-color: white;
          padding-bottom: 25px;
          float: left;
    }
    
    #leftcolumn
    {
        width: 43%;
        float: left;
        margin: 7px 0px 0% 3%;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    #rightcolumn
    {
        width: 43%;
        float: right;
        margin: 7px 3% 0% 0px;
        background-color: white;
        padding: 15px 7px 15px 7px;
    }
    
    #footer
    {
        height: 50px;
        width: 900px;
        background-color: orange;
        color: black;
        clear: both;
        margin: auto;
    }
    
    ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    li
    {
        margin: auto;
        float: left;
    }
    
    a:link,a:visited
    {
        display: block;
        width: 178px;
        height: 48px;
        font-weight: bold;
        color: white;
        background-color: blue;
        text-align: center;
        padding: 1px;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    a:hover,a:active
    {
        background-color: black;
    }
    
    img.center
    {   
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    
    p.footer
    {
        text-align: center;
        position: relative;
        margin-top: 15px;
    }
    
    h1.center
    {
        display: block;
        margin: auto;
    }
    
    h4.center
    {
        margin-top: 10px;
    }
    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!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 runat="server">
        <title></title>
        <link rel="stylesheet" type="text/css" href="~/Styles/StyleSheet1.css" />
    </head>
    <body>
        <form id="form1" runat="server">
    <div id="page">
    
        <div id="header">
        <img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/hospital_logo.png" class="center">
        </div>
    
        <div id="nav">
            <ul>
                <li><a href="index.html"><h4 class="center">Home</h1></a></li>
                <li><a href="info.html"><h4 class="center">Info</h1></a></li>
                <li><a href="staff.html"><h4 class="center">Staff</h1></a></li>
                <li><a href="contact.html"><h4 class="center">Contact</h1></a></li>
                <li><a href="about.html"><h4 class="center">About</h1></a></li>
            </ul>
        </div>
    
        <div id="contentheader">
            <h1 class="center">Home</h1>
        </div>
    
        <div id="content">
            <div id="leftcolumn">
                <p>Left side</p>
            </div>
            <div id="rightcolumn">
                <p>Right side</p>
            </div>
        </div>
    
    
    
    </div>
    <div id="footer">
      <p class="footer">Footer</p>
    </div>    
        </form>
    </body>
    </html>
    i didnt change all of your code, but changed some to make it easier to navigate... ignore the extra junk i did it in vis studio

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    borosarchangel (05-14-2011)

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks alykins, that works perfectly. Also thanks teedoff, pretty sure that is what you told me to do lol.

    everything works perfectly in all three browsers.


  •  

    Posting Permissions

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