span in h1 falling away

Using Wordpress for the first time. For the post titles, I've inserted a <span> around certain words so I could style the navigation. I need to take that difference back out for the page h1 title, since both words should look the same in that spot.

In titles where the first word is enclosed in span like

<span>parnter</span> agencies

all works well. but if the second word is in the span

our <span>mission</span>

the h1 first word is pushed to the right edge and second word falls out of the container.

I can't replicate the problem in dreamweaver. html and css validates; firebug inspection shows no differences in the codes. No surprise -- they use the same template.

h1 {
font-size:1.6em;
color:#fff;
font-weight:normal;
line-height:1.8em;
}
#heading h1, #heading h1 span, #mainevent h1, #mainevent h1 span {
height:44px;
width:320px;
padding:0 8px;
margin:0;
background: #5A8AB3 url(/images/roundedcorners/br_18_5a8ab3_bfe2ff.gif) no-repeat right bottom;
line-height:2em;
}
#heading h1 span, #mainevent h1 span {background:none;}

<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="message"></div>
<div id="fbnav">
<ul>
 <li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div id="main">
  <div id="heading"><h1>our <span>mission</span></h1></div>
<div class="clear"><p>&nbsp;</p></div>
</div>
<div id="footer">
</div>
</div>
</body>

span in h1 falling away

wordpress issue? designer error? YOU to the rescue!

sldesigns

Dabrowski

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week