#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    657
    Rep Power
    38

    Margin-top for text


    Hi, I have a footer with some text. Unfortunately, the text is aligned to the bottom of the footer bar. So, my solution was to add "margin-top:-12px;" to the footer text. This isn't working.

    Here's my CSS:
    Code:
    a.footer{
    color:#ffffff;
    font-family:arial, helvetica, sans-serif;
    font-size:10pt;
    text-decoration:none;
    padding:0px 4px 2px 4px;
    margin-top:-12px;
    display:inline
    }
    a.footer:hover{
    color:#89c6e6;
    font-family:arial, helvetica, sans-serif;
    font-size:10pt;
    text-decoration:none;
    padding:0px 4px 2px 4px;
    margin-top:-12px;
    display:inline;
    }
    and here is the code for my footer:
    Code:
    <div id="footer">
    <img src="images/common/nav/line.gif" />
    <span class="footer">&nbsp;&nbsp;&nbsp; &copy; 2007 MaxiFlex LLC &nbsp; &nbsp;&nbsp;</span></div>
    <img src="images/common/nav/line.gif" />
    &nbsp;&nbsp;&nbsp;<a class="footer" href="http://www.maxiflexllc.com/ControlPanel/">MaxiFlex Webmail</a>&nbsp;&nbsp;&nbsp;</div>
    <img src="images/common/nav/line.gif" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="footer" href="http://www.maxiflexllc.com/reps/">MaxiFlex Reps</a>&nbsp;&nbsp;&nbsp;</div>
    <img src="images/common/nav/line.gif" />
    
      <!-- end #footer --></div>
    Can anyone see what I'm doing wrong?
    thanks!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    702
    Rep Power
    441
    The reason the margin isn't working is because you have it set to display: inline. Try display: block, or inline-block.

    Other than that, you're not following best practices. You don't need to repeat all your styles for your :hover, just the stuff that's different (i.e. the text color). Using &nbsp; is a bad idea, use padding or margins instead. You seem to be using an image to draw a line. If it's just a plain line, use borders instead.

IMN logo majestic logo threadwatch logo seochat tools logo