I want to remove a few pixels from a buffer space below a hyperlink, but I can't figure out how. I am using a modified streetstyle template. You can see it at: http://www.mrwindupbird.com/comingsoon.html

What I want to do is remove some a couple of pixels blackspace from beneath the "c o m i n g . s o o n" text.

Here is what I have in layout.css:

----------------------------------------------------------------

.menu a {
font: normal 1.1em sans-serif,Arial;
color: #FFF;
background: #000;
display: block;
margin-top: 5px;
padding-bottom: 0px;
width: 220px;
height: 22px;
}

.menu a span {
padding-left: 4px; color: #FFF;
}

.menu a.current{ color:#f09;
}

.menu a.section,
.menu a:hover {
color: #159fdd;
}

----------------------------------------------------------------

And the following can be found in typography.css:

----------------------------------------------------------------

.typography a {
color:#F09;
text-decoration: none;
padding-bottom: 0px;
}

a {
color:#FFF;
text-decoration: none;
padding-top: 2px;
padding-bottom: 0px;
}

.typography a#big,
a#big {
text-align: right;
color: #F09;
padding-top: 2px;
padding-bottom: 0px;
}

a:hover,
a.ro {
color: #F09;
padding-top: 2px;
padding-bottom: 0px;
}

----------------------------------------------------------------

Obviously, I have played with "padding-bottom" but to no avail. Any pointers in the right direction or all-out "do it like this:" help is greatly appreciated.

Thank you!!

So you're trying to center the text from top to bottom... Not sure what u know and don't know, so I'll go over the basics.

If you don't have Firebug for FireFox, get it. It will help you troubleshoot on the fly.

The 3 things that affect your issue are:
height, line-height, & padding.

When you center something top to bottom, it almost always should have less padding-top and more padding-bottom (ie padding-top:5px, padding-bottom: 6px). This will give the illusion of center. This is true for anything (ie centering a photo in a frame).

Anytime you add padding, your increasing the size. (ie width: 100, padding-left: 5....new width is 105)

So to start, try:

line-height: 16px
height: 16px;
padding: 5px 0 6px 0;

Other notes:

Remove the title tag from the code. I get so annoyed when it's used improperly. I don't need a tool-tip that says the same thing as the menu text. And I certainly don't need a "Go to the --- page" since anyone that has used the internet more than a day, knows that a menu button takes them to another page... wish they'd remove that from the tutorials. It makes the site less usable, especially if you have a drop-down sub nav and you can't read the text because there are tool-tips on everything.

Remove align = center from the <p> & <a>, and add text-align: center to the code above... if you're going to have many items in the menu, then the common method is an Unordered List instead of a Paragraph.

I am brand new to this. Never made a webpage before I started this project a few days ago, so it is very much a learning process for me. I can obviously find my way around a computer, but this is a new language for me... Thanks for the tips!!

I will try placing the code you posted to various parts of the layout and typeface files, but if you could, can you tell me where they should go? I'm frankly not sure what the difference is between many of them. I just figured the "a" section in CSS was meant for <A HREF> bit in hyperlinks... but I'm also still not sure how it only applies to hyperlinks in the navigation menu and not in the content section. LOTS to learn!!!

I will also clean up the extraneous stuff as you suggested. Good point. :)

Thanks again!

Interesting, so I found that I got the results I wanted by copying:

line-height: 15px;
padding: 3px 0 3px 0;
height: 15px;

to the ".menu a" section in the layout file and the "a:hover, a.ro" section in the typography file. What are the other sections doing that they don't matter? Is there documentation for this or are they arbitrarily named in the context of the theme?

Hey thanks again for your help! Site is looking great with text visually centered in the nav bars, and extraneous code removed from the menu! :) I also installed the firebug add-on you mentioned. Don't know what it does yet but looking forward to playing around and finding out.

Looks like I got ahead of myself... Where is the code with the "Go to xxxx" menu hover items that I should remove? I looked in the php files in /mysite/code but it's not there... ?

If you only want to affect the links in your menu then only apply to .menu a, .menu a:hover

You can find the title="----" in your template files. It's probably Page.ss

Firebug will show you which styles are being applied to the parts of your site. Click the pointer icon, then click a part of your site.

Great, thanks so much!