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 :nono:

if anyone can please help it would be greatly appreciated! :smiley:

to save yourself time, do a search in the css for “#nav2” and “#copy” to go to the problem as quickly as possible.

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).

:slight_smile:

thank you :smiley:

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!

donboe beat me to the punch! :smiley:

Fix for both:

HTML:


<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:


#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:


#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.

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:


#footer {
	width : 700px; overflow: hidden; margin: 3px auto 0;	
}

#nav2 {
    float:left; 
}

#copy {
    color:#DE1F26; font-size:10px; float: right;
}

Glad you got it working! :eye:

:lol: Sometimes those things happen. Seems we had the same thoughts.

@SirFrigglesworth: glad you got it worked out

thank you… :slight_smile:

very clear clarification of the situation. thank you.