David Pratt » html

“This Page Contains Both Secure and Non-Secure Items”

David Pratt — Tue, 24 Nov 2009 08:14:12 +0000

If you are familiar with the message above, then you have probably seen it a hundred times before.

This Page Contains Both Secure and Non-Secure Items

Do you want to view only the webpage content that was delivered securely

It is caused (as I’m sure you can figure out from the title) by having non-secure items on a secure page i.e. having an asset that sits on the HTTP protocol being called from a secure HTTPS page. This often occurs on checkout confirmation pages, or sign up thank you pages where a developer has a included an absolute path to something that sits on the HTTP protocol. In my experience this is very often 3rd party tracking pixels or marketing banners that have been added as an afterthought.

There is a very straightforward solution to this problem however, all you need to do is use a protocol-independent absolute path that switches between HTTP and HTTPS depending on what protocol the asset is currently sat on. To do this you need to modify (in the case of images) the src path so that it looks something like:

All I have done here is drop the “http:” from the url, leaving the “//” behind. If you are looking at a page in SSL through HTTPS, then what it will do is request that asset with the HTTPS protocol, otherwise it’ll request it with HTTP. This then prevents the annoying error message as all of the page assets are sat on the same protocol.

Dots appearing around images when you click them

David Pratt — Sun, 22 Nov 2009 11:42:30 +0000

A quick tip! If you every get an undesirable dotted border appearing around an image when you click it e.g:

Dots appearing around an image after you click it

All you need to do to fix it is set the outline property of the anchor element to zero, like so:

a{outline:0};

Happy days.

Wrap text on an HTML input button with CSS

David Pratt — Thu, 19 Nov 2009 16:43:16 +0000

Text on a standard HTML input button doesn’t wrap by default, which can be a bit of a pain if you need to say something a bit more descriptive than a typical “add”, “go” or “submit”. The default behaviour for the width of a button is to expand the width to fit the text within – as with all inline elements.

When you have a lot of text within the value attribute of a button, it renders something like this:

If you then reduce the width of the button with a bit of css, you get cropped button text like so:

To wrap the text on the button isn’t immediately obvious, you might try altering the display property, but it probably won’t occur to you to try the following css rule:

white-space:normal;

Which will produce something like:

Now ain’t that great! It doesn’t work in IE6 by the way, so you might need a plan B…

If you can make do without wrapping the text on the button, you should check out this method to make prettier buttons.