News & Blog

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....
Bootstrap Hide Popover Title

Remove Twitter Bootstrap Popover Title

January 25th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
I’ve been experimenting with the Twitter Bootstrap framework over the past few days and I must say, I love it. One of the main features that I’m using is the popover functionality which results in a popup fading in when you hover over or click on specified elements. There was s...

IE7 and IE8 Ignoring Opacity When Using jQuery fadeIn()

November 3rd, 2012 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
I’ll dive straight into this one by explaining the problem I came up against earlier this week whilst cross browser testing a feature in Internet Explorer 7 and 8. Let’s look at the following element: What we’ve got here is a black div with 50% opactiy, hovered over the t...

Overcome min-width and max-width CSS on Table Not Working in IE7

February 28th, 2012 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
Whilst trying to make a screen look better across all resolutions recently, I came across a problem with IE7 when making the page cross-browser compatible. I was trying to add the CSS attribute ‘max-width’ on a table so that it would stop expanding across the entire screen on l...

Prevent CSS Padding Changing an Elements Dimensions

July 8th, 2011 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
Today I want to share with you a scenario I find myself coming across on a day-to-day basis and one that had me stumped when I first started to build HTML websites; the fact that when you add padding to a HTML element it has a direct impact on the width and height of that [...]...

Adding Page Breaks to Printable HTML with CSS

July 4th, 2011 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
When it comes to designing and building a website there’s not really a limitation to how big, small, wide or thin you make it, the users resolution being the only concerning factor here. When it comes to printing however we have slightly more refined constraints; the paper height and...

Including a Stylesheet from Within Another Stylesheet

June 13th, 2011 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
If you’ve got a stylesheet that is used in conjunction with other stylesheets on a regular basis did you know that you can include it within the CSS? Maybe you’ve got styles duplicated across multiple CSS files, in which case it might be better to put these duplicated classes i...

Adding Multiple CSS Classes to an Element

June 5th, 2011 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
I find that CSS can generally be broken down into two categories; generic classes and element-specific classes. By doing this it makes the CSS less clunky and easier to maintain. Not sure what I mean? Let’s take a look at the following scenario: Before <style type="text/css"> ....

jQuery jqGrid Slow to Respond when Clicking Cells or Rows

January 31st, 2011 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.
After recently getting stuck into the jQuery grid plugin jqGrid by Tony Tomov and getting a hold on the core functionality, something that came to light relatively quickly was the responsiveness (or lack of) when performing actions on grid events such as ‘onCellSelect’. More th...

Only Applying a CSS Opacity to the Parent Container

November 16th, 2010 - Posted by Steve Marks to (X)HTML / CSS, Web Development.
If you’re reading this post you’ve probably realised by now that any elements included within a container that has had a CSS opacity applied will inherit this opacity also. Let’s look at a quick example of this scenario The CSS: body { background-color:#C00; } .container ...