Bellow is the CSS that controls the navigation in my Wordpress blog. I have an image of an envelope that I would like to use as button to a contact page, the problem is that not all of the envelope is showing up in my navigation. You can see the problems I'm having at http://www.coolmac.org/. The button I am struggling with is in the right-hand corner of the header image.
Thanks in advance.
#nav { list-style: none; margin: 0px; position: absolute; right: 10px; bottom: 10px; } #nav li { float: left; margin-left: 5px; } #nav .current_page_item a, #nav .current_page_item a:visited{ color: #000000; text-decoration: none; } #nav .page_item a{ color: #ffffff; text-decoration: none; background: #5c8d0c url(images/contact.png) no-repeat; padding: 5px 15px; font: bold 14px/100% Arial, Helvetica, sans-serif; border-top: 1px solid #E6EED0; border-left: 1px solid #AFCD69; border-right: 1px solid #AFCD69; display: block; } #nav .page_item a:hover { color: #000000; }
Styling Wordpress is the
Styling Wordpress is the same as styling any other web page - you need a foundation of valid html. You don't have that, you have many html errors, so it's not surprising you have problems.
Wordpress doesn't put out invalid html by default, it's usually the fault of the theme and all in the theme directory. Wordpress themes don't have to put out invalid code.
I would start by fixing up the 97 html errors. Trying to code a web page with invalid html is like trying to build a house without a foundation. You might be able to do it but you shouldn't be surprised if it falls over in the first wind storm.
Can you not simply increase
Can you not simply increase the padding on the anchor? 25px×20px appears to suit the bill.