Oh, Internet Explorer, how I despise you
December 1, 2010 1:27 PM Subscribe
Oh, Internet Explorer, how I despise you. I'm de facto webmaster for a small Center at a well-known university. I made a web page that, IMO, looks much nicer than the one we have now. Of course it's not properly displaying in IE, but looks fine in Chrome and Firefox. Any idea what code I need to throw in there to make things render okay in IE? Please please don't say I have to go back to a fixed-width wrapper and absolute positioning. Full disclosure: I'm a librarian, not a web designer. 100% self-taught with the HTML and the CSS and all this nonsense. Don't tell me to hire a web designer, because then I won't have a job. (warning, selflinks inside)
Response by poster: No, it's not. Hence this question instead of hours of Googling and tweaking code! I'm just pretty confident that several of the non-techy people here still use IE and have no idea how hard it blows, and might think that the fact it doesn't display right is an example of my incompetence rather than Microsoft's.
posted by booknerd at 1:36 PM on December 1, 2010
posted by booknerd at 1:36 PM on December 1, 2010
Please validate your HTML and correct errors. It's quite hard sorting out how your html works in the various quirks modes.
posted by I_pity_the_fool at 1:40 PM on December 1, 2010
posted by I_pity_the_fool at 1:40 PM on December 1, 2010
Speaking as someone with web development experience, your layout is problematic in Firefox as well, although yes the layout in IE is much more problematic. One thing it doesn't seem you have considered is that in your non-fixed width layout is that many people (myself included) have widescreen monitors and high resolutions that make your design stretch way out and less appealing than the fixed width of the current design.
To answer your question though, I would google css for a generic three column layout (they have non fixed-width) versions of these and then tweaking that rather than floating your different elements on their own.
posted by Kimberly at 1:42 PM on December 1, 2010
To answer your question though, I would google css for a generic three column layout (they have non fixed-width) versions of these and then tweaking that rather than floating your different elements on their own.
posted by Kimberly at 1:42 PM on December 1, 2010
Response by poster: One thing that's always irritated me about fixed width designs is the wasted space on my wide-screen, high-resolution monitors. I have to scroll down forever because there are inches on the side that are just given over to blank wrappers. I'm not really concerned about the layout of the index page, because most of our content won't be in three columns and is pretty text-heavy. I'd just like to eliminate the huge gaps that show up in IE, if it's an easy fix.
posted by booknerd at 1:48 PM on December 1, 2010
posted by booknerd at 1:48 PM on December 1, 2010
I found Position is Everything fantastic for identifying and offering workarounds for IE bugs.
posted by Paragon at 1:50 PM on December 1, 2010
posted by Paragon at 1:50 PM on December 1, 2010
Best answer: This isn't so much something to help you this time, but rather something for next time: don't build a whole web page, then test it in different browsers as an afterthought. Test it in every major browser regularly as you go along, and make sure the page validates after every change. You'll halve the time you spend fixing things. When you leave testing until the end you're risking having to start again from scratch to fix all the incompatibilities.
And if you're going to go with a variable-width column in your layout, it's a good idea to specify a maximum width in the CSS to stop it looking crazy on a very wide screen.
posted by le morte de bea arthur at 1:50 PM on December 1, 2010 [5 favorites]
And if you're going to go with a variable-width column in your layout, it's a good idea to specify a maximum width in the CSS to stop it looking crazy on a very wide screen.
posted by le morte de bea arthur at 1:50 PM on December 1, 2010 [5 favorites]
You need to specify a width on your #navbar. Max and min width properties won't fly in some versions of IE, so make it fixed. The rest of your content can stay liquid.
posted by Avenger50 at 2:06 PM on December 1, 2010
posted by Avenger50 at 2:06 PM on December 1, 2010
Best answer: Your new design is nicer. Your new layout is not.
Here's a three column layout you can use :)
posted by DarlingBri at 2:12 PM on December 1, 2010 [1 favorite]
Here's a three column layout you can use :)
posted by DarlingBri at 2:12 PM on December 1, 2010 [1 favorite]
Response by poster: My screen at work is 1600 x 900. Several of my co-workers have their monitor resolution set to 800 x 600. I can't wrap my head around a fixed-width layout that works equally well for both of these (like Metafilter does, for example).
posted by booknerd at 2:20 PM on December 1, 2010
posted by booknerd at 2:20 PM on December 1, 2010
Are you sure it's working OK in Chrome? This is what it looks like to me (1280 x 960). The amount and staggeredness of the white space looks odd to me.
posted by desjardins at 2:51 PM on December 1, 2010
posted by desjardins at 2:51 PM on December 1, 2010
Response by poster: ...yeah, that's what it looks like for me too, but not nearly as bad as what it looks like in IE, and the other pages on the site look fine, IMO. The weird placement of that box below and to the right was an explicit request from a higher-up, as was the small size of the photo, but I'll probably try to put in a wider image later.
posted by booknerd at 3:01 PM on December 1, 2010
posted by booknerd at 3:01 PM on December 1, 2010
1. Your markup should be valid
2. Use conditional comments to serve different css rules for specific IE versions.
These kind of problems are very specific, there's not a catch-all solution. As Paragon suggested, Position is Everything documents many bugs. Many layout problems in IE can be fixed by giving an element "layout".
And yes, specify a max-width and min-width for your wrapper, so the page does not stretch to infinity and the columns don't drop when the browser is too narrow.
posted by clearlydemon at 3:35 PM on December 1, 2010
2. Use conditional comments to serve different css rules for specific IE versions.
These kind of problems are very specific, there's not a catch-all solution. As Paragon suggested, Position is Everything documents many bugs. Many layout problems in IE can be fixed by giving an element "layout".
And yes, specify a max-width and min-width for your wrapper, so the page does not stretch to infinity and the columns don't drop when the browser is too narrow.
posted by clearlydemon at 3:35 PM on December 1, 2010
Yahoo Grids CSS are easy to use.
http://developer.yahoo.com/yui/grids
YUI 2: Grids CSS
"The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations."
posted by laptop_lizard at 4:10 PM on December 1, 2010
http://developer.yahoo.com/yui/grids
YUI 2: Grids CSS
"The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations."
posted by laptop_lizard at 4:10 PM on December 1, 2010
It also depends on what IE you want to make it work with. Making it work in IE9 should be easy and should automatically happen if you're doing it right (tip: just because it looks good in Firefox and Chrome doesn't mean you're doing it right, just that you're not doing it wrong in a way thats noticeable there).
Making it work in IE6 is a hellish nightmare that is best avoided unless absolutely necessarily.
IE7 and IE8 are at various points between those two.
posted by wildcrdj at 5:15 PM on December 1, 2010
Making it work in IE6 is a hellish nightmare that is best avoided unless absolutely necessarily.
IE7 and IE8 are at various points between those two.
posted by wildcrdj at 5:15 PM on December 1, 2010
Thank you for embracing the elastic way! I commend your variable-width layout philosophy. Hail and welcome, my brother.
You might find that the max-width CSS attribute will serve you well - whitespace can actually help the eye, and super-long lines of text are a bit wearying to many people.
You probably know this, but just in case you don't: your images will look a lot better once you have them stored at the same dimensions in which they are displayed. Sorry if you're already planning to do this.
Now: to debug something like this, I usually start by making borders visible for the major layout areas, then simplifying (by removing content or elements) bit by bit until the layout looks as I'd expect in both the originally-working browser and the problem browser (usually IE). Alternately, start with a super simple layout -- maybe three "boxes" -- that works everywhere, and gradually add everything back in, testing in both / all browsers as I go.
However, I have to add: I don't think it's awful to use a table for big layout structures, and when I do use tables, I think I run into significantly fewer problems like this. Given your stated reason for changing to an elastic layout, this may not work for you, but I wanted to mention it as an option.
posted by amtho at 8:19 PM on December 1, 2010
You might find that the max-width CSS attribute will serve you well - whitespace can actually help the eye, and super-long lines of text are a bit wearying to many people.
You probably know this, but just in case you don't: your images will look a lot better once you have them stored at the same dimensions in which they are displayed. Sorry if you're already planning to do this.
Now: to debug something like this, I usually start by making borders visible for the major layout areas, then simplifying (by removing content or elements) bit by bit until the layout looks as I'd expect in both the originally-working browser and the problem browser (usually IE). Alternately, start with a super simple layout -- maybe three "boxes" -- that works everywhere, and gradually add everything back in, testing in both / all browsers as I go.
However, I have to add: I don't think it's awful to use a table for big layout structures, and when I do use tables, I think I run into significantly fewer problems like this. Given your stated reason for changing to an elastic layout, this may not work for you, but I wanted to mention it as an option.
posted by amtho at 8:19 PM on December 1, 2010
Best answer: wildcrdj has a valid point. We no longer bother with IE6 - too few users to make it worthwhile. IE9 and to some extent IE8 are easy. Your site looks much worse on IE7 than on IE8. You should look at your log files and see which IE browsers (or which browsers and widthds ) people use. Below a minimum # of visitors, don't worry about them. (My site has a few people using Lynx! I kid you not.)
amtho is right in that if you have borders visible for layout areas, it is easier to troubleshoot. and definitely use one of the many grids for css layout. They've done much of the dirty work for you.
clearlydemonis right in that maxwith-minwidth and conditional comments will help you. Conditional comments will work, and you will probably have to separate some styles in an .ie only stylesheet. Just document which styles have an ie equiv on the "generic" stylesheet so if something changes, you'll remember to change it there. Note that you'll have to have a couple of .ie only stylesheets. example below
/* #something has different attributes in ie6.css and ie7.css */
#something
{
some stylesheet info;
some stylesheet info; /* diff in ie6.css */
}
This is a great link on how to use them,
posted by xetere at 7:38 AM on December 2, 2010
amtho is right in that if you have borders visible for layout areas, it is easier to troubleshoot. and definitely use one of the many grids for css layout. They've done much of the dirty work for you.
clearlydemonis right in that maxwith-minwidth and conditional comments will help you. Conditional comments will work, and you will probably have to separate some styles in an .ie only stylesheet. Just document which styles have an ie equiv on the "generic" stylesheet so if something changes, you'll remember to change it there. Note that you'll have to have a couple of .ie only stylesheets. example below
/* #something has different attributes in ie6.css and ie7.css */
#something
{
some stylesheet info;
some stylesheet info; /* diff in ie6.css */
}
This is a great link on how to use them,
posted by xetere at 7:38 AM on December 2, 2010
I'd recommend changing background colors instead of making the borders visible, because the width of the borders could throw off the design.
Use a CSS reset to compensate for differences in how the browsers render HTML. Test in Firefox or Safari, then use conditional comments for IE-specific fixes.
Maximum and Minimum Height and Width in Internet Explorer
posted by kirkaracha at 7:40 AM on December 2, 2010
Use a CSS reset to compensate for differences in how the browsers render HTML. Test in Firefox or Safari, then use conditional comments for IE-specific fixes.
Maximum and Minimum Height and Width in Internet Explorer
posted by kirkaracha at 7:40 AM on December 2, 2010
Response by poster: Good lord. 30% of our traffic is from IE, and a full half of that is IE7.
In happier news, I realized that a previous version of this redesign that I made seems to work just fine in IE, so I can use that for a jumping off point to debug. Thanks for the suggestions so far!
posted by booknerd at 6:54 AM on December 3, 2010
In happier news, I realized that a previous version of this redesign that I made seems to work just fine in IE, so I can use that for a jumping off point to debug. Thanks for the suggestions so far!
posted by booknerd at 6:54 AM on December 3, 2010
Response by poster: Final update: It works! I ended up just reworking the whole thing into a Dreamweaver-supplied three-column liquid template, then eliminating the third column for all the pages except the front page. Thanks for all the helpful responses. You'll be happy to know my code is mostly validating now, too.
posted by booknerd at 11:03 AM on December 3, 2010
posted by booknerd at 11:03 AM on December 3, 2010
This thread is closed to new comments.
posted by Electrius at 1:34 PM on December 1, 2010