I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css)
1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html
To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on?
Well I think I found out the issue I am not sure as I used firebug, my friend the problem is because of the values of z-index that you gave to #postarea #sidebar #sidebar1 #sidebar2 etc they have z-index:1 if you turn off them using firebug, it completely resolves the issue you are facing. I think z-index:1 is being considered bigger than z-index:99999999 that's why your content appear above the game and creates issues for you.
I think the issue is not because of z-index as they both are same for both sites, it must be something else that is effecting it. My guess is that the buggy site's design is maybe messing with it as I see contents appearing inside the game and when you click on borders the game disappears.
Related
Can some body tell me, why my menu disappears when I open "Case Studies" and when I put a mouse on it.
I am identify the problem in the transform: translate() property, but do not know how to fix it.
http://dinamickadevelopment.github.io/Nousles/index.html
Many thanks.
remove
#header {
z-index: 55;
}
from index.css line 33
That will bring back your menu when you select Case Studies
DCdaz is correct. I've checked it in chrome, safari, firefox. Firefox displays it just fine (though your :hover for the top-right corner isn't working for firefox). Removing the z-index: 55 fixes it in chrome and safari and does not adversely affect the page in firefox.
You're using a lot of z-indexing on this site. I realize that a lot of this is coming from bootstrap and the like, but you might want to consider a different way of handling it. Chris Coyier presents an interesting idea taken from video game development. However it utilized using a pre-processor for css, so it' might not be an option for you. He does discuss another method that would work, but, for personal reasons, he doesn't like them.
Anyways, long story short, removing the z-index: 55 from line 33 on index.css seems to fix the problem. Your site looks nice enough that I doubt you don't already know most of this, but you say you tried removing it, so here are some ideas why that may not have fixed it:
How did you get rid of the z-index:55? Did you delete it from your files and re-upload it? If you did then make sure you clear your cache before you check to see if the issue is gone away. Chrome and Safari have built in ways to do this. I don't know of a quick way in Firefox, but there are ways. CSS especially can fall prey to this.
If you didn't delete it from the file (which I don't think you did, since I still see it when I check your code), then you might have removed it by using the developer tools directly in your browser. All major browsers (that I know of) have this option. This is the way I checked it and it worked for me (and probably DCdaz), so I have no idea why it wouldn't for you.
If you didn't use either of the methods above then you might have edited and ran your code locally. I have no idea why it wouldn't have worked locally, but that's the last thing I can think of.
If you didn't use any of the above methods I'd love to hear how you went about removing it. I'm always up for learning new ways to skin a cat.
EDIT
I didn't even consider that you may have simply changed the z-index value to something else. I tried changing it and z-index: auto, z-index: inherit, and z-index: initial all seem to work just fine, but any number value (even negative ones) allow the error to remain intact. So either delete it or change it to auto, inherit, or initial.
I've recently put a website online, and everything is going well, the site looks good, it all works, but there's one very subtle problem that I can't find the root of.
To see what I'm talking about, go to edited out . Click on one of the parts where it says "X comments", and watch the left side of the page. It moves, just a bit.
Now, maybe this doesn't matter at all, but it's been bugging me that I can't find the reason. Anyone have any ideas?
This kind of behaviour happens frequently. The problem is that the scrollbar appears only some times and nudges everything centered or right aligned. To prevent this, the best solution is to simply make sure the scroll bar always appears:
body{
overflow-y:scroll;
}
I created a simple page with a series of divs. In all of the modern browsers, it appears fine, but in Internet Explorer 6, it falls apart. I have no idea what is causing it to happen.
You can view the page here: IE 6 Test Page
If you have IE6 installed, I included the Firebug Lite JS file on the page, so just click the firebug icon in the bottom right corner to inspect an element.
Here's a screenshot using Browserlab to view the page in Firefox and IE6: Comparison Screenshot
The 3rd div named 'content'(With the Manager Email field) moves everything to the right forcing the next div to the next line. Also, none of the row div's reach all the way across as they should(see Comparison Screenshot)
I did some research and have found that there is some problems in IE6 using floats which I use here, but I'm not sure how to fix it.
Why does my page not display correctly in Internet Explorer 6? And better yet, how can I fix it? :)
It looks like the third div isn't clearing the float properly. Perhaps give each of the row divs the style clear: both
Do you really need to support IE6? Even Microsoft is fighting it nowadays and the market share is starting to be irrelevant except for China.
There's a difference between "not working in IE6" and "not looking perfect in IE6".
As has already been said, IE6's market share is low and continuing to fall -- it's below 2% in most of the developed world (see http://gs.statcounter.com/ for country-by-country stats).
Given those stats, I would say that if the page is usable in IE6 then your work is done. IE6 users are by now used to web pages looking bad. Many popular sites don't work at all in their browser, so one with a few layout glitches won't phase them at all. They'll still use the site.
If it is actually broken to the point of not being usable then it's a different story; in that case, you'd need to consider how important those few IE6 users are to you vs the time it'll take to do the work, and fix it accordingly, but that doesn't seen to be case here: the page seems to work. It looks a bit naff, but it works.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks