Margin-top for text

Dev Shed Forums Sponsor:

October 11th, 2012, 09:50 AM

lelales

Contributing User

Join Date: Mar 2008

Posts: 601

Time spent in forums: 4 Days 40 m 3 sec
Reputation Power: 37

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; © 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!

October 11th, 2012, 11:26 AM

rdoyle720

Contributing User

Join Date: Dec 2003

Posts: 646

Time spent in forums: 2 Weeks 3 Days 4 h 44 m 24 sec
Reputation Power: 400

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

Viewing: Dev Shed Forums > Web Design > CSS Help > Margin-top for text

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump