Alex Little

Not being a designer spending all my time getting to know the ins and outs of how floating divs work, it tends to take me a little while to get my head around how to lay out pages using pure CSS. I thought I’d pretty much got how to do 2 and 3 column layouts with CSS and divs, but today I found a new problem which really had me stumped for a while.

Essentially I wanted an ordered list, then within each <li> element a couple of <div>s which I could float to layout how I wanted. Everything was working fine in Firefox, but not in IE(6), the images below show the output given in Firefox and IE:

IE (6):

Firefox:

HTML code which generated the above images.

The items numbered 1-3 show how I want the output to appear, but my first stab at the code resulted in items numbered 4-6. As you can see, in Firefox it appears fine, but in IE the ‘float:left’ is being ignored, making the div containing the text appear below the checkbox. [Aside: you might ask why I'm using divs and floats for something as simple as just some text next to a checkbox, well, this is just my starting point, my final page will be more complicated than this example!]

The only difference between the working and non-working examples is that the div containing text has width property defined (set to 100%) in the working version. I’m not sure why this should be necessary – my example shows that it’s not needed if the wrapper div isn’t part of an ordered list.

My only explanation is that this is another (frustrating) little IE CSS bug – unless anyone can give me another explanation? Alternatively if there are better ways to do what I’m trying to achieve?

Spent a little while this morning trying to fix a little inconsistency between IE (v6) and Firefox in how the border settings for ul and li elements worked. Here are a couple of screenshots to demonstrate the problem:

IE:

Firefox:

And here’s a snippet of the CSS I was using:

ul.menu {
margin: 0;
padding: 0;
left: 20px;
width: 90%;
border-bottom: solid 1px #d09800;
}

ul.menu li {
display: inline;
margin: 0;
}

ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}

ul.menu li a {
font-size: 1em;
color: #d09800;
margin: 0;
border: solid 1px ;

}

ul.menu li a:hover {
background: #fdfaf3;
color: black !important;
text-decoration: none;
border: solid 1px #d09800;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #333 !important;
background: white;
text-decoration: none;
broder: 1px;
border-top: solid 1px #d09800;
border-left: solid 1px #d09800;
border-right: solid 1px #d09800;
border-bottom: solid 1px white;
}

When I changed this snippet to be:

ul.menu {
margin: 9px;
padding-left: 10px;
border-bottom: 1px solid #d09800;
padding-bottom: 6px;
padding-top: 5px;
}

ul.menu li {
display: inline;
margin: 0px;
}

ul.menu li a {
padding: 5px 15px 6px;
border: 1px solid #d09800;
text-decoration: none;
font-size: 1em;
color: #d09800;
margin: 0;
}

ul.menu li a:hover {
background: #fdfaf3;
color: black;
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #d09800;
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
color: #333;
background: white;
text-decoration: none;
}

Everything worked as I wanted it to! For info the original CSS was taken from the K2 WordPress template which I adapted for the tabbed menu that we wanted for the MSG site.

Have just applied the new design to this website – so it now uses CSS instead of tables for the layout. There are still a few pages that I need to finish off and tidy up, but it’s pretty much done. I’ve tested the site with IE6 and Firefox and it seems to work fine with both of those, but if you see any ‘odd’ behaviour/layout using other browsers, then please just let me know