77 replies to this topic

[lyn]

What I like using FF pages to check my pages is that, if there's a problem, I can look up the correct way to do it (or I can get help from people who know the correct way to do it) because the correct way is published.

If I wanted to use IE as a benchmark for correct page markup, I'd have no place to go that would tell me, in coherent consistent form, what the correct way is supposed to be!

That's what standards are all about. I don't know what the specific problem is that you're having -- it seems you have already identified what FF and Safari require from you. I really don't believe IE would be as helpful!

You never hear about where to go for "Firefox hacks" -- just for the IE hacks!

[torka]

Patience, grasshopper. We have things like jobs and families that require our attention. Expecting (much less demanding) an answer within an hour and a half of your original posting is Bad Form. Contrary to popular opinion, we don't all spend 24/7 here on the forum, you know...

I don't know what you're trying to do, but in my experience FF is much more compliant with CSS standards than IE. As lyn points out, it is a telling statistic that there are loads of IE hacks floating around to help designers work around the bugs, inconsistencies and nonstandard CSS implementations of IE, but there are precious few FF/Safari hacks.

Bottom line, IE has plenty of problems with real standard CSS. I've run into many difficulties with valid CSS displaying flat out wrong in IE.

What specifically were you trying to do that you were running into such difficulties?

--Torka

[qwerty]

I must be falling behind on my studies... Not that I'm a designer, but I do code, and I thought you couldn't set the height of a div. Its height is however much space it takes to display its content.

You can force it with JS, but I don't think that's what you're talking about.

[Raphael]

Chilled.................Puff.....................Very Chilled.........

specific problems I having is :

1:defining unequal columns in content the same in height in css.
2:laying out the page in css without defining height for each div.

Is it just me, or are these two things at cross-purposes?

1 - You want unequal columns in content to be the same height, but ..
2 - You want to do it without defining the height for each column?

The major difference between IE's height model and the rest of the world's height model is that if you assign a height to a div in IE, and the content is taller than that height, then IE will stretch that div to accomodate the div. The W3C standards state that the div should not change size and that you should use the overflow property to define what happens when content is larger than a div.

If you wish to define a height for a div that *will* stretch, you should use min-height. That defines a minimum height for an element that is then allowed to stretch to accomodate it's contents. However, IE does not recognize the min-height attribute.

CSS is sorely lacking, in my opinion, when it comes to actual layout rules, even for the most compliant browsers. If you want to lay out a page to look *exactly* as you designed it to look in Photoshop or Acrobat, use tables and spacer gifs. They're still the only way to get a 100% guaranteed result, especially with the more complex and more nested your design.

However, whether you think IE's CSS model is better or worse than the W3Cs, it remains a fact that it is *different*. That's what people mean when they say that Firefox et al are "better" browsers.. Because they do exactly what the W3C's CSS spec says they should.... Whether that's what you want them to do, or not

[foamcow]

However, whether you think IE's CSS model is better or worse than the W3Cs, it remains a fact that it is *different*. That's what people mean when they say that Firefox et al are "better" browsers.. Because they do exactly what the W3C's CSS spec says they should.... Whether that's what you want them to do, or not wink.gif

And that's the point of a standard. It puts everything on a level playing field so you, as a coder, know where you stand. If you do "this" then "this" happens. Unfortunately IE isn't quite there yet. To be honest no browser is 100% compliant yet, but FF, Opera, Safari and Camino are alot closer than IE6.

So to the original post.

The defined standard says that an element's height will stretch to accomodate any non floated elements within it.
All browsers will accept a height setting, but the spec says that if you set a height then that's the height no matter what is in there. IE will incorrectly (as per the W3C spec) expand the element to contain what is in it.

The thing is, there is a rule for doing that, as was pointed out, min-height. Specifying min-height will set a height and then the element will expand to accomodate it. Unless you are IE in which case it will just ignore the min-height.

So there's the actual problem. IE doesn't follow the defined standard properly.


So to your particular problem
There is a technique known as the "faux-column method" which is regularly employed in circumstances such as yours. Go to www.alistapart.com/articles/fauxcolumns/ and have a read. It's simple to do.

I would also suggest that you take a look at some books by the author of that article too. Namely "Web Standards Solutions" and "Bullet Proof Web Design", perhaps also Jeffrey Zeldman's "Designing with Web Standards".

Once you understand how CSS is meant to work you will see the logic behind it and why IE is, for want of a better word, wrong.

Don't blame CSS or "other browsers" for problems you are having with CSS. I'm sad to say, it's a typical MS mentality. The web doesn't revolve around MS and Internet Explorer. Sure alot of people use it, but that doesn't make it "right". Try and get out of the "MS mindset" as I like to call it.

[chrishirst]

Something I am working on (when time permits) is http://www.candsdesi...height-columns/


works cross browser as well

[lyn]

Something I am working on (when time permits)

Skanking, keep an eye on this. When Chris gets around to putting new shoes on the kids, we all get happy feet!

[Randy]

I'll mention it because I know it to be true and Chris is not one to toot his own horn...

Chris' method works wonderfully well for tableless columns. So well in fact that I can tell you it's being used on at least one major university site, a site that needs to support all browser/OS combinations and also pass Accessibility tests. Truly a nice piece of work on that one Chris.

[foamcow]

Chris, you know I used javascript/css column balancing on the first site revamp for the company I was at before I joined this one don't you? ;-)

Though your method is probably cleaner.. it was in those early days when I had just started using CSS.

From the waybackmachine
http://web.archive.o...getgroup.co.uk/

For what it's worth, I still favour the faux column method.

Edited by foamcow, 01 September 2006 - 09:09 AM.

[maleman]

Dang It! I get an error on Chris's link.

OLE DB Provider for ODBC Drivers error '80040e21'
ODBC driver does not support the requested properties.
/include/inc_funcs_sql.asp, line 46

[Randy]

Probably just a temporary server thing when you tried it earlier today maleman. I just tried the link and got through okay.