IE - the OS can make a major difference

padding, scrollbar, float

[tedster]

I feel like I just had a slap in the face. I worked very hard on a template, html 4.01 strict, standards mode, validated. I checked page rendering in all the browsers I had on hand (including IE5.5, IE6 and IE5 mac) - and it all looked good.

Then I had my partner look at the work on his computer. I'm on win98se and he's on xp. What I didn't expect is what we saw:

1. Significant differences in padding
2. Significant differences in when a vertical scrollbar appears
3. On xp, the spot where a floated image is inserted in the html was rendered as an extra space at the beginning of a paragraph.

There will be more, I have no doubt. Now this particular template is a hybrid - the basic layout is tables and all the internal touches are css. That fact might play into what we uncovered.

But I never knew that the OS could make such a difference for the same browser. And I'm not happy about it.

[Hester]

When you say you tried it on another computer, did you send the file by email? Outlook Express has an annoying habit of adding a line at the top of the file which forces IE into Quirks Mode. (Anything will so long as the doctype is not on the first line.) That might be a cause.

[tedster]

No - I FTP'd all the files to the server and three of us looked at the pages online and on a conference call. Then they sent me screen captures.

Funny thing here was the AOL 9 on XP had it "right", and the stand-alone IE 6 had the problems. If there we going to be any differences, I had expected AOL would be the culprit. I'm going to visit in person next week and take a close look at all my partner's IE settings while I'm there.

But in the mean time, I intend to acieve certain effects without css - for instance, I'm back to adding the padding around images IN the image itself. It's a littl larger file, but it's a surer thing.

[isitreal]

Tedster, depressing, but a familiar story when it comes to CSS stuff, learned that a few years ago re Opera, Opera 6 Mac was about the level of Opera 5 Windows, not the same browser at all. I'm suffering a similar thing with IE 5x mac, which I don't have access to for debugging except through an email Mac friend, it's decided to add a huge margin to my content area starting BELOW the header tag in the content div, pushing the content text under the rightside div bar, which is one of the more amazing bugs I've come across.

A code sample would help. I've found that with advanced CSS useage being very conservative helps, for example I tend to use a lot of sub-container divs rather than trust padding/margins on the primary container div, this seems to help a lot, and also helps avoid the whole box model problem, though leads to nested div bloat, but it's worth it to me because the results are more reliable cross browser/os.

One thing that doesn't surprise me is the inconsistent vertical scroll bar, since that is a function of how the OS is handling the window creation, that of course varies widely from windows 9x to NT 5x since they are totally different OS's.

I especially tend to avoid putting margins on images, preferring to add padding to a container div, I've had good luck getting solid cross browser stability in terms of display with that. Have to admit I haven't used windows 98 since 2000 came out, and my test win98 runs IE 4, that's my 'legacy' testing platform, so I want to leave it as that, do have another 98se with ie 5 but never use it, maybe I should though from the sound of it.

Sometimes a linebreak in the code between tags can create that extra space in IE, hard to say without seeing the code.

I've come to treat all CSS development as a 100% empirical excercise, since it involves not so much standards per se as programming group's implementations of those standards, while I can usually get the results I expect in gecko, everything else is just a process of finding what works, then implementing the fixes.

[tedster]

Well, we've fixed every discrepancy we saw, one way or another. To heck with padding and margins on images - we just added the extra "territory" to the image itself, either as a transparency or a color match.

The extra space in the text where the floated img was inserted just plain vanished after we decided to flip the template and use a right hand menu. I also did some user testing today and no one had a problem with the right hand menu. I haven't used that approach in about a year, but it really works visually on this site.

I also thought the same about the vertical scrollbars as you did, isitreal, and I was ready to do something very kludgey to get it to work. But when I eliminated padding and margins on the img tag, the vertical scrollbar became consistent across Win98, Win2K and WinXP.

It seems like a copout somehow, but it is apparently a rock solid approach and using margins/padding is not. A single color compresses very well whether gif, ong or jpg. The extra image dimensions didn't add even 1 kb to the total page weight, either, which is a trim 31kb at present including css and js files.

That's the beauty of css. Even though I did use a hybrid approach, I can still keep my membership in the bandwidth preservation society. And it all validates to a strict DTD.

Testing across various Windows OS is not something I've done a lot of in the past, but it looks like I will going forward.

[isitreal]

Images are problematic, seems unreliable, your fix sound solid, gets the job done which is the point on a commercial job (if it was one of my css development sites I'd spaz over it until I got it stable, but I'm not going to bill a client or delay a project for something like that).

Another issue I've found in IE 6, margin related, is that when I have a menu in the left bar, menu items contained in a div, spacing between top of left nav column and leftnav div created with margin-top, with a:hover background color changing on nav links, the whole menu div jumps up on mouseover, only IE 6, not IE 5.x, replace top margin on left nav div with padding-top and jump behavior vanishes, CSS is like that.

I used to cross windows os testing, but have let it slide, might have to rethink that based on what you saw.

Margins are definitely an issue, floats too, these I assume are far more complex behaviors than we think in terms of programming, makes sense, since margins override eachother, very dynamic in terms of page rendering, browser has to make a lot of choices. Margins, borders were the killer generally when I was doing netscape 4x support, that's a good indication of what was hardest to implement.