Forum Support

Shape 5
March 28, 2024, 07:03:42 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Image News panel pictures a little wider in Safari  (Read 503 times)
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« on: October 13, 2009, 05:02:06 PM »

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
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: October 14, 2009, 07:12:17 AM »

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>
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« Reply #2 on: October 14, 2009, 10:24:56 AM »

Hi Mike,

Is this output code or source code?

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

Thanks,

-lance
« Last Edit: October 14, 2009, 11:20:50 AM by lhallberg » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: October 14, 2009, 11:10:27 AM »

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

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« Reply #4 on: October 14, 2009, 11:20:59 AM »

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
Logged
lhallberg
Jr. Member
**
Offline Offline

Posts: 15



« Reply #5 on: October 14, 2009, 11:51:07 AM »

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
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.