Featured Products In Safari - Bug.

[kjaer]

Hi,

 

In my webshop (still under developing), i am using af module called "Home Featured Products". The module is great, but I am experiencing some problems with that module in Safari 5.05, which also includes the safari-browser on iPad 2 and iPhone 3GS.

This is how it looks in safari and on mobile Apple devices:

 

This is how it should look:

 

 

I think the problem is in the CSS, but I am not sure where and how to fix it.

 

The styling looks like this:

 

iv#featured-products_block_center {height:349px;margin:10px 0 0 0;background:url(../img/tmpopular.png) 0 0 no-repeat;}
div#featured-products_block_center h4 {height:35px;padding:16px 0 0 20px;font:14px "Arial";color:#000;text-transform:none;}
div#featured-products_block_center ul {width:540px;overflow:hidden; display: inline;}
div#featured-products_block_center ul li {width:156px;float:left;padding:20px 0 0 20px; position:relative;}
div#featured-products_block_center ul li a.product_image {width:154px;height:147px;display:block;border:1px solid #f0eff2;}
div#featured-products_block_center ul li a.product_image:hover {border:1px solid #ccc;}
div#featured-products_block_center ul li div.product_info {}
div#featured-products_block_center ul li div.product_info h5 {height:30px;padding:18px 0 0 0;}
div#featured-products_block_center ul li div.product_info a {color:#454444;text-decoration:none; font-weight:normal; font-size:12px; line-height:16px;}
div#featured-products_block_center ul li div.product_info a:hover {color:#000;}

div#featured-products_block_center ul li div.product_info span.price {display:block;padding:3px 0 0 0;font:bold 12px "Arial";color:#0A7389;}
div#featured-products_block_center ul li div.product_info .exclusive {margin:18px 0 0 0;}
div#featured-products_block_center ul li div.product_info .exclusive span{ background:url('../img/marker.png') right 6px no-repeat; font-weight:bold; padding-right:10px;}

div#featured-products_block_center ul li div.product_info p.product_desc {padding:3px 0 0 0;}

#manufacturers_block_left .block_content{ padding-bottom:10px; font-family: Century Gothic;}

 

Does any of you guys, see where the problem is? And how to fix it?

[Carolina Custom Designs]

I think I see your problem. Change the following line

 

div#featured-products_block_center ul li a.product_image{width:154px;height:147px;display:block;border:1px solid #f0eff2;}

 

to

 

div#featured-products_block_center ul li a.product_image{width:154px;height:147px;display:inline;border:1px solid #f0eff2;}

 

Let me know if that works.

 

Marty Shue

[kjaer]

I think I see your problem. Change the following line

 

div#featured-products_block_center ul li a.product_image{width:154px;height:147px;display:block;border:1px solid #f0eff2;}

 

to

 

div#featured-products_block_center ul li a.product_image{width:154px;height:147px;display:inline;border:1px solid #f0eff2;}

 

Let me know if that works.

 

Marty Shue

 

Hi Marty,

 

That, unfortunately, did not work. Any other ideas on how to fix it? :-)