Question

Posted · Report post

Hello there: I was recently on a PC and brought up our website to show someone. I was extremely surprised (and somewhat embarresed) to see that some of our carefully chosen and sized images were displaying completely differently in explorer or even firefox on a PC. 

 

I work in MAC so didn't notice until now.

What can we do to ensure the user experience PC or MAC is similar to what we designed/intended when we build the site?

 

Your thoughts are much appreciated.

 

Site: www.thetradinglab.com

 

 

An example is RSS icon/button. In MAC safari/firefox looks fine...in PC it's orgininal size and skews front page...

 

 

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi fpcas9431
I work on Mac too, but I stole my wife's PC and I see your site correctly in Firefox 22.0 and Chrome  27.0.1453.116m.
I do not see properly only with Explorer 9.
Please, you can verify the versions.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Batman: Are you asking me the versions of browsers I used on PC side?

 

If so, I will have to wait until morning: I don't have access to one right at the moment.

 

It appeared to be browser based: As if the browser was not recognizing the 'code' for sized images? At least at a glance that's how it appeared to me: I was wonder if I had to 'do' something to make those sizes available to all browsers...or if it's a glitch on PC based browsers what the work around for this is?

 

I will re post in the morning on Browsers PC. Mac (which is fine: I use Safari 6.0.5 and tested in Firefox: 18.0.2 also fine...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi again

Yes the browser version in PC, I suppose this is the problem, in my wife┬┤s PC your web works fine with Firefox and Chorme.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the problem is your site is using fixed positions to make it look right on one monitor, but to everyone else who does not have your monitor the sizes are all offset.

 

Basically you should try to never use fixed positions and pixels instead use em and percentages.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello there: I am just back from holidays. Viewing the problem still exists. Only appears in Explorer, using version 10.0.07. I see messer suggestion however currently this displays find in all formats and browsers on desktop (various sizes) and mobiles. Only Explorer and there fore windows based machines and apps affected, and only content in that banner. Any suggestions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

First, his name is Simon, not messer, like yours isn't Advanced Member.

 

Next, did you implement his recommendations?  IE is very sensitive to positioning, scaling, proportions, etc.  It's inevitable that IE will display a site differently than other browsers.  Each renders CSS in their own unique ways.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

First: Simon, sincere apologies, on the name. I see that now: Rob, I don't spend much time on forums. 

 

2nd: I will attempt that in the next few days: Can you from your faster collective experience fill me in: Will changing this affect the browsers it's currently working in? That will be really helpful to know.

 

BEst

 

Frank

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Morning: I have a few minutes to review this and make adjustments. I have read the comments above: Where exactly would one make that change, as it's not clear in the image file itself nor in the "banner" which the images that are changed in IE.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Check your custom code and any CSS you've added to any customization point. You'll find you've added, as Simon points out, fixed values for things.

 

So, where you've said in CSS that something should be 50px wide, replace the 50px with the corresponding value in percentages or in em.  Use this calculator to convert form PX to EM sizes. http://riddle.pl/emcalc/

 

When you use fixed values, they're not responsive. As a result, your site will break in mobile view. So, when someone views your site on different browsers than you're using, they are stuck with the fixed pixel sizes, and the site will not look the same. Since browsers render differently, they will never look close to the same unless you use percentage or em sizes. If a site is 1000px on your machine and that fills the screen, but i look at it on a 1980pixel view monitor, I'm still going to see 1000px width. It won't fill my screen because it's not 100%. 

 

Aside from our documentation, this link will explain some of the basics of CSS in responsive design. http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I have checked "Custom CSS" and have checked the banner itself. I do not see any custom code here. I certainly am not equipped to have put it there. Can you be a wee bit more specific as to where this code might be: I have also checked the various images and there is no CSS attached there either

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm not sure where custom code has been placed in your site.  I see it's using Framework 2.4.1, but we're at 2.4.4 so you're missing some upgrades.  Please update it ASAP.

 

In development, custom code could have been placed in a child theme, pagelines-customize/style.css or other locations.  It's clear customization took place, though.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now