Box positioning - cross-browser compatibility issue

Question

I have a problem with a page layout on the website I am working on.

Here's a link

The blue box on the right hand side is looking good in IE and Firefox, but it's too short (the text is too close to the bottom of the box) in Chrome, Safari and Opera.

Here's the code for the box:

#testimon {
   background: url("../img/ttm_bg.png") repeat-x scroll 0 0 transparent;
   border-radius: 15px 15px 15px 15px;
   border-top: 4px groove #00D1FA;
   box-shadow: 0 1px 4px 1px #555555;
   font-size: 14px;
   height: 788px;
   margin-top: 26px;
   padding: 3px;
   text-align: center;
   width: 262px;
 }
#testimon h4 {
   color: rgba(255, 255, 255, 0.92);
   font-size: 19px;
   margin: 8px 0 17px 0;
   text-shadow: 1px 2px 2px #1A1A1A;
 }
#testimon p {
   font-family:Georgia, "Times New Roman", Times, serif;
   color: rgba(0, 0, 0, 0.88);
   line-height:25px;
   font-size: 14px;
   font-style: oblique;
   font-weight: bold;
   text-shadow: 0 1px 1px #CCCCCC;
 }
#testimon .quote {
   font-size:25px;
   padding:4px;
 }
#testimon .signature {
   color: #e6e6e6;
   font-style: normal;
   margin-bottom: 15px;
   text-shadow: none;
 }
#testimon .spacer2 {
   background: url("../img/stars.png") no-repeat scroll 98px 0 transparent;
   height: 13px;
   margin: 31px 0 15px 0;
   width: 262px;
 }

Thanks for any help!

Answer 1

The problem is less a cross-browser issue and more a styling issue - you've got a fixed height on that testimonials div, so what if someone has different fonts than you specify, or increases the font size on their browser, the text will spill over (as it did when I upped the font using Firebug).

The solution is to remove the height from the #testimon element, and ensure that the background repeats vertically (which it currently does not).

Answer 2

This is probably a font rendering related issue. The sizes are slightly different in each browser so the end overall height is different. I would remove the height value from #testimon .

Answer 3

I look at the site with Crome, Opera, Maxathon, Firefox, Safari, and IE, all browsers are current version of the browser. The images and the text look good. The only issue I could see were in some of the browsers you had to click on the image two or maybe three times to make the image to zoom in.

You might want to clear the cache of the browser and close and re-open the browser.