View Full Version : Margin Property in Links


jmeanor
03-27-2006, 01:33 AM
Ok, this is about my 3rd question with the navigation box thing lol.

I have this CSS Code for my navigation bar,<style type="text/css">

a.nav_link:link {
display:block;
margin-bottom: 0px;
margin-top: 0px;
width:120px;
height:15px;
text-decoration:none;
background-color:#99CC33;
color:white;
}

a.nav_link:hover {
background-color:#6699CC;
margin-bottom: 0px;
margin-top: 0px;
color:white;
font-weight: bold;
}
a.nav_link:visited {
display:block;
margin-bottom: 0px;
margin-top: 0px;
width:120px;
height:15px;
text-decoration:none;
background-color:#99CC33;
color:white;
}
</style>

And I want to get the boxes about 1 pixel apart if any at all. Right now they are too far apart and it taking up too much space, take a look, click here. (http://www.jmeanor.info)

I've been told to use the margin property and i've been googling it for days now and it's still not working correctly. Can someone help me out? Thanks! :D

allie
03-27-2006, 01:51 PM
It looks like you have right click disabled, so I can't view the contents of that left frame to see how you have the links set up. Can you post the html of the left frame here?

jmeanor
03-28-2006, 12:25 AM
Sorry, hehe. It's not a frame, just tables.. here it is:
<table width="120" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#0099FF">
<tbody>
<tr>
<td valign="top"> <div id="menu">
<div align="center">
<div id="menu">
<div align="center">
<p><font size="1.5" face="Tahoma"><strong>Information
<style type="text/css">

a.nav_link:link {
display:block;
margin-bottom: 0px;
margin-top: 0px;
width:120px;
height:15px;
text-decoration:none;
background-color:#99CC33;
color:white;
}

a.nav_link:hover {
background-color:#6699CC;
margin-bottom: 0px;
margin-top: 0px;
color:white;
font-weight: bold;
}
a.nav_link:visited {
display:block;
margin-bottom: 0px;
margin-top: 0px;
width:120px;
height:15px;
text-decoration:none;
background-color:#99CC33;
color:white;
}
</style>
</strong></font></p>
</div>
</div>
<div>
<div align="left"><font size="1.5" face="Tahoma"> <a class="nav_link" href="/jmeanor/news.htm" target="_self">
News</a></font><font size="1.5"><br>
<font face="Tahoma"><a class="nav_link" href="/jmeanor/art.htm" target="_self">Articles</a><br>
<a class="nav_link" href="/jmeanor/newsletter.htm" target="_self">Newsletter</a><br>
<a class="nav_link" href="/jmeanor/interviews.htm" target="_self">Interviews</a><br>
<a class="nav_link" href="/jmeanor/links.htm" target="_self">Links</a><br>
<a class="nav_link" href="/jmeanor/fact.htm" target="_self">Random
Fact Archive</a></font></font></div>
</div>
</div>
</div></td>
</tr>
</tbody>
</table>



Here's one table of the navigation bar. All I simply want is the boxes to get closer together. :P