How to change my webpage so as to get Explorer to not shuffle my columns.

February 21, 2006 7:39 AM

Okay, so I used Nvu to put together my first web page. Now it seems that IE 6 scrambles it.

I had been regularly previewing my product with Netscape and Firefox and it looked fine. The style sheet that I based my page on has a column (I'm a little unclear on the semantics, but the equivalent of frames, although frames may be the Explorer term). I've tried to rundown the problem at Nvu user forums and it looks like "Internet Explorer simply doesn't support the 'fixed' positioning type," or otherwise put, IE doesn't support CSS2 protocols, or even all of CSS1 protocols.

So, am I screwed? I'm tempted to post the page as is (and this is about 20 linked pages of material) and tell people to grow up and get Firefox. Is there an easy fix? Or do I have to abandon my style sheet and redo the whole set of pages?

The page is informational in type, not my business life depends on it sort of thing.

posted by dances_with_sneetches to Computers & Internet (12 answers total)

Welcome to IE.
IE has never played well with CSS, I'm afraid. The answer to your question lies in where your loyalties sit. Post your website in the manner that you designed it and let users of modern browsers enjoy it correctly, or let IE dictate to you how you should design your site...ugly hacks and all?
Personally, I'd tell IE to stuff it. It's not like CSS was invented last night, y'know.
posted by Thorzdad at 7:46 AM on February 21, 2006

IE hasn't been updated in several years, and won't be until Vista ships. In fact, Microsoft actually stopped development for a while.

Also, unless you're using Netscape 4, there's really no reason to preview in Netscape and firefox since they use the same rendering engine. You might add Safari or Opera to your development and testing platforms, along with IE.
posted by delmoi at 8:14 AM on February 21, 2006

IE7 is shipping soon (there's a public beta preview and it will support fixed positioning.

So arguably, publishing as it is will be fine as companies and people will upgrade their browsers (or the people on win XP,as IE7 won't work on older Windows).

Here's a hack that you can feed to IE6 with conditional comments to simulate fixed positioning.
posted by Pericles at 8:23 AM on February 21, 2006

Response by poster: Okay, I'm obviously in over my head, but I don't get the meaning of Pericles link.

Let's say I just want have a message that says "Use Netscape or Mozilla." Can I get that to appear conditionally only to Microsoft users?

And thanks for the advice.
posted by dances_with_sneetches at 9:31 AM on February 21, 2006

>Can I get that to appear conditionally only to Microsoft users?

Can you make a browser message conditional to a browser? Yes, you can. Should you wish to invest the effort, you can detect almost any browser version existent and tailor a page directly to that browser version, and only that browser version.

Before you do, though, I would urge you to take a few deep breaths and reconsider. Do you really want your inaugural website representing you, the esteemed and soon to be world-renowned, dances_with_sneetches, to be a spite page for people who use a browser which doesn't behave in exactly the manner you would like? It says nothing positive to drive away most traffic to your site. IE still represents a large majority of traffic on the web, both for voluntary all-grown-up users and for those locked-in by corporate policies. And, people often remember such slights for a long time; think of all the energy spent just in MetaFilter posts from users complaining because an IE-only site doesn't properly support their (minority) browser choice.

Unless you relish the idea of joining the self-appointed web police over what really is a trivial issue, supporting the widest range of users with only a small investment of time is the right way to go. If it helps you to think of this way, consider IE support another form of handicapped accessibility.

There are a number of people here who would be more than willing to tell you how to integrate the fixed position patch into your style sheet/web pages, including me. Post what you need to know and we'll help. You have a resource here which could make this small effort a quickly forgotten bump in the road. I urge you to use it.
posted by mdevore at 10:40 AM on February 21, 2006

Before you hack anything, work your hardest to make sure that you have valid (X)HTML and CSS. A combination of valid code and smart design really helps avoid the necessity of hacks and such.
posted by charmston at 10:56 AM on February 21, 2006

Response by poster: mdevore -
sorry for my snarkiness, but sometimes it seems like Microsoft is out to get me.

I'll sit down tonight when I have time and try to figure out how to solve this. Nvu is WYSIWYG, so all I had to do was download a style sheet and then tediously replace my pieces, pictures, paragraphs and headers. Still it seemed like a long time. I'm obviously new to this and had the initial enthusiasm that I can do it.

Thanks for the answers, everyone.
posted by dances_with_sneetches at 12:06 PM on February 21, 2006

Response by poster: Okay, I'll take up mdevore on his offer for someone to help guide me. What does this post (via Pericles) mean to someone who is not that experienced with html?

1. First, put IE6 into "standards mode" by using a strict DOCTYPE. Note that IE6's standards mode is known for its extremely odd quirks. We are taking advantage of one now.
2. Use IE conditional comments to style the HTML and BODY tags like so:

html, body {
height: 100%; overflow: auto;
}

3. Style anything you want to stay fixed as position:absolute.
posted by dances_with_sneetches at 5:24 PM on February 21, 2006

Best answer: The page probably makes more sense to the neophyte if you view source on it to see how it's really working. The actual explanation is minimal.

1. First, put IE6 into "standards mode" by using a strict DOCTYPE

There's a fairly concise discussion of what is meant by DOCTYPE here. For your purposes, this means that you put the line: [!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"] at the top of your HTML code, where the square brackets are replaced by standard angle brackets for HTML elements.

The question might arise why I specified a transitional DOCTYPE when the example instructions specified strict. The answer is: in the referenced example page, it used transitional instead of strict DOCTYPE and I'm more interested in what they actually used to work with IE, rather than matching up with what they said.

2. Use IE conditional comments to style the HTML and BODY tags like so

IE supports conditional comments. The example would have been better listing the full range of lines, shown here (again with square brackets):

[!--[if lte IE 6]]
[style type="text/css"]
html, body
{
height: 100%;
overflow: auto;
}
div.fixed {
position: absolute;
}
[/style]
[![endif]--]

These lines are comments to other browsers which do not understand IE's conditional comments, but are meaningful to IE, setting a style for it.

>3. Style anything you want to stay fixed as position:absolute

FOr example, a DIV of class="fixed" should work with any browser to position: fixed a particular element of the page. The original style on the example page declared a style of:

div.fixed {
position: fixed;
border: solid 1px silver;
background-color: whitesmoke;
width: 150px;
height: 200px;
left: 5px;
top: 60px;
padding: 5px;
}

and the IE conditional code from point 2 came after that, overriding the original definition of div.fixed for IE only to a mechanism which IE understands.

Let me know if that didn't make sense. It's a bit convoluted, but should be easier to follow if you view source on the original page linked by Pericles while you read along.
posted by mdevore at 6:27 PM on February 21, 2006

Response by poster: It's a later time zone here, so I'll probably have to try this out tomorrow. Thanks again.
posted by dances_with_sneetches at 7:01 PM on February 21, 2006

Response by poster: Okay. I opened my document in Nvu. I saved it under a new name to get back to the original if necessary. I went to the source code page. I cut and paste the doctype line into my first line, eliminating the previous line. (The original line was:

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]

I saved this change. The code immediately reverted to the original line. (Yes, I put in angle brackets).

I also tried pasting in the conditional statement and it disappeared.

This sounds like something weird and Nvu related. I went to the preferences. Markup is HTML 4, DTD is transitional. "When Saving or Publishing pages." has the options "Retain Original Source Formatting" and "Reformat HTML source." I've moved between the two of these and couldn't get the outcome to change.
posted by dances_with_sneetches at 7:58 AM on February 22, 2006

Hmm, I have used Nvu on occasion and while it can be buggy and will occasionally eat a line (not to mention constantly reformat the source lines to its own preferences), I've never had it wholesale strip out lines entered from the source code view. Perhaps I'll have a chance to play with it later today and see whether it does the same for me.

Can you try directly entering the text through a editor, and then loading a browser with the revised html code page to check operations. Several text editors allow you to directly launch a browser on a text files contents, I used Crimson Editor to do this.

Or alternative #2, this set of changes is pretty small potatos for an insertion. Do you have/can you make the actual page(s) available and I'll just stick in the revision and send it back.
posted by mdevore at 9:49 AM on February 22, 2006