4 replies [Last post]
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have a Web page here: http://www.bayingwolf.com/China/index.html

If you look closely at the right hand box, the subtitle 'Hungry Panda Restaurant' is partly hidden. I have uploaded a screenshot here: http://www.bayingwolf.com/positioningtext.jpg

These HTML attributes govern my Web page:

<div id="content">
 
<div id="box1">
 
<div class="blogpost">
 
<img class="left" src="images/chef1.jpg" width="138" height="138" alt="Chef" />
 
<h2 class="thick">Hungry Panda Restaurant</h2>
 
<p>Text here</p>
 
<h2 class="thick">Subcategory 1</h2>
 
<p>Text here</p>
 
</div>
 
</div>
 
</div>

In my style-sheet, I have tried changing the margins of 'content', 'blogpost', and 'box1' to '0', but that has made no difference. (I have not changed them to '0' all at the same time; just one at a time before changing them back).

Basically, 'Hungry Panda Restaurant' should be top-aligned with the image, but I am not sure what else to try.

Any help would be appreciated.

Thank you.

Bluenose

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Line height?

It looks to me like the line-height is set to 1. Many cursive and fantasy fonts extend beyond the em block, so in this case part of the glyph is cut off.

Try this:

.blogpost h2 {
  font-size: 2.5em;
  line-height: 1.25;
  margin: 0 0 5px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Gary That looks fine

Hello Gary

That looks fine now, thank you.

If you don't mind going to: http://www.bayingwolf.com/China/review.html which is on the same site, there is a similar problem (Review1, Review2).

Would it be worthwhile me extending the line-height from your 1.25 to, say, 1.5?

Yes, you are right: Tangerine and cursive belong to that curly-wurly family!

Mnany thanks again.

Bluenose

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A larger line-height should

A larger line-height should not hurt anything. It may affect the apparent vertical alignment of the image. As you've used it, I wouldn't worry about it, but then I'm not all artsy fartsy about pixel perfection. If you think it necessary, set the image {vertical-align: top;} /*or bottom*/.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello Gary Thanks again for

Hello Gary

Thanks again for your help.

Let me try it!

Cheers