Archive for the ‘ HTML & CSS ’ Category
Let’s face it, endlessly bashing out HTML is a pain. Even with the advent of automatic tag-closing in certain editors, I still spend far too much time typing tags and changing indentation so that it’s readable to me later on. This is why ZenCoding caught my eye. It’s shorthand for HTML, based on the CSS [ READ MORE ]
Web Designer magazine have put one of the articles I wrote for them on Building an Ajax Search Bar up on their site. Originally published in Issue 159 of the magazine, this was part of a series introducing designers to programming in PHP and Javascript in order to turn their designs into richer, more interactive [ READ MORE ]
Something I was struggling with recently was a quirk in how Internet Explorer zooms in and out on content. All browsers allow you to zoom in and out of a page (usually using Cmd / Ctrl and the +/- keys). It’s rarely perfect, but some browsers are less than perfect than others. Whilst all browsers these [ READ MORE ]
CSS3.Info today published a guide to the Flexible Box Layout, one of the modules of the upcoming CSS3 specification. The Flexible Box Layout provides a way of utilizing unused space in containers by specifying either a horizontal or vertical layout. After the children of element are rendered, any spare space will be divided up equally [ READ MORE ]
One of the most common problems in making tight layouts is getting a text summary to fit a box perfectly. What may look right in one browser, will invariably not look as good in another. This is made worse whenyour text needs to fit in with some other vertical size (e.g. an image next to [ READ MORE ]
A quick post on compatibility with Firefox 2 when using inline-block elements. An inline-block element is one with the “display:” property set to “inline-block” in order for it to flow within text whilst giving you access to block-level properties such as padding and margins. In a recent project, I used these quite extensively to create links [ READ MORE ]
Here’s something I’ve been researching recently – why is there no way to include the margins in the new CSS3 box model. The essence of the CSS3 box model is that through setting the value of the “box-sizing: ” property, you have control over how you define the “height: ” and “width: ” properties. Value Of [ READ MORE ]
A little while back, I posted some information on revisions to the CSS box-model in CSS 3. I thought I’d follow up with some more information that wasn’t in that post regarding another option for the property as well as which properties in affects. In my first post, I mentioned that setting the “box-sizing: ” property [ READ MORE ]
Although there are multitude of browsers out there, sense does prevail (sort of) in that they are all based on handful on rendering engines. This is the important part of a Web browser that actually deals with the layout of the HTML and CSS – many browser will share a rendering engine and then add [ READ MORE ]
IE6 has a very strange bug with an even stranger solution, whereby it doubles margins on floated block elements. Say you have a parent <div> that will contain a 3×3 grid of nine <divs>. You want a ten pixel gap between everything, so we give them all a 5px margin and then add 5px padding [ READ MORE ]