Jump to content


Photo
- - - - -

Inconsistent CSS problems


Best Answer Rob , 18 July 2013 - 08:42 AM

Hi Paul,

 

Third party services like Facebook, Twitter (Bootstrap) and others deliver styling to a site.  For example, Twitter Bootstrap controls many of the shortcodes we offer, and may also control parts of NavBar (if I recall correctly).   Thus, from an Intranet site, since there's no connectivity to the broader Internet, the styling for some elements of a site will look differently. 

 

Now, when it comes to things like the Feature Slider, if you're uploading images to the site on the Internet, and your client isn't connected thereto, images can't be viewed because they're not Local to the client's view.  They'll be visible immediately when the site is viewed online.  Similarly, since the content is delivered via the online database, it can only be viewed when online. Images, content, etc., that are locally loaded, will still be seen.

 

You should still be able to set up your client's host file so that the visible site is whatever you have on your IP address. 

 

I'd recommend speaking with your network administrator, hosting company or IT department (if you have one) to ensure that the client's view is the same as yours and then the problems will be resolved.

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 fsgllc400

fsgllc400

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 15 July 2013 - 06:08 PM

Hello

 

Forgive me in advance for the long drawn out post but I've got a weird issue. I've been developing this site for a few weeks and all along I've been checking to make sure the site displays correctly in all of the "current" browsers. IE, Firefox, and Chrome.

 

I'm gearing up to deliver this site and received an e-mail from the client stating that the page looks awful, with an attached screenshot. -- I saw that she was using XP, therefore IE8... I searched the Pagelines forums and saw the multitude of threads explaining that Pagelines was cutting edge with CSS3 and HTML5, yada yada yada --- Bottom line: Don't use IE8. 

 

I explained this to the client, and discussed having a "disclaimer" pop up for IE8 users telling them they were using an incompatible browser. I then proceeded to check the website from my home system running Windows 8 in IE10, Chrome, and FireFox. -- They all formatted correctly and looked fine. I e-mailed the client with screenshots showing her my view and that I'd look into the issue further.

 

She then replies back with a screenshot from IE8, IE9, and IE10 with the formatting incorrect... (See attached)

 

So my question - I don't have IE8 or IE9 - so I can't test but why does it appear "fine" for me in IE10, and incorrect for her? (Yes both of us have "refreshed" the page to make sure we dont' have an older version cached, as well as having other users on different systems check the page) - I understand why IE8 doesn't display correctly but I surely would have thought IE9 and 10 would have been fine.

 

 

Hindsight after posting: I am connected to the test environment via VPN - my client is on the local network - I'm wondering if some of the "advanced" scripting is being shut off for the "Local Intranet" zone on her machine. When I get home from work this evening I"m going to check MY browser settings over the VPN to see if they match hers.

 

Please see the attached screenshots - Specifically what is broken: "Classic Nav Bar" and the "Branding Icons" - Any and ALL input is most appreciated. Thanks!

 

MY VIEW FROM IE 10 on WINDOWS 8: (and subsequently how the page SHOULD look)

3qPkXno.jpg?1

 

IE 8 on Windows XP:

55jBxBX.jpg?1

 

IE 9 on Windows 7:

qN3mC1V.jpg?1

 

IE 10 on Windows 8:

5NRZtAw.jpg?1

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 July 2013 - 08:08 PM

Hi,

 

If you go to Dashboard > PageLines > Site Options > Advanced did you check the box Include Google IE Compatibility Script?

 

You may not be aware of this site: 

Please Login or Register to see this Hidden Content

  You can use it for testing different browser views of your site.

 

Similarly, you might not know we have a

Please Login or Register to see this Hidden Content

, that lets you customize CSS for individual browsers.

 

Now, to answer your question.  Browsers pick up settings from the computers they are on, and as such, each will have variables, so even if you and your client were on two computers with almost identical systems, the same browser may render a page differently.  Usually, these are minor variables.

 

I suspect in this case, the compatibility script will work for you. But if you need it, the CSS plugin will let you use the unique classes for things like the icons and move them where they belong.

 

I hope this helps.  Please let us know.



#3 fsgllc400

fsgllc400

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 16 July 2013 - 12:29 PM

Rob,

 

Thanks for the response! I tried the Google IE Compatibility script, and that didn't do anything - If anything it seems to have made things worse - The feature slider is "broken" and a few other things.

Moving on to the Browser Specific CSS plugin you linked; I'm not sure what browser specific CSS I should be using? I thought what I was doing was simple enough (pretty much just margin/padding changes to move the branding nav around)

and I don't know where to begin to get the classic nav working across different platforms.

 

I guess what I'm saying is I thought that the CSS changes I made were pretty simple, as to not require cross-platform CSS (i.e. I figured these CSS functions would be built in to any browser)

 

 

Thanks again for the reply, I appreciate it immensely.

 

 

/r
Paul



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 July 2013 - 02:03 PM

Paul,

 

If you use something like Chrome's Inspection Tool or Firebug for Firefox, you can see the CSS for almost any element on your site.  So, if you find the CSS for the icons, which should be .icons, you can copy it, paste it, and prefix it with the code for a specific browser. You can then adjust values or properties to suit the browser's behavior.

 

Unfortunately, different browsers manage CSS in different ways, which is out of our control. We don't write for the browser, we write based on the CSS we're using, which is CSS3 and LESS CSS.   By prefixing the Browser Specific CSS code, you can make sure all the browsers see the site the same way.



#5 fsgllc400

fsgllc400

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 16 July 2013 - 02:13 PM

Alright, I'll give it a shot. Thanks Rob!



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 16 July 2013 - 03:00 PM

Anytime.  Let us know how it goes.



#7 fsgllc400

fsgllc400

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 16 July 2013 - 11:35 PM

So I've figured out my issue and the difference between my view and my clients view -- but I'm not sure why or how to fix it.

 

Because I'm connected via VPN, when I go to the development site it is via the "Internet" zone in IE. When my client goes to check the page, she is on the local LAN with the web server. It loads in "Local Intranet" zone.

THIS is causing the visual problems.... Why?

 

I can replicate the bad formatting on my end by manually adding the development server to the "Local Intranet" zone on my machine. My clients settings are determined via the autodetect setting to the left in my screenshot.

 

Again, how the page should look:

Please Login or Register to see this Hidden Content

 

How it looks with the "Local Intranet" settings:

Please Login or Register to see this Hidden Content

 

 

Any ideas/explanation? -- Again, thank you so much for helping me with this, I'm so close to being finished!

 

 

Respectfully,

Paul



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 July 2013 - 08:42 AM   Best Answer

Hi Paul,

 

Third party services like Facebook, Twitter (Bootstrap) and others deliver styling to a site.  For example, Twitter Bootstrap controls many of the shortcodes we offer, and may also control parts of NavBar (if I recall correctly).   Thus, from an Intranet site, since there's no connectivity to the broader Internet, the styling for some elements of a site will look differently. 

 

Now, when it comes to things like the Feature Slider, if you're uploading images to the site on the Internet, and your client isn't connected thereto, images can't be viewed because they're not Local to the client's view.  They'll be visible immediately when the site is viewed online.  Similarly, since the content is delivered via the online database, it can only be viewed when online. Images, content, etc., that are locally loaded, will still be seen.

 

You should still be able to set up your client's host file so that the visible site is whatever you have on your IP address. 

 

I'd recommend speaking with your network administrator, hosting company or IT department (if you have one) to ensure that the client's view is the same as yours and then the problems will be resolved.



#9 fsgllc400

fsgllc400

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 July 2013 - 12:14 PM

Got it.

 

Thanks again for all of your help Rob!



#10 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2411 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 July 2013 - 06:02 PM

Thanks for letting us know :)