News & Blog

Removing The Gap Between inline-block Elements

November 29th, 2015 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
If you’ve ever had a set of elements in your HTML that have the CSS display property set as inline-block you’ve probably come across the problem where you end up with a 1px gap between them. Lets look at an example of this where we will use an unordered list: HTML: <ul> &...

Why CSS Line-Height Might Refuse to go any Lower

October 3rd, 2014 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
I had an issue recently whereby I was trying to set the CSS line-height property of some text but it just would not go lower than a certain amount, even when setting it to, for example, 1 pixel. Making the line height larger however would increase the vertical space between the text. The c...

Extract Header and Footer From Website HTML

June 11th, 2014 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
A lot of projects we undertake begin with us copying an existing site’s HTML to use as the foundation for further updates. Whether it be implementing a site into a Content Management System, or maybe someone has lost contact with their existing developer and needs us to clone the sit...

How To Create a Torch Effect With jQuery

April 16th, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
On the homepage of this site you’ll notice that there is a series of panels advertising each service. My favourite one is the ‘Contact Us‘ panel, mainly because of the effect being used. I call it the ‘Torch Effect‘ because it’s like someone shining a to...

Fixing Remote Modals in Bootstrap 3.1

January 31st, 2014 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
Yesterday saw the release of Bootstrap version 3.1. After upgrading one of my sites that previously used version 3.0 I noticed that my remote modal dialog boxes had stopped working. The translucent backdrop would show but the content wouldn’t. There were no JavaScript errors, and no ...

Reasons Not To Use Software For Automatic PSD to HTML Conversion

October 15th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Software, Web Development.
Have a quick search for the phrase ‘PSD to HTML conversion‘ and some of the results returned will probably be adverts for software that can allegedly turn your Photoshop files into HTML at the click of a button. I’m sure that this software can do the job, or at least get ...
Remove Gap Below Image

Removing The Small Gap Below An Image With CSS

July 9th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
There is a layout issue that I find myself coming up against over and over again regarding images. The scenario occurs when an image is wrapped within a div, and results in a small gap a couple of pixels tall appearing directly below the image. I’ve provided an example of this below....

Page Jumping To Top When Clicking Link Containing Click Event

July 4th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.
There are number of reasons why you might want a link to not actually redirect the user to another page, but instead perform a specific JavaScript action. This might include such things as switching tabs, cycling through a carousel, or simply toggling a div. To achieve this you might do so...

Updating The HTML <title> Tag With JavaScript

March 26th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
Sometimes we might not know the full title of a HTML page when the page first loads, meaning that we will need to set it dynamically. I found myself in this scenario recently and needed to set the title using JavaScript. I couldn’t believe how easy it was to do and wanted to share th...
Radio Buton and Checkbox Label

Selecting A Radio Button Or Checkbox By Clicking The Words Around It

February 28th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
Radio buttons and checkboxes within a HTML form are generally quite small, especially when completing a form using a mobile phone. As a result, to improve accessibility, you may have seen other websites make it possible to also tick the inputs by clicking or tapping on the word immediately...