CODEWITHSUNDEEP
htmlcssssl
Clay
Clay

Reputation: 5084

Should CSS vary by protocol (HTTP vs HTTPS)?

I have developed a site using the usual suspects: MVC & jQuery. The production site is SSL...but I also have a backdoor to test it over http as well.

The overall structure of the page is:

<body>
  <div class="container">
    <div class="nav"/>
    <div class="control"/>
  </div>
</body>

...and the related .css looks like this:

.container { height: 100%; width: 100%; }
.nav { float: left; width: 23%; overflow-y: auto; overflow-x: hidden; }
.control { float: right; width: 74%; }

When I look at it via http, the nav's content is too large and it's vertical scrollbar shows up. However, when I look at it through the https address, the .nav runs down the page, and the whole page has a scrollbar.

I would prefer to have the behavior in the http view.

If I add:

html, body { height: 100%; width: 100%; }

...it has no net effect in http...however, it acts like I had overflow-y: hidden on the html and/or body.

The variance in behavior is consistent across at least these browsers: ie8, ie9 and chrome.

Is there anything I can do to keep the http behavior in https? Is the difference in behaviors documented anywhere?

I've posted images of the page, as seen through the http and the https binding on the same site:

flickr.com/photos/92527792@N04/8409094719/in/photostream flickr.com/photos/92527792@N04/8410189866/in/photostream

Just to be clear, there appears to be no problem whatsoever in loading the files into the browser. The .css, .js, and html are all coming down fine. The difference appears to be in how the browser handles the content once it comes down, treating the html that comes through port 443 just a bit differently than html that comes through 80.

Thanks for your time,

Clay

Upvotes: 1

Views: 375

Answers (2)

OmegaJunior
OmegaJunior

Reputation: 46

Clay,

Make sure the page is requesting its .css file with a protocol-relative uri. (Assumption: the offending css exists in a separate file insteD of inside the page itself.)

Otherwise, you get non-secured pages requesting secured content and vice-versa, which will lead to loading problems under certain security settings. (Some browsers simply deny access, others warn first, and some offer user preferences about this behaviour.)

A protocol-relative uri is created by removing the protocol from the original url. For instance:
If the original url reads https://sub.domain.com/folder/my.css
its protocol-relative counterpart reads: //sub.domain.com/folder/my.css

Upvotes: 0

Patashu
Patashu

Reputation: 21773

http:// and https:// are not file formats nor do they alter the file in anyway, they indicate the protocol the file will be transferred over e.g. file:// and ftp:// pointing to the same file would also transfer identical data.

Make sure that the same .css file is being used in both cases.

Upvotes: 1

Related Questions