There are few things more frustrating while developing a website than getting the formatting to be cross-browser compatible.
Inevitably, IE is the one browser that flat-out refuses to do what is intuitive with regards to CSS, while other browsers don’t seem to have a problem with it.
After fighting for two days with a particular layout in IE, I gave up and started from scratch with something that I know works; I’ve used it on other sites. But, of course, it doesn’t!
Basically, if you look here with IE 7, you see a layout with a graphic in the header, which seems to be well-aligned. Until, of course, you try re-sizing the window; it seems that at about every other pixel width of my window, the alignment goes off by one, and then back to being correct, and then off by one, and then correct. IE is apparently aligning it differently depending on the size of the fucking window!!! Why? Does it have a problem with even numbered image sizes and odd numbered window sizes? Honestly I bet that’s it, but I don’t even have the energy anymore to work on this tonight. Because of course the other site I’ve used the exact same alignment for didn’t demonstrate this quirkiness.
No matter where I turn with IE I have to fight with it to get it to behave normally. WTF?
Use a standards-compliant web browser to build a site. Never use IE the first time around. Once you have a standards-compliant design working in a standards-compliant web browser, it’s relatively easy to add in the IE band-aid code.
Never use a user-dependency script to manage your site design, in this case JavaScript. Otherwise, you risk the site falling into a heap of crap if the user decides to disable JavaScript. Or worse, the browser will lock up and die because something happened during downloading from the server and the JavaScript failed.
Maybe Microsoft needs to get their fucking act together. Maybe web developers need to stop making their sites work with IE, then more people would use Firefox, or another standards-compliant browser.
I had, and I didn’t. Unfortunately I was working at the limit of my ability complication-wise, and I could not for the life of me figure out why it wasn’t working in IE; hence the starting from scratch, to try to make sure it’s working in IE from the get-go. The original design (well, no, the original was way cool, but not backwards-compatible with IE 6.0, so that had to go . . . so this is design #2) here is problematic in that in IE the background graphic (grey and white to match the two columns) is moving around when the window gets resized and is only lined up accurately when the window size matches my main <div> size. I’m not sure why everything else manages to stay where I want it except for the background image.
Point taken, though in this case the JavaScript is for something that isn’t implemented yet, and may not be (I’ve now removed it; still the same page).
Am I a bad person for never getting sick of this one?
Ack, you have my sympathies. Quick question though: why are you using a tiled grey/white image for the background color? I think most of your problem is that you’re trying to match up a background image in the body element with divs floating on top of it. Why not use the background properties of the divs whose background it actually is? I see you’ve got the grey background-color set for the left sidebar anyway - wouldn’t adding a white background for the main segment solve your problem without all of these alignment issues?
Also, what was the incompatibility with IE6? Was it a 100% height issue? There’s a way to work around that, if so:
Aha! Figured it out. You’re having trouble because of your DOCTYPE declaration, which is putting IE in its old quirks mode. IE has a famous bug with CSS’s box model, which is precisely what you’re seeing here. IE7 has fixed this, but you have to tell it that you want proper HTML rendering, using your DOCTYPE. If I do the following:
[ol][li]Remove the tiled background image from the body css,[/li][li]Set the div #master background-color attribute to #fff, and[/li][li]Replace the DOCTYPE declaration at the top of your code with the following…[/ol][/li]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
…it works for me. I see a nice grey left sidebar, a white main content div, and no alignment issues.
In IE7, the bug was forcing your #master div to be wider than the 950px you’d specified - you’ll see this if you give it a background-color attribute before doing the other steps above. This was causing your central content bit to center itself skewed slightly to the left, which in turn was causing your properly-centered background image in the body element to be misaligned. I still very much recommend abandoning the background image in the body element, though, because there’s other weird behaviour you’ll come across with that technique which you won’t be able to fix (for instance users resizing their windows to less than 950px will find their menu bar background disappearing, and that’ll be exactly the behaviour you’d specified).
Gah; triple post to say I appear to have “fixed” your older design, wally that I am. D’oh. Well, hopefully with the min-height fix and the modified doctype, it’ll work in IE6 now too.
Thanks, Dead Badger. Changing to strict messes with my menu, but just making the other changes and removing the <!DOCTYPE> declaration seems to solve the problem. The other problem I’ve got, though, is that the gray column doesn’t stretch gray all the way to the bottom of the page; only until the content (and hence the <div>) run out. But, this is not an IE issue, it’s a ‘formatting for the web’ issue, and I can’t blame that one one Gates & Co.
No, I lied, now it almost works, but the white background is being pushed out to the right (only in IE) for some reason or other. sigh
Alright, this has nothing to do with your rant, but I’m seeing red and black text on a blue background. Please tell me that it’s rendering improperly (in Firefox, BTW) because it is hell to look at.
It was white before - I think Eonwe is just messing around with the colours so he knows what’s been changed.
That’ll be the IE box model bug I mentioned earlier. If you have no doctype declaration (or a transitional one) IE will revert to quirks mode, which contains the bug (whereby IE completely misinterprets the width of elements). The strict declaration was what fixed the problem you’re describing for me in IE (I didn’t notice it knackered the menu). This article has some detail on proper doctypes.
Hard to know what to suggest if your menus don’t render with the strict declaration - the IE quirks bug makes CSS handling so different from the other major browsers that if you have to run it in quirks mode, I think you’re going to have to serve different stylesheets by detecting the client browser. Not fun either way.
As for the 100% sidebar question, yeah, that’s a bastard to achieve if the containing element has dynamic sizing as yours does. I suppose the easiest way to have the shading all the way down the left-hand side would be to revert to the background-image solution you had before, but instead of having it as a property of the body element, have it as the background of div#master; that way it won’t retreat off the left-hand side of the screen when people have windows narrower than 950px, and you won’t have those resizing/alignment issues.
Anyway, best of luck; I’m going back to teaching myself Erlang.
Sure, as long as you volunteer to tell our clients that 81% (cite) of their customers will not be able to properly view their web site.
Seriously, it would be lovely to drop visual IE support (as in, functionally support it still, but if that header is too far to the left? Suck a nut), but we just can’t do it. My company currently supports IE6, IE7, Firefox and Safari.
Also, when in doubt, add hasLayout. Hell if I can figure out what it fixes half the time though.
In related news, IE8 Beta is now available for download. They are advertising CSS 2.1 compliance as a feature of the browser, although some are pointing out that MS is being rather disingenuous in its whole publicity strategy, and have noted that the new mode-switching approach of IE8 simply perpetuates some of the problems that MS has caused with its refusal to adhere to standards.
Anyway, i downloaded and installed IE8 (i’m using it for this post), and even if they get it to a stage where it has all the standards right, i still won’t be switching back. It’s still not as good a browser, IMO, as Firefox or Opera, and when Firefox 3 is released it will still be considerably ahead of IE in important features and usability, i think. I’m running Firefox 3 Beta3 right now, and although there are still a few bugs, and most extensions don’t yet work, it’s a great browser.
I think this graphic sums up plenty of web designers’ feelings.
The important point here is that it’s a BETA version. There may be many, many changes to it before the full release is issued. And despite Micro$oft’s claim it will be standards compliant, many BETA testers are already reporting this browser is a negative mixed bag – the company fixed some things but created additional problems.
Still, if you are designing/building web sites, never use a BETA browser to test a web site.
You know what pisses me off? I went looking on Apple’s site to download Safari 2 and they don’t have a download link for it - they force Safari 3 Beta on you.
Thanks for the link, but this was a month or two ago and on a work computer I later figured out was such an early version of OS X that it couldn’t get more than Safari 1 anyway. I usually work on Windows machines, hell was I supposed to know that apparently not all OS X software is compatible with all OS X versions? But that’s a whole other rant.
