3

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.

enter image description here

5
  • @Krister Andersson: Why not? There's nothing wrong with that.
    – BoltClock
    Nov 24, 2011 at 0:05
  • No, you're right, I just though so=) Nov 24, 2011 at 0:08
  • @Kelbizzle have you solved this? Nov 24, 2011 at 0:21
  • @JonathonG no, not yet. I just checked it on chrome on a windows computer and couldn't reproduce the issue. Needless to say, I have a head ache now.
    – Kelbizzle
    Nov 24, 2011 at 0:34
  • if I change #featured {margin-right: -10px;} to -20 it seems to take care of the issue.
    – Kelbizzle
    Nov 24, 2011 at 0:57

3 Answers 3

4

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.

1
  • Agreed always close <br/>. However because of the image gallery that is floated to the right breaking things out into <h3> and <h4> won't solve the problem on this page. Nov 24, 2011 at 0:27
0

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).

0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.