[SOLVED] Any Ideas?

[CoreyR]

In ie, the divs look perfect, but when you view the footer in FF, its tucked under the div above.

 

http://www.romerowebsites.com/index.php

 

HTML

<div id="footer">
<div id="footerlinks"><p class="footerlinks"><a href="page.php?page=about">ABOUT ME</a><img src="/images/spcr.gif" width="25" height="1"><a href="page.php?page=examples">EXAMPLES</a><img src="/images/spcr.gif" width="25" height="1"><a href="page.php?page=port">PORTFOLIO</a><img src="/images/spcr.gif" width="25" height="1"><a href="page.php?page=contact">CONTACT</a></p></div>
</div>

CSS

#footerlinks {
/*border:1px solid #000000;*/
width:780px;
height:45px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin:10px;
padding:10px;
}

#footer {
border:1px solid #000000;
width:780px;
height:53px;
margin-left:auto;
margin-right:auto;
margin:auto;
padding:0px;
}

 

 

[SuperBlue]

Ok, maybe this..

 

This is the CSS

body {
  margin: 0;
  padding: 0;
  text-align: center;
}
#footer {
  border:1px solid gray;
  width: 780px;
  height: 55px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
#footerlinks {
  border: 1px solid #000000;
  width: 770px;
  height: 40px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7px;
}
.links {
  position: relative;
  top: 10px;
}

 

This is the HTML

<div id="footer">

  <div id="footerlinks">

    <span class="footerlinks">

      <a href="page.php?page=about" class="links">ABOUT ME</a>
      <img src="/images/spcr.gif" alt="" style="width: 25px;height: 1px;" />
      <a href="page.php?page=examples" class="links">EXAMPLES</a>
      <img src="/images/spcr.gif" alt="" style="width: 25px;height: 1px;" />
      <a href="page.php?page=port" class="links">PORTFOLIO</a>
      <img src="/images/spcr.gif" alt="" style="width: 25px;height: 1px;" />
      <a href="page.php?page=contact" class="links">CONTACT</a>

     </span>

    </div>

</div>

 

However, you should be able to do this the way you did. However when using the P tag it will render it as a paragraph, and that was what cursed it to "push" the text down about one line in FF. (other smaller typos aside).

[dbrimlow]

Did you try "clear:both"

 

That's usually how I get my footers to behave when they follow left:float divs.

 

 

#footer {
border:1px solid #000000;
width:780px;
height:53px;
margin-left:auto;
margin-right:auto;
margin:auto;
padding:0px;
clear:both
}

 

you can also "clear:right" your last left floated element (as well as clearing both for the footer)

[CoreyR]

clear:both worked like a charm. Thanks for the help guys!!!