Shape 5

Joined the club and installed Emma Smooth using Site Shaper and so far everything looks great!

Except... on our SiteShaper install the 5 car images in the S5 Image News panel are a few pixels wider so the 5th image bumps down causing the panel to either not show and leave a blank spot on the right... or the panel some how "knows" and drops down twice as far to show the 2nd row image.

http://www.nietc.net/  please use viewing Safari on Mac OS X.

The part that concerns me is this only looks like that on Safari for Mac OS, on IE 6 / 7 it looks fine.  On the demo it looks the same in both Safari and IE 6.

Is there any difference between the Demo template and the Site Shaper install?
How should I correct this so it looks the same in both browsers?

Thanks,
-lh

Hello, there was a change to this a little while back because Safari does not display paddings correctly. The code used on the demo is:


<div style="float:left; margin-right:15px">
  <img style="width:161px; height:101px" src="images/drop_down_1.jpg" alt=""></img>
 

  <div style="margin-top:6px; text-align:center">Lexus IS-F Coupe</div>
</div>
<div style="float:left; margin-right:15px">
  <img style="width:161px; height:101px" src="images/drop_down_2.jpg" alt=""></img>
 

  <div style="margin-top:6px; text-align:center">Ferrari M Class 300</div>
</div>
<div style="float:left; margin-right:15px">
  <img style="width:161px; height:101px" src="images/drop_down_3.jpg" alt=""></img>
 

  <div style="margin-top:6px; text-align:center">Chevy Camaro Convertible</div>
</div>
<div style="float:left; margin-right:15px">
  <img style="width:161px; height:101px" src="images/drop_down_4.jpg" alt=""></img>
 

  <div style="margin-top:6px; text-align:center">Infiniti G37 Coupe</div>
</div>
<div style="float:left">
  <img style="width:161px; height:101px" src="images/drop_down_5.jpg" alt=""></img>
 

  <div style="margin-top:6px; text-align:center">Ford Mustang Shelby GT</div>
</div>
<div style="clear:both"></div>

Hi Mike,

Is this output code or source code?

If source code where is the source and I'll change it.

Thanks,

-lance

Hello, this is the code used in the module published to the drop down module position. It is entered in the module's backend.

Ok,

I went in to edit the "Sneek Peek at the Hot News Cars for 2010!" drop_down_1 module as you said.

I click HTML, removed the existing code, typed in your code (or pasted) and clicked "Update".

Interestingly, when I click "HTML" again the editor cleared the style attribute inside the image tag.  Weird?  I thought so.

I tested with creating an article, inserted an image, clicked HTML and put in a simple style attribute in the image tag, such as...  style="padding-left:30px".  Then after clicking "Update" in the HTML dialog the padding was not adjusted and clicking "HTML" again I see the style attribute I applied again had been removed.

This is a brand new install using SiteShaper of the Emma Smooth.  Does the TinyMCE editor clear style formatting in image tags?  I tested on a <p> paragraph tag and the style stuck.

I am able to format the drop_down by applying w x h in the width and height attributes of the images but am wondering about limitations to the TinyMCE html editor.

Any info would be great, thanks.

-lh

Hi Mike,

Resolved and resolved.

You're code with the explicit style attributes for width and height definitely fixed the drop_down display in Safari.

I went into the Extensions->Plugin Manager and selected "Editor - TinyMCE 2.0" and changed it's settings for "Code cleanup on save" to "Never".  This fixed the problem with stripping out style attributes in the image tag.

Thanks,

-lance