pauldickinsonI recently changed my theme around so that on the post pages, the blog title wasn't a H1 tag, but the post title was a H1 tag. I changed the blog title on the post page to a <span> using the php code below. That part all works fine. The problem I'm having is making the <span> look like the blog title does on the homepage. It's nearly there, but it seems that there is no padding at the top, which there should be. What I did was to copy the CSS attributes of the H1 header tag, to the <span> tag in the CSS, as far as I know that should have worked. But it seems that the padding is being ignored!
Can anyone see whats going wrong here??
My header code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?><?php if ( ! is_home() ) { ?> | <?php } ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="head">
<div class="innerhead">
<div class="inner">
<?php if(is_home()) : ?>
<h1><a>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<span class="blogTitle">
<a>"><?php bloginfo('name'); ?></a>
</span>
<?php endif; ?>
<p class="description"><?php bloginfo('description'); ?></p>
</div>
</div>
</div>
<div id="pagine">
<div class="innerhead">
<div class="inner">
<ul>
<li><a>/" title="<?php bloginfo('name'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>
</div>
</div>
<div id="page">
<div id="body">
<div id="content">
<div class="inner">My CSS code
/* ----- Reset ----- */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,
font,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td { background:transparent; border:0; font-size:100%; margin:0; outline:0; padding:0; vertical-align:baseline; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse; border-spacing:0; }
code { font-family:'courier new',courier,monospace; }
body { background:#fff; color:#333; font:80%/150% arial,tahoma,verdana,sans-serif; }
.print { display:none; }
/* ----- Blocks ----- */
#page { width:960px; margin:10px auto 80px auto; background:#fff; }
#head { height:100px; border-bottom:1px solid #333; background:#069 url(images/back-body.jpg) repeat-x left top; }
#body { overflow:hidden; height:1%; }
#content { width:60%; float:left; }
#sidebar { float:left; width:40%; font-size:0.93em; margin-top:42px; }
#footer { text-align:right; font-size:0.9em; clear:both; padding:20px 0 5px 0; background:#333 url(images/bottom.jpg) repeat-x left top; border-bottom:1px solid #333; }
div.inner { padding:10px; }
div.innerhead { margin:0 auto 0 auto; width:960px; }
div.innerbox { float:left; width:46%; }
div.innerbox-right { float:right; width:46%; }
span.blogTitle { font:2.7em/100% "trebuchet ms",arial,tahoma,verdana,sans-serif; color:#fff; letter-spacing:-2px; font-variant:small-caps; margin-top:10px; }
span.blogTitle a { text-decoration:none; color:#fff; }
span.blogTitle a:hover { color:#fff; }
/* ----- Header ----- */
#head h1 { font:2.7em/100% "trebuchet ms",arial,tahoma,verdana,sans-serif; color:#fff; letter-spacing:-2px; font-variant:small-caps; margin-top:10px; }
#head h1 a { text-decoration:none; color:#fff; }
#head h1 a:hover { color:#fff; }
#head p.description { color:#86ACDB; letter-spacing:2px; font-size:0.93em; text-transform:uppercase; }Any help would be appreciated! Thanks.
Gerben van Eijk