I’ve been away for a few days, hence the lack of posts on here.
At the moment I’m a bit stumped. As with all web-designers, there is a problem with trying to get everything to work the same way on every browser. Currently I’m having problems with Mozilla.
The problem is that some people are seeing the side banners appearing over the top of the animations when they are viewing the web on a low-resolution screen. Statistically you’re probably reading this blog entry using Firefox or Internet Explorer (IE) and so if you were to look at one of my animations using a small browser window you’ll see the side banner sticking out from underneath the right-hand side of the animation. Obviously I don’t want the animations to have adverts on top of them, so I have used a system called CSS to define a z-index value for the animation and animation sections of the page.
The z-index is like 3D co-ordinates. On a graph you start from 0,0 on the X and Y axis, then the values change depending on where you move in relation to this, up or down, left or right. If you bring in the third dimension to your graph then that is referred to as the Z axis, and that is what you can set using a system called CSS.
CSS is simply a method of defining how various things look on a website. It’s a bit complicated to get your head around and less intuitive than simply drawing out a table, but it does allow you to do fancy things like layering when you need it. It’s very handy for making swift changes to the look of your whole website with only one file. Nice stuff.
My problem is this: the Mozilla browser doesn’t render the z-index the same way as the two main browsers, Firefox (hooray!) and IE (boo hiss!). Instead of the adverts nicely slipping away behind the animations on low-resolution screens they end up on top of them. That’s a bit annoying isn’t it?
Well, it’s not the end of the world: only .9% of my visitors use Mozilla, but if Mozilla is being grumpy then it’s possible that the other 5% of people using non-standard browsers are also having problems. I’ve looked around on the web, but can’t find a simple answer to this issue. Does anyone know a method of defining z-index values in CSS that is compliant with Firefox, IE, and Mozilla?
I’ve been having similar problems with Opera refusing to recognise CSS positioning for a background image – as far as I can see, my only options are to extend the image up and left in the same colour as the background (which will mean it’s compatible with ~everything~ but not as elegant) or just coming up with a design that’s ~accpetable~ in Opera and good in everything else, and just waiting for the browser to get its act together CSS wise.
I’ve not played with the CSS layering effect enough in CSS to know if there’s any way to pull it off in all browsers – if not I guess I’d make main priority W3C compliance, and then if there’s stylistic designs that one browser waon;t support, just work towards making it the bare minimum of “not shitty” on that one and good on the others – there’s a certain point where you have to say “there’s a css standard emerging, and it’s up to the browsers to make sure they work to it, not me…”
From Kris (my guru of all things web):
ok first things first… forget Z-Index it sucks like a nuclear vacuum cleaner. Tis the worst thing about CSS ever devised… what you should do is put a spacer gif (i.e. a 1×1 transparent gif) before the ad, set to a width which will push the ad beyond going under the anim in the first place as it looks bad even if ya got the ad under the anim…
Euw. Spacer gifs… I’ve used them in the past. I thought the point of CSS was to get rid of that kind of rubbish. I’ll ponder that as an option, but I’d rather find another way.
Thanks for checking Lilith!
Urgh, I just looked at your code and it’s all laid out with tables, which may go some way towards your problem. If you lay everything out using CSS Positioning things tend to go a little better. There a plenty of tutorials around if you search for them in google, or, if you’d like, I could knock you up something simple next week (I’ll have finished my exams, so really won’t have anything better to do).
I use tables for the menus on pages, but the animation pages are all in CSS.
There are actually a couple of tables on them, but those are only the Amazon search boxes, the rest of the page layout is all done with CSS.
I think it’s just one of those problems with the rendering of levels in a particular browser. Funnily enough, most people have been suggesting that I do the layout using tables to make it more structured!
For the majority of browsers the CSS works perfectly, I can only assume that Mozilla renders the z-levels in the opposite order, meaning that things that should be on the bottom (advertising) is now rendered on top. Grr.
Oh, sorry, I looked in a hurry. Never a good idea.