Hopefully this is the right forum, and that it’s OK to ask such things, but I’ve been pulling my hair out over this one (and since it involves IE’s refusal to be compliant in HTML or CSS or anything, it’s an occupational hazard with web designers).
This concerns my national anthems site I’ve referenced here before (the site is http://www.nationalanthems.info, but I’d rather have you look at http://www.nationalanthems.info/test as I’m slowly implementing an upgrade on some features there and I might as well fix the problem there and not worry about the main site for now, they have pretty much the same code where this problem is concerned anyways) - the site appears perfectly fine in FF, Chrome, Safari, etc. (because those browsers display things the way they’re SUPPOSED to, of course!) But, for some reason, the grey bar on the left in IE doesn’t go all the way to the bottom, and I cna’t figure out a way to get it to do so (and not have it bleed a little over on the right, basically I want 250px on the left grey and the rest white, like how it displays in FF etc.) I’ve made a separate css file to fix IE “quirks”/“bugs” (as I’ve been taught to do) so the fix should probalby go in there, but I don’t even know what to put there.
BTW, this only affects things like the main page, the FAQ, etc. The pages for the individual anthems you don’t have to worry about because they display fine in IE and FF.
Need help? (not “fast”, the upgrade project I anticipate will take months)
Height is a tricky thing. I’m a professional web designer (but not a CSS guru) and it always trips me up. If it were me, I would make an image that is 1px high and 500px wide, filled with 250px of gray on the left and 250px of white on the right, and make that the background image for my site. Set the body background to have “background-repeat: repeat-y;” (which will make it only repeat top-to-bottom and not side-to-side, as backgrounds tile by default).
In my experience, background image is the only way to guarantee filling a page, height-wise, without forcing a sized object.
But your custom title says “Has Disposable Income” - one of those statements is wrong.
I thought about that, (I’d also have to make the bgcolor white as well I suppose, to account for the screen width past 500 px (but really, why bother? Whose default screen colour isn’t white?) I don’t know why it isn’t there, I’m thinking mayhaps I tried it once and didn’t work (I know I experimented with the colors that are there, by for example, setting bgcolor to “red” to see if the red would go just on the left side, or fill the white on the left and right side, for example, but the red didn’t even show up at all!) I’ll try that bg image again when I’m home and see what happens.
There’s still some quirkiness in IE. When you expand the letters on the left, the text starting with “You can get started” shifts over. It actually looks like the expanded version is correct, while the collapsed version is off by a few pixels.
Also, I assume it’s a side-effect of Zipper’s fix that, in the IE version, the navigation column is not static like it is on Firefox, and that the whole document gets a scroll bar when you expand, instead of just the column.
Actually, if you look closely, it starts with the middle of the third paragraph (at least in my screen display) not the beginning of the fourth. It’s whatever line lines up with the bottom of the Twitter logo, that’s where the column and the grey cut out before. I’m thinking maybe if I make the nav column 249px in IE it may fix it, but it’s not a serious thing.
No, the navigation column has never been static (Zipper’s fix hasn’t been applied to the “real” home page at http://www.nationalanthems.info so you can see there, I just put it on the “test”, which is where I’ve been working with some new features and will replace the existing site when it’s done.), I assumed that was a quirk of IE and just figured that I could easily sacrifice a non-static nav bar.
Now, if IE displayed HTML and CSS properly we wouldn’t have this conversation (is it so hard to do, Micro$oft? Every other browser does it … )
