Blog

CSS articles

Setting equal height columns in CSS Grid layouts

Setting equal height columns in CSS Grid layouts

Posted: Saturday 9th March, 2019 - 1:16pm
Author: James Griffiths

CSS Grid (for those browsers that support the feature) makes page layout easier, faster and more flexible than previous front-end development techniques.

If you're struggling with using CSS Grid to render a layout where all columns share the same height then read on... 

Read more...

CSS zebra striping table rows

Posted: Saturday 9th May, 2015 - 6:22pm
Author: James Griffiths

One of the great things about modern browser support for web standards is the amount of really cool things that become so much simpler to do than before.

Case in point: alternating the striping of table rows, lists etc - also known as zebra striping.

With CSS this now becomes almost trivial.

If you're using a pre-processor such as Sass (and if you're not you really should think about investing the time to implement this tool into your development process as it will completely change how you write your CSS....for the better) you can accomplish row striping with the following snippet:

Read more...

Preventing text scaling on iPhone landscape orientation change

Posted: Saturday 25th April, 2015 - 6:08pm
Author: James Griffiths

You may have come across the following issue while developing responsive websites: you're testing your finely crafted pages on an iPhone and change to a landscape orientation only to find your page text has suddenly increased in size.

No, you didn't do anything wrong: it's simply a quirk of text rendering on Webkit, Gecko & Trident based smartphones and the fix is surprisingly simple.

Read more...

Customising a form select menu with CSS

Posted: Saturday 11th April, 2015 - 5:49pm
Author: James Griffiths

CSS, when combined with modern browser support for the latest technologies, allows front-end developers a wider palette of options for crafting website and app interfaces than was possible 10 years ago. In this short tutorial we'll take you through how to customise a standard HTML select menu using nothing more complicated than CSS.

Read more...

Animating div height from bottom of container to the top instead of top to bottom

Posted: Friday 16th May, 2014 - 6:28pm
Author: James Griffiths

We came across some interesting behaviour while building a charting application with HTML, CSS and jQuery. When it came to animating the individual bars of the charts that we were generating the height would always grow downwards! As bizarre as this behaviour seemed fixing it proved to be relatively straightforward.

Read more...

Adjusting transition speeds in jQuery Mobile

Posted: Wednesday 19th March, 2014 - 5:33pm
Author: James Griffiths

We've recently started developing with jQuery Mobile (jQM) and ran into an issue with the speed of page transitions taking place in our Adobe AIR application. Unlike previous complaints registered online from user's concerned about jQM running slowly we found the transitions were running too fast and needed to find a way to slow them down.

Read more...

CSS Hacks for Firefox

Posted: Tuesday 25th February, 2014 - 5:10pm
Author: James Griffiths

No matter how well you craft your CSS you will inevitably encounter a situation where a hack is the only solution to the problem you're facing. Normally this applies only to Internet Explorer but you may come across the odd time when, for whatever reason, Firefox is the misbehaving browser.

Now the question: how to go about targeting Firefox without affecting styles for other non-IE browsers such as Google Chrome, Opera and Safari?

Read more...

Essential rules for print CSS

Posted: Monday 10th February, 2014 - 10:17pm
Author: James Griffiths

One of the most overlooked and often neglected areas of CSS development is that of printing. All too often front-end developers concentrate only on crafting styles that are compatible across different browsers and devices and don't consider how their pages may look when printed.

Let's take a look at some of the challenges involved with creating print optimised CSS.

Read more...
Top