SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: footer problems

  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer problems

    this is concerning:

    http://luxtechn.com/tokio/index.html

    ok, so i am familiar with:
    display: inline; /* IE6 double float margin bug fix */

    problem #1
    but even though i include this in my styling i can not get the footer which consists of two parts: #nav2 and #copy to align correctly in IE6 and IE7

    problem #2
    the strangest thing is i have two different PCs. both have the newest version of firefox installed on them and on one pc the footer looks aligned fine and the other pc it is too far left! this is for the newest firefox and they are showing differences in the footer. problems like that make me just want to

    if anyone can please help it would be greatly appreciated!

    to save yourself time, do a search in the css for "#nav2" and "#copy" to go to the problem as quickly as possible.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You make it very complicated the way you have things. Place the nav2 and copy in a other wrapper. Make the wrapper 700px wide, just like your slide and give it margin: 0 auto;

    The reason that you saw the footer on two different computers a different way is probably because they had two different resolutions or a different size. You give #nav2 margin: margin-left:449px; margin-right:301px;. Those are based on nothing. Like I said make a wrapper div and place both thos divs inside that wrapper and make them floating and play with margins

    Try this:
    Code CSS:
    #footer {
    	width : 700px; overflow: hidden; margin: 3px auto 0;	
    }
     
    #nav2 {
        float:left; 
    }
     
    #copy {
        color:#DE1F26; font-size:10px; float: right;
    }

  3. #3
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fix for both:

    HTML:
    Code HTML4Strict:
    <div id="footer">
      <ul id="nav2">
        <li class="no_marg_left"><a class="on" href="index.html">Home</a></li>  |  
        <li><a href="menu.html">Menu</a></li> | 
        <li><a href="gallery.html">Gallery</a></li> | 
        <li><a href="reserve.html">Reservations</a></li> | 
        <li class="no_marg_right"><a href="contact.html">Contact</a></li>
      </ul>
      <div id="copy"><p>&copy; Tokio Sake 2010</p></div>
    </div>

    CSS:
    Code CSS:
    #footer {
      font-size:10px;
      margin:5px auto 0;
      width:700px;
    }
      #nav2 { float:left; }
      #copy { color:#DE1F26; float:right; }

    To take it a step further, keep the #footer div and add a div with an id of #container around everything and add/change the following:
    CSS:
    Code CSS:
    #wrapper {
      margin:0 auto;
      width:700px;
    }
      #footer { font-size:10px; margin:5px 0 0; }
        #nav2 { float:left; }
        #copy { color:#DE1F26; float:right; }

    The #container's width:700px; keeps your content from getting all messed up if the browser squashes down really small. The margin:0 auto; attribute centers the #container within the browser.
    Follow me: @josh_max

  4. #4
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    donboe beat me to the punch!
    Follow me: @josh_max

  5. #5
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    You make it very complicated the way you have things. Place the nav2 and copy in a other wrapper. Make the wrapper 700px wide, just like your slide and give it margin: 0 auto;

    The reason that you saw the footer on two different computers a different way is probably because they had two different resolutions or a different size. You give #nav2 margin: margin-left:449px; margin-right:301px;. Those are based on nothing. Like I said make a wrapper div and place both thos divs inside that wrapper and make them floating and play with margins

    Try this:
    Code CSS:
    #footer {
    	width : 700px; overflow: hidden; margin: 3px auto 0;	
    }
     
    #nav2 {
        float:left; 
    }
     
    #copy {
        color:#DE1F26; font-size:10px; float: right;
    }
    thank you...
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  6. #6
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ok_hornet View Post
    Fix for both:

    HTML:
    Code HTML4Strict:
    <div id="footer">
      <ul id="nav2">
        <li class="no_marg_left"><a class="on" href="index.html">Home</a></li>  |  
        <li><a href="menu.html">Menu</a></li> | 
        <li><a href="gallery.html">Gallery</a></li> | 
        <li><a href="reserve.html">Reservations</a></li> | 
        <li class="no_marg_right"><a href="contact.html">Contact</a></li>
      </ul>
      <div id="copy"><p>&copy; Tokio Sake 2010</p></div>
    </div>

    CSS:
    Code CSS:
    #footer {
      font-size:10px;
      margin:5px auto 0;
      width:700px;
    }
      #nav2 { float:left; }
      #copy { color:#DE1F26; float:right; }

    To take it a step further, keep the #footer div and add a div with an id of #container around everything and add/change the following:
    CSS:
    Code CSS:
    #wrapper {
      margin:0 auto;
      width:700px;
    }
      #footer { font-size:10px; margin:5px 0 0; }
        #nav2 { float:left; }
        #copy { color:#DE1F26; float:right; }

    The #container's width:700px; keeps your content from getting all messed up if the browser squashes down really small. The margin:0 auto; attribute centers the #container within the browser.
    thank you

    although i have a question:
    i placed a <div> named "#cont" directly underneath <body> to house all the markup. it has styling of "margin: 0 auto" and "width: 700px" i thought that this would then center everything and i wouldnt have to include "margin-left: auto" and "margin-right: auto" for <div>s like "#header" so i took out the "margin-left: auto" and "margin-right: auto" for "#header" but it then puts content on the left side of the page. i am confused as to why i have to specify a margin of auto for the left and right sides for #header when i already did that for "#cont"

    thanks again!
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Margin:0 auto on fixed width elements will center that element only in the space available.

    It will not center children of that element as margins are not inherited.

    They will just sit inside that element as normal and will only be centred if they also have a width and margin:auto applied.

    Text-align:center though will center text inside a container as the text-align is inherited (and indeed in IE5 it will mistakenly center block level elements as well but that's another story).


  8. #8
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Margin:0 auto on fixed width elements will center that element only in the space available.

    It will not center children of that element as margins are not inherited.

    They will just sit inside that element as normal and will only be centred if they also have a width and margin:auto applied.

    Text-align:center though will center text inside a container as the text-align is inherited (and indeed in IE5 it will mistakenly center block level elements as well but that's another story).

    very clear clarification of the situation. thank you.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  9. #9
    SitePoint Zealot ok_hornet's Avatar
    Join Date
    May 2009
    Location
    Oklahoma
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad you got it working!
    Follow me: @josh_max

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ok_hornet View Post
    donboe beat me to the punch!
    Sometimes those things happen. Seems we had the same thoughts.

    @SirFrigglesworth: glad you got it worked out


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
  •