change width on h3 element - css

Question

Why is the tag displaying incorrectly in chrome but not in firefox? In firefox the word baltimore doesn't show on the next line.
<h3>Hill’s Garage<br>
<span> Nissan and Infiniti Mechanic in Baltimore</span></h3>
This is the page in question.
http://hillsgarage.net/wpdir
Thanks in advance for your help.

Answer 1

They look the same to me as well. It is probably a specific version issue.
However, I would guess it might have something to do with nesting a <br> inside of an <h3>, and also nesting a <span> inside there.
You should probably use something like
<h3>Hill’s Garage</h3>
<span> Nissan and Infiniti Mechanic in Baltimore</span>
or
<h3>Hill’s Garage</h3>
<h4>Nissan and Infiniti Mechanic in Baltimore</h4>
At the very least, one of these methods will most likely get rid of that problem, even though I'm not sure what's causing it.
Additionally, you should always close your <br> tags like this: <br/>
You could also assign a class or id to the span, if you wanted to make sure that only that span was affected by your style rules.

Answer 2

It appears to me that Chrome is correct and so is FF and IE.
.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}
You should move your H3 the end of garage.
Maybe provide images of your problem.
(Also, I note an annoyance with your right scroll bar when changing chrome tabs).

Answer 3

You have a <div> on the page called featured (houses the image gallery) that is floated right and a margin-top of 120px. What is happening is this is forcing everything to the left of it to wrap (change the background color to red and you will see how this is interfering). What you need is to move the <h3> outside of the post div such that it is above both the post and the featured divs. If you don't have that level of control then you might get the result by dropping the font-size of the <span> inside the <h3> down to 13px
What you have now:
<div id="featured">...images...</div>
<div class="post">
<div class="entry">
<div class="body_resize">
<div class="body1">
<h3 style="position: relative;">Hill’s Garage<span><br>
Nissan and Infiniti Mechanic in Baltimore</span></h3>
</div>
</div>
</div>
</div>
#featured {
float: right;
padding-bottom: 20px;
margin-right: -10px;
padding-top: 120px;
}
.body1 h3 span {
font: normal 14px Arial, Helvetica, sans-serif;
color: #898989;
}