HTML And CSS

Paddings and margins on <ul> and <ol> elements in HTML are fairly inconsistent across browsers, even when they are both explicitly set. This post looks at how to try to align these bullets points against a margin as consistently as possible across browsers.

I started working on the template for a new website today and decided to have a look at HTML 5 for laying it out. Everything was looking nice until I discovered that Internet Explorer does not allow CSS styling for elements which it does not know about (e.g. <header> <section> etc). There is a Javascript workaround but I prefer not to use that so show here my solution for the time being.

Some more about HTML 5

I won’t comment here about the new elements etc in HTML 5. Instead, have a read of these two recent articles:

• Everything you need to know about HTML5 at TechRadar
• New elements in HTML 5 at IBM Developer Works

The Javascript Solution

The Javascript solution is to create elements like so:

document.createElement('myelement');
 

This means they can then be styled in Internet Explorer. However, if the visitor has Javascript disabled then it’s not going to work and the layout of the site will be broken. Although the numbers of visitors with Javascript disabled is low, it’s not something I’m prepared to accept at the present time.

My temporary solution

Until all but a few Internet Explorer users have upgraded to an HTML 5 compliant version of Internet Explorer (IE9) I’ll use the solution presented here. It’s not ideal but it will make changing the HTML to be more semantic HTML 5 later easy.

Here’s more or less the document structure I was trying to do:

<header>
 <nav> ... </nav>
 </header>
 <section>
 <aside>...</aside>
 <article> ...</article>
 <aside> ...</aside>
 </section>
 <footer>
 ... 
 </footer>
 

And here’s my solution, which is to replace the HTML 5 elements with <div>s with the class name the same as the HTML 5 element which they replace:

<div class="header">
 <div class="nav"> ... </div>
 </div>
 <div class="section">
 <div class="aside"> ... </div>
     <div class="article"> ... </div>
 <div class="aside"> ... </div>
 </div>
 <div class="footer">
 ...
 </div>

I’ve used classes rather than ids because the elements can appear multiple times in the DOM. As you can see in the above example there are a couple of asides.

In the future when I decide to make the document template semantically correct HTML 5 I can simply replace <div class=”header”> … </div> with <header> … </header> etc and change my CSS from .header { } to header { } and it’s all good.

Occasionally I’ve needed to specifically make the mouse a hand with HTML and CSS when mousing over a particular area and I’m always forgetting the property used to set it, so this quick post is for my own quick reference, and shows example of the other property values too. cursor: pointer To make the mouse …

Read more