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.
Related
I've built a webpage, everything looks great in IE7 and upwards but in IE6 it's looks bad.
I have a whole div which has a background image that's not even showing up.
Why could this be? Are there common things that tend to not work that could be in my CSS? I don't normally support IE6 so don't usually have to figure these things out, but my client has specified that they want to work in IE6.
Here's the site, yep - quite a nice site in modern browsers! http://www.replyonline.co.uk/ie6sucks/index.html - feel free to look through the code (there's a IE6 specific stylesheet at view-source:http://www.replyonline.co.uk/ie6sucks/css/anythingslider-ie.css where I've solved some of the existing issues.
Thanks
I don't have an IE6 install with me here, but here are a few hints:
It's most likely a positioning ('hasLayout') issue. Try setting zoom: 1 on the missing DIV or its parent(s). The same goes for position: relative or a combination of both.
Also, check some of the content-hiding bugs on PIE: http://www.positioniseverything.net/explorer.html
You can use the Internet Explorer developer toolbar to try some of this out: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535. Keep in mind though that some bugs will only appear or get fixed on a full page reload, and not while fiddling with the CSS in the developer toolbar.
I also use XRAY ( http://www.westciv.com/xray ) a lot to see how my elements behave.
For more info on 'having layout', see http://www.satzansatz.de/cssd/onhavinglayout.html.
It's tricky to debug since I don't have a working copy of ie6 on my machine, only ietester but there are known issues with ie6 where it doesn't calculate sizes properly in order to display background images properly.
The answer generally is to trigger hasLayout on the element and the easiest way to do this is using position:relative. I'd give that a go before anything else.
I would also recommend having a look at the html5boilerplate stylesheet to see if there is anything there that you can make use of. The reset/reassign css in there is simply brilliant and irons out a lot of css issues.
Best of luck!
1 - Make sure your site validates: W3C Validator Currently yours doesn't ( 146 Errors, 16 warning ).
2 - There's an annoying bug in IE to do with margin/padding, if you have any to the left or right of an element, you may need to do display: inline or inline-block;
I've found little things like this can help.
Looking at the W3C results, it looks like you may have too many closing div tags
For some reason, z-index is working for one particular element in IE8, but not in IE7 (or if I use the pseudo IE7 compatibility view while in IE8). It's working for all of the other elements. The only difference is that this element has a negative z-index, so I tried using a positive one of 1 and still, it's the only one not working.
The part that's not working is this:
.passport {
position: absolute;
left: -130px;
z-index: -2;
}
And it's attached to this image that's supposed to be underneath everything else:
<img src="http://www.blahblahblah.com/image.png" class="passport">
Everything else, has positive z-index from 2 and up (which is why I used 1 for the index when trying a positive one to see if that helped). As the code is now, this image IS underneath everything else in IE8, but like I said, not in IE7. That's not the actual path of the image, btw, I just changed it here for privacy purposes.
Any idea on what could be causing it? The only solutions I keep seeing on the web are addressing z-index that doesn't work at all or works in IE7 but not IE8 and when I find one that seems close, the solution doesn't help me because it's suggesting to use position: static (which I can't because I need this to be absolute) or other things that have nothing to do with this because it's with dropdown menus and javascript and all sort of other things in the mix.
All I'm dealing with is images stacking, nothing else. The one thing I found that might help me understand is this website, but I don't understand what it means by different stacking "context". http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
I don't know if it would actually be relevant to my issue, but I figured I'd ask what it means in case it can help. Otherwise, the general issue is that this works in IE8 but not IE7 and I was wondering why that might be?
Again, I have searched, so if it's a simple answer I just missed it. Thanks!
Take a look here:
IE 6 & IE 7 Z-Index Problem
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
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
My webpage is suffering from two IE6 rendering bugs. Each of them have workarounds, but unfortunately said workarounds are incompatible with each other.
Here's a minimized test case. The behavior in Firefox/Safari is the desired/correct one. IE7 is unknown, since I don't have access to it right now.
First bug: #content has overflow: auto and contains a relatively-positioned div. IE6 incorrectly gives the relatively-positioned div a 'fixed' appearance. Workaround: Set position: relative on #content.
Second bug: The page sometimes shows a modal popup. The z-index on the popup and background are set really high to stop anything behind them from being interacted with. This works fine until I set position:relative on #content, which makes IE6 treat the z-index property completely wrong.
How can I make these bugs play nicely with each other? (Note: Remotely formatting the hard drives of users still running IE6 is not an option, much to my dismay.)
Edit: Here's a second test case that shows what happens when I apply position: relative to content. The first bug ('fixed' appearance of #content-header) is solved, but it causes the z-index bug to kick in and mess up the modal background.
There are a myriad of implementation as to how to avoid the massive issues with ie6 (and below) conformity. The only one that has actually worked for me (to a great extent even) is Dean Edward's solution.
Try to insert the following line in your main header:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]-->
-- and see how it goes from there (and what you still need to handle, since it probably won't fix everything).
The script size is a mere 30kb, and will only be loaded in ie6 and ie7.
The google code url is (obviously) http://code.google.com/p/ie7-js/
Implement something like we've done at Ra-Ajax.org (hint, visit the site with IE ;)
Seriously, even prototype.js and 37signals have STOPPED supporting IE6 now, I think it's time to move on...
I don't think using a library is too bad of a penalty to minimize my time working around ridiculous IE bugs.
We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe "shield" technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn't really all that much) so that I don't have to go crazy about IE6 bleedthru is worth it.
P.S. I think the web developers of the world should start a class action lawsuit to force Microsoft ether to offer the equivilant of firebug for IE6 and IE7, make sure all IE6 and IE7 instances are upgraded to standards, or remove all versions of IE6 and IE7 from all computers on the Internet, or bail-out all web developers with a payment of $1M each for their pain and suffering!
While it may be the wrong solution, and probably way overkill, jQuery can do modal popups similar to this and works on IE6. I'll probably get downvoted for such a simple answer, but it is still worth considering, or at least looking at, other solutions before reinventing the wheel.