« Money stuff | Main | Doing an Arafat »

I wanted to like CSS positioning, but CSS Positioning IE didn't like me

Many years ago, I developed websites for a living. I wasn't, truth be told, very good at it, but it was the tech boom and a chimpanzee could get a web design/development job if it managed to hit the < sign half the time.
One thing I found out back in 1998/1999 was that while CSS was great for avoiding "tag soup" HTML code in which your code was cluttered with <font> tags, it was unusable for positioning.
Since then, a lot has changed, right? After all, Moveable Type uses default CSS templates which also position the blocks of text, and there are many nifty websites that demonstrate perfect, swappable CSS positioning. Surely it's come of age?
Well, yes, if you ignore crappy old not-updated-substantially-since-2000-but-still-used-by-80%-of-all-web-users IE. Creating CSS positioning that works in Opera, Konqueror, Firefox, what have you has become really easy. All you need to do is swipe some code from a tutorial page like this one and modify it. If you want it to work in IE, though, you'd better not change a jot nor a tittle, or you'll find yourself banging your head against a wall trying to figure out what broke. I used the code from that tutorial site (because the CSS code in Moveable Type's templates is complicated), modified to fit my needs, in a new About Page for ROCR. I don't have IE at home but it looked fine in Opera, Firefox and Konqueror. So I thought, "let's ask my friend Mithandir if it looks good in IE", and sent him the URL, thinking that there might be a few trivial little problems. Several hours later, we still hadn't found a way to fix the broken left margin and sidebar position — at least not one that didn't break it for Mozilla/KHTML-based browsers. And Mithandir's web design skills considerately exceed those of a chimpansee so it's not just me.
Because we both have lives, I eventually gave up and made a version using tables. I also had quite a bit of content for the page to finish, so I had no more time to spend on the CSS implementation.
But I hate giving up. Does anyone reading this know how to make this CSS setup behave?

Comments (5)

Branko Collin:

Although there are several differences between IE and other browsers--some of them flaws, others merely inconsistencies--I don't know of any involving positioning.

I have been struggling with IE a lot after chosing to use positioning, but that was because of the consequences of such a choice: once you position an element, you tend to want to do sensible things with the widths and heights of these elements too, and that's where IE can produce surprising results.


Looks to me there is no margin defined on #content (or is that in the rd.css?)
Just so you know: 'margin: 0 auto' won't work in IE. You may want to use another way of centering the wrapping div :-)

Branko Collin:

Yesterday, I started work on a website that is about twice as complex, as far as I can tell, as the famous about3 page, and progressed quite quickly; all thanks to positioning. (The HTML itself is a marvel of clean semantic goodness, although with a tad too many divs, perhaps.) Positioning really helps to make webdevelopment fast and fun.

The night before, I spent three hours on about3, and I think I have found the problem. Your web page is possesed by the devil! Yes, that can be the only solution!

(Well, I'll give it another go if I find the find the time; the demon also did very strange stuff with caches and iframes and saved the webpage with files, even though I distinctly remember choosing "HTML only". I'll have to be more on my guard, next time I wrestle with that wily spirit.)

There are about three problems with converting a table based lay-out to a CSS based one, and after I had finally kicked out the demon that possesed your web page, I had the time to realize your page has got them all.

The first problem is that a block level element, unlike a table cell, won't automatically scale horizontally, except when you float it.

The second problem is that a floating element floats with regard to the content following it: if you want to float something to the right, you have to place it before the element that is going to end up on the left. You could of course float the first element to the left, but then you would need to set the width of that element.

The third problem is that floated and absolutely positioned elements are taken out of the so-called "normal flow". This means that in calculating the heights and positions of all other elements, the floated and abs. positioned elements are not counted.

What this means in practice for your design: if you use floating or absolute positioning, your two main columns won't be of the same height, and you won't be able to automatically place the footer underneath the tallest element (unless you were to know for sure which was going to be the tallest element.

Also, if you want to float the side-bar to the right, you will have to place it before the main content in the HTML document; which will result in not-very-accessible HTML.

What you could do, is float both columns to the left; that way, they get to stay in the same top-to-bottom=left-to-right order. You will need to set the widths of both columns, though.

As for the footer, you could place it in the main content column. (As I have done on http://come.to/tekstadventure--I actually think that is a logical position.)

Whatever you choose to do, you will end up with a different design.

I should get back to that design, before I forget the many tips people have given me....


This page contains a single entry from the blog posted on November 28, 2004 9:10 PM.

The previous post in this blog was Money stuff.

The next post in this blog is Doing an Arafat.

Many more can be found on the main index page or by looking through the archives.

Creative Commons License
This weblog is licensed under a Creative Commons License.
Powered by
Movable Type 3.34