Hi all.

Something happened this week that I have never seen before and cannot explain.

I am putting text on the screen:
<div class='pageHeading'>
<h2>Software for learning Welsh</h2>
<div class="foreign">Noswaith dda!</div>
<div class="translation">(Good evening!)</div>
</div>

But it's being clipped in IE7 only. (see image)

clipping.jpg

The css is pretty standard:
.pageHeading {margin: 0; padding:0; max-width:600px; overflow: visible;}
.pageHeading h2 {padding-top:45px; font-size:36px;color:#777;font-weight:bold; }
.pageHeading .foreign {font-size:36px;color:#FF9300;font-weight:bold; display:inline;}
.pageHeading .translation {font-size:32px;color:#AAA;font-weight:normal; display:inline; margin-left:10px;}

If any of you have any idea why this might be happening, I would be very happy to hear from you.

You can see this here happening here: www.linguashop.com/learn/welsh.php

Thank in advance,

David