{"id":61,"date":"2005-06-22T13:53:18","date_gmt":"2005-06-22T12:53:18","guid":{"rendered":"http:\/\/www.matazone.co.uk\/blog\/?p=61"},"modified":"2005-06-22T13:53:18","modified_gmt":"2005-06-22T12:53:18","slug":"mozilla-and-z-index-in-css-help","status":"publish","type":"post","link":"https:\/\/www.matazone.co.uk\/blog\/?p=61","title":{"rendered":"Mozilla and z-index in CSS &#8211; help!"},"content":{"rendered":"<p>I&#8217;ve been away for a few days, hence the lack of posts on here. <\/p>\n<p>At the moment I&#8217;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&#8217;m having problems with Mozilla. <\/p>\n<p>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&#8217;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&#8217;ll see the side banner sticking out from underneath the right-hand side of the animation. Obviously I don&#8217;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.<\/p>\n<p>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.<\/p>\n<p>CSS is simply a method of defining how various things look on a website. It&#8217;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&#8217;s very handy for making swift changes to the look of your whole website with only one file. Nice stuff.<\/p>\n<p>My problem is this: the Mozilla browser doesn&#8217;t render the z-index the same way as the two main browsers, <a href=\"http:\/\/www.getfirefox.com\">Firefox<\/a> (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&#8217;s a bit annoying isn&#8217;t it? <\/p>\n<p>Well, it&#8217;s not the end of the world: only .9% of my visitors use Mozilla, but if Mozilla is being grumpy then it&#8217;s possible that the other 5% of people using non-standard browsers are also having problems. I&#8217;ve looked around on the web, but can&#8217;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, <em>and<\/em> Mozilla?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been away for a few days, hence the lack of posts on here. At the moment I&#8217;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&#8217;m having problems with Mozilla. The problem is that some people are &hellip; <a href=\"https:\/\/www.matazone.co.uk\/blog\/?p=61\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Mozilla and z-index in CSS &#8211; help!<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1071,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-stuff"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5bQqr-Z","_links":{"self":[{"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/users\/1071"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":0,"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=\/wp\/v2\/posts\/61\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matazone.co.uk\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}