IECSS Filter

January 5, 2005 7:11 PM

IECSSFilter: So I've been happily running my blog (link is relevant to post) all year, tweaking the design here and there, using Firefox and Safari as my default browser, when all of a sudden... [.More { location: inside; }]

I check it out in IE and horrors! The main content section seems to ignore the right: 155px; position I've given it and is in fact going way beyond the right margin....but only in IE.

The content section is the only one for which I have both left and right positions set, as I'd like the layout to be as liquid as possible...

The portion in question is all in a div called #content, which has the layout info.

Could one of you CSS-Masters point out what I've done to make the evil IE gods frown upon me?

Stylesheet located here.

posted by softlord to computers & internet (12 comments total)

One problem is that you have a bunch of tables in there (though I'm not sure why*), and they all have a width of 100%.

*If you are using cells to float the images, you should check out CSS Float. Here, for example.
posted by taz at 12:20 AM on January 6, 2005

Unfortunately, if the image floats, it then doesn't affect the height of the entry box, and ends up sitting on top of the next one down...

oh and also the width thing isn't working, even after de-tablefying (as witness my most recent entry) :(
posted by softlord at 6:49 AM on January 6, 2005

The tables don't help, but they probably won't destroy the code. That is, the tables aren't going to break your page in the way that you're asking about (I think). But, yes, I'd suggest that you keep playing with CSS and get rid of the tables as quickly as possible.

Without playing with your code too much (on my end), I'd suggest that you try and set it up using one of the three-column layouts that are floating around on the web. I think Glish has some? Google for [CSS "three column layout"] and you should get some good results.

But the premise of it is that you would float the left sidebar and the right sidebar, like so:

#leftbar {
float: left;
width: 150px;}
#rightbar {
float: right;
width: 150px;}
#copy {
margin: 0 160px}

And then your html would have:

[div id="leftbar"]
[p]blah[/p]
[/div]
[div id="rightbar"]
[p]blah[/p]
[/div]
[div id="copy"]
[p]blah[/p]
[/div]

Replace the square brackets with angel brackets, of course.
posted by Alt F4 at 6:59 AM on January 6, 2005

Spoke too soon... removing all the tables fixed the width problem but the height of the topmost entry is still too short :(

I guess I will pad with BR tags.

Thanks!
posted by softlord at 6:59 AM on January 6, 2005

Maybe I'm dumb. I'll look at it some more.
posted by Alt F4 at 7:00 AM on January 6, 2005

Nevermind.
posted by Alt F4 at 7:01 AM on January 6, 2005

Alt F4: And then your html would have: [left navigation bar, right navigation bar, content].

Oooh, that works great - would you mind if I ask if this is a commonly-used technique? I ask because I work on web pages for blind people, and they tend to navigate through web pages in the same order as the HTML code, so with this design they'll have to plough through both left and right bars before they get to the actual content. With tables they would probably encounter left bar - main content - right bar, which is a bit better.

(Of course, there are accessibility solutions for this problem: but since few people use these solutions, I'm interested in how CSS is used in real life so I can try to get a handle on whether its increasing use will improve the situation for blind people or not).
posted by alasdair at 7:41 AM on January 6, 2005

[Sudden thought] Sorry, my comment above is a derail, isn't it? I should have posted a new askme question, shouldn't I? Sorry softlord. Ignore me.
posted by alasdair at 7:43 AM on January 6, 2005

alasdair: You can get the same effect using absolute positioning. This way you can re-order the HTML blocks for a more accessiblity-oriented approach. Something like:

div#leftCol {
position:absolute;
left:0px;
top:0px;
width:150px;
}
div#rightCol {
position:absolute;
right:0px;
top:0px;
width:150px;
}
div#content {
margin-left:150px;
margin-right:150px;
}

[div id="content"]
blah
[/div]
[div id="leftCol"]
blah
[/div]
[div id="rightCol"]
blah
[/div]

In fact, you can re-arrange the order of the three blocks however you'd like. The most frequent problem I've run across using this approach is that removing the columns from the page flow can make it difficult if all three columns are supposed to be the same height. This can be overcome using Javascript. An example would be columnExtender().
posted by Fezboy! at 8:24 AM on January 6, 2005

Sorry, actual link.
posted by Fezboy! at 8:25 AM on January 6, 2005

I haven't dug into your html at all, but in general I find that Dean Edward's IE7 is really useful when dealing with CSS layout issues in IE. IE7 is basically a set of javascript files and stylesheets that makes IE's layout work more like the layout in Firefox.
posted by HiddenInput at 9:56 AM on January 6, 2005

Small validation error should be fixed.
posted by joeclark at 10:48 AM on January 6, 2005