«« Found an IE Bug? Ouch! »»
blog header image
Overlapping Backgrounds

Wow, the default Moveable Type 2.63 CSS stylesheet is horrible. I discovered why Internet Explorer 6 is coughing up a lung and other major organs: because every <div> on this page had a background. Some places on the page had three white backgrounds layered on top of each other. It's definitely another Internet Explorer bug, but it's generally something a good CSS stylesheet doesn't do anyway. I took out every background but the one on <body> and that seems to fix the problem.

So why did the Moveable Type development team do it? My guess is so that CSS newbies would know where to change the background colour of the individual elements. Sure that's all well and good and helpful but it really screws the default rendering. The default template should be rock solid and something that people can depend on. There are people out there that won't even touch their templates -- and the administrator can configure Moveable Type to have users/bloggers that can't change their templates at all. D'oh!

If there are any other weird browser problems with this site please let me know.

Update on April 26th, 2003 12:15pm: The overlapping backgrounds was causing the page to render with large white blocks in it, covering text. If you went to another area of the page and came back, the text might be fixed. Or you could highlight the area where the text should be and it would appear.

I've made a mirror of this index page with the default "clean" stylesheet that is provided with Moveable Type 2.63 so people can try it out for themselves. If you're wondering why that page doesn't fit on your screen laterally, it's because of this problem.

Update on April 26th, 2003 12:45pm: I can't get that IE background problem to reproduce on the mirror page with the original templates. I'm stumped. I had a half dozen different people with this problem on my site. I'll try to track it down ... sorry about the inconvenience.

Nevertheless, the rather serious absolute div problem with the original style sheets I mentioned earlier is still present. This is a combination of bad CSS and IE 6 not being too forgiving (or maybe too literal). That's very unlike IE considering some of the malformed HTML it renders.

Posted at April 23, 2003 at 12:56 AM EST
Last updated April 23, 2003 at 12:56 AM EST
Comments

aaaaahh...much better :-) Btw, your left column (with all the links) is like unreadable on Phoenix off of my Linux Machine. It's the font I think...though I think it might be a Linux font rendering issue. Try for yourself. My site looks fine in Linux off of Mozilla, Opera, Phoenix, Konquerer...you get the point.

Try looking at your site on a Linux machine.

» Posted by: roy at April 23, 2003 01:41 AM

I had to ask, eh? I'll check it out. :)

» Posted by: ryan at April 23, 2003 09:20 AM

Looks fine to me. I tried Phoenix (Firebird) 0.5 and Mozilla 1.3 on Red Hat 8. Maybe you are missing a font? What Linux distro are you using?

» Posted by: ryan at April 23, 2003 10:11 AM

Redhat 7.3. I guess it's on my end...Linux is notorious for ugly fonts by default...though I do have a lot of extra fonts installed. I also have it running on like 1280x1024 res too. It doesn't really matter though.

» Posted by: roy at April 23, 2003 10:31 AM


How long do you think until I customize my blog?

:p

» Posted by: andrew at April 24, 2003 02:28 AM

Ah! I hate that default width thing that blows out in IE6. It's a bug in IE's box model, yup. You can work around it by setting a width : 75% on #content. I already have this fix in line for the next refresh of the default templates. And yeah, the backgrounds thing will be fixed, too.

» Posted by: Anil at April 26, 2003 09:35 AM

What problems were the overlapping backgrounds causing? (trying to trackdown some problems on one of my sites)

» Posted by: Ryan Schroeder at April 26, 2003 09:52 AM

How about the problem where IE 6/Win will crop the page off where the sidebar ends? What causes that and how can I fix it?

» Posted by: xian at April 26, 2003 12:47 PM

I can't believe Dave Winer is using your experience to somehow justify his thought process and angry "product manager" mindset.

http://scriptingnews.userland.com/2003/04/26#When:4:14:24AM

Hey Dave, bugs happen. But why not run the W3C Validator (both XHTML and CSS) against moveabletype.org and the CSS within... it validates perfectly. And their stuff looks good. And you can easily read and navigate using Lynx or Notepad for that matter.

Product Managers are supposed to listen to users - customers after all - not speak over them.

» Posted by: Mike at April 26, 2003 01:42 PM

Hey Ryan, this is a test of the emergency broadcast system.

» Posted by: eek at April 26, 2003 03:16 PM

A standard warning you see from CSS validators is that if you specified a "color" property, you also need to specify a "background" property. So a tweak to make the CSS validate properly (as mike points out) is what makes IE6 "cough out a lung". Ironic.

Personally, I think that the MT default style sheet is a bit too verbose, and should rely on inheritance from the BODY element more (for color, background, font-family, etc.)

» Posted by: Dotan Dimet at April 26, 2003 07:11 PM

Whoa, there, Mike, are you suggesting that it’s more important that some code “validates perfectly” than that it actually *works*?

Sure, problems using CSS might be the fault of Internet Explorer, but (if you put aside his retarded categorization of browsers into “MSIE” and “buggy”) I think that’s partly Dave’s point. For all the coolness of CSS, it is *currently* less reliable than HTML presentational markup, and *by design* it is more brittle. That brittleness allows greater precision, but at the expense of fault-tolerance.

» Posted by: mpt at April 26, 2003 08:14 PM

OK for the record. Just because you blog you don't necessarily know jack shit about about web design. People have been murdering HTML in degrees for years and when their narrow minded design implementation fails them they view it as a browser bug pleeeeeese.
CSS is not "brittle" it is a more liberal design technique than HTML for style. OK a short course on HTML and CSS....HTML=structure syntax CSS=style syntax. To fix the color: and background-color: problem just use just use 'background-color: transparent;...........see next post.

» Posted by: Don at April 27, 2003 07:30 AM

You will have to learn new ways of doing things that are basicly easy. HTML does not have all the answers. Tables were not ment for content management, rather the expression of data and statistics. They hold explict and "brittle" structure properties of their own. Thats where the confusion starts. If tables are explict in terms of structure and you are percieveing structure as style when you add a CSS class you are nesting a style element within a structure element.LESSON #1 "Style always wraps structure".....

» Posted by: don at April 27, 2003 07:46 AM

No, I'm not saying that its more important that every page "validates perfectly". My complaint with Mr. Winer is that his well-read site needs to be a bit more careful in the way it presents topics.

Over the past few years a sufficient groundswell of user/developer interest in web standards actually made a difference. Witness tool vendors coming out with tools that are ever more able to produce well formed code.

Winer's own agenda doesn't care much about standards that aren't his, or aren't important to promoting his product. And you have to wonder why he gets in a fuss over a simple issue - easily fixed. Does he have motivation to promote an "anti-CSS" agenda? There is some evidence of this.

But there's more to life than weblogs - except for perhaps Dave Winer. Web developers the world over would die for a situation where every browser in the world would render complex HTML/CSS/XHTML designs in exactly the same way. There is, after all, a specification for this - should not this end-point be the goal for browser vendors? And if it isn't, should we not question why?

Is CSS brittle? No. Is it harder? Yes, thanks to browser vendors.

I for one will be happy when I don't have to test any new design against 15 different browsers and operating system platforms, juggling and re-juggling various aspects of the design to compensate for the quirks of all. And that's not strictly a "CSS" for layout perspective; there are plenty of browser specific quirks for very simple uses of styles.

Wrapping up this disorganized train of thoughts - Winer fancies himself as a leader. He should put his recognition to good use and join the community in lobbying browser developers for improvements in standards adoption and compliance, rather than lean on "if IE does it right I'm happy".

» Posted by: Mike at April 27, 2003 11:42 AM

100% on the money I just finished a all XML/XSL client side layout where I juggled between IE and Mozilla.Don't even ask me about Opera. I am seeing this all over the web lately...people defending using structure as style. Yup CSS is harder but its outcome raises your intuitive level of just what style and structure are and how style and structure work together

» Posted by: Don at April 28, 2003 12:48 AM

Nice stuff Ryan....it's cool.

» Posted by: Tina at May 9, 2003 11:07 AM

Thank you ... I had struggled with the IE6 / MovableType problem of disappearing text prior to finding this message. After eliminating most of the overlapping backgrounds my problem has been solved.

» Posted by: tim at April 21, 2004 02:14 AM
Google
 
Search scope: Web ryanlowe.ca