Jump to content


Photo
- - - - -

Problem with pictures


Best Answer Danny , 10 May 2013 - 09:03 AM

There is no problem with Google's Chrome or Apple's Safari, they're simply follow the rules. Technically, max-width should only work in block elements and tables are not a block element.

 

What I would suggest is you either use our Browser specific CSS and add CSS for chrome and safari to add max-width and instead of 100%, use pixels instead. Alternatively and what I would recommend is for you to use the PageLines Grid, instead of tables.

 

http://support.pagel...r-specific-css/

http://support.pagel...us/grid-system/

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 09 April 2013 - 12:55 PM

Hi there,

 

i use PageLines Pro 2.4.1 since a few weeks.

Please take a look at 

Please Login or Register to see this Hidden Content

 and use Chrome and Firefox or the IExplorer - and you will see my problem. In Firefox the Pictures look correct, in Chrome they are smaller an resized, and I have no idea why. This occurs only with the Pageline Theme.

 

PageLines: Pro 2.4.1

WP: newest version on own server

 

Thanks in advance

 

Regards

Axel

 

 



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 09 April 2013 - 01:25 PM

Hi Medical 

 

have you used any CSS on your site? Can you display the plugins you have installed? 

 

Also can you supply some screenshots of what you are seeing please?



#3 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 09 April 2013 - 01:44 PM

Hi Martin,

 

thanks for your reply.

 

Here you can see how Chrome display teh page

Please Login or Register to see this Hidden Content

 

and here, how the Page looks in Firfox

Please Login or Register to see this Hidden Content

 

My WordPress Plugins are

Please Login or Register to see this Hidden Content

 

I do not use a seperate CSS-File, just Pagelines. With the "Pageline Customize"-Plugin I added just a few lines to the "

Please Login or Register to see this Hidden Content

" to change then color of the fix NAV-Bar. 



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 09 April 2013 - 01:49 PM

Can you try disabling all non-pagelines plugins and see if this resolves the issue. Then if it does, could you try re-enabling them one by one to find the culprit. 

 

Let us know how you get on 



#5 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 09 April 2013 - 01:59 PM

... I have already tried this without success



#6 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 09 April 2013 - 03:20 PM

Can you tell me what the actual height/width is for this image? Is the image in your media 190x190? Also what is your setting in WordPress Dashboard > Settings > Media > Image sizes > Thumbnail size?



#7 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 08 May 2013 - 02:50 PM

Hi mackenzie,

 

yes, the first is 190x190, the second 190x120.

The Settings in WordPress Dashboard > Settings > Media > Image sizes > Thumbnail size are "150 x 150", but it doesnt't matter what I choose here - the pictures doesn't change their size.

 

Now I tried to use the NextGen-Gallery - just to see if the Problem stay the same. It does.

It seems that PageLines resizes the images. Is there a solution for this?

 

Thanks & Regards

Axel



#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 08 May 2013 - 03:28 PM

PageLines doesn't resize images. If the issue is occurring only on Chrome, then it may be browser-related. I looked into it and it appears that 24x24 is the size being applied to the images, and it's coming from the Javascript properties clientWidth and clientHeight, which are read-only, so I don't think they can be changed. As a workaround, try using the browser specific plugin so that you can make a change to the width of these thumbnails in Chrome. Please review these instructions for Custom CSS first (if you are unfamiliar with CSS):

Please Login or Register to see this Hidden Content

To download and install the plugin, see:

Please Login or Register to see this Hidden Content

For instructions on how to use it:

Please Login or Register to see this Hidden Content

For help with the width attribute, please see these instructions:

Please Login or Register to see this Hidden Content



#9 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 08 May 2013 - 04:19 PM

Hi catrina,

 

with the codeinspector I found the following (take a look at the Screenshot)

But I have no idea from what the Javascript derives that resizes the images. Any idea where I can find the JavaScript-Source? Is it from PageLines?

falsche-groesse.jpg



#10 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 08 May 2013 - 04:37 PM

Could be that your trying to use tables?

Please Login or Register to see this Hidden Content



#11 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 10 May 2013 - 08:37 AM

Indeed the problem only occurs, when pictures are placed in a Table...but why? And why only in Google Chrome?

Why does Pagelines resizes the images in a table?



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 09:03 AM   Best Answer

There is no problem with Google's Chrome or Apple's Safari, they're simply follow the rules. Technically, max-width should only work in block elements and tables are not a block element.

 

What I would suggest is you either use our Browser specific CSS and add CSS for chrome and safari to add max-width and instead of 100%, use pixels instead. Alternatively and what I would recommend is for you to use the PageLines Grid, instead of tables.

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#13 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 10 May 2013 - 11:03 AM

Great suggest....using PageLines Grid works....but ist there a way to see the Grid-Layout in the WordPress WYSIWYG-Editor?



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 11:19 AM

I wouldn't recommend using the Wordpress Visual editor (WYSIWYG) as it's pretty poor to use when adding HTML to your pages/posts, as it can cause formatting issues. So unfortunately, there isn't any to see a visual representation of the grid, the only way to see it is to add the code to your page/post, save and then view the page/post.



#15 medical

medical

    Newbie

  • Members
  • 8 posts
  • Framework Version:2.4.5
  • Country: Country Flag

Posted 10 May 2013 - 11:22 AM

I understand. Thanks for your solution...using Grid instead of tables solved it.

 

Thanks & Regards



#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 17653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 May 2013 - 11:40 AM

No problem!