I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.
Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?
The only draggable elements in IE are the <a> and <img> elements.
Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.
So the "correct" way to handle IE is to use those elements.
Related
I've got myself multiple a tags floating on a page.
They have been styled in a unique way to center an image horizontally inside it, using a span and css. The a tag itself has fixed width and height.
I thought this was basic stuff, and my theme was causing the issue, but I've created a stripped down jsFiddle and I'm still getting the same problem when running the jsFiddle in IE 7.
The a tags are all click-able in every browser apart from IE7, why is this happening?
Can anyone explain? Thanks.
http://jsfiddle.net/motocomdigital/Qk9tu/6/ - Test click-able state in IE7, works fine everywhere else.
Don't worry about IE 6 - I'm not coding for this anymore.
On IE, a link element (<a></a>) with an empty attribute href doesn't display a link-cursor (hand).
Either put a # in your href attributes or add a cursor:pointer on a.home-module
It's the spans inside the a that cause the trouble...
You can achieve what you are trying to do with just CSS, but it requires a slightly different layout in your HTML and some extra CSS.
JSFiddle - http://jsfiddle.net/8E8um/2/
Note
In a.home-module I have added a transparent image. This is because IE7 will not assign an "empty" parameter (due to the negative text-indent) to the top level and would therefore still leave the link unclickable.
you should assign "#" to href attribute.
Try this: http://jsfiddle.net/Qk9tu/5/
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
site in question: http://ecogroovellc.com
When looking at the 2nd child menu drop-down (Portfolio>Music), it appears properly in FF and Safari, but not in IE8, where it is hidden within the 1st child drop-down. Any solution ?
Thanks!
I know it's because of the filter (providing opacity) in IE - it causes an overflow: hidden-esque effect.
I attempted to precisely locate it, but there's a lot of CSS/JavaScript to look through and I became disheartened.
What you need to do is remove the relevant filter rule when the fade transition is complete in your JavaScript.
If you set the UL in question (the one with audio and videos) to position:relative, it seems to fix it in ie8, but it screws it up in FF.
I had the same issue. I tried multiple variations, in the end I added filter:none !important; to my css rule on the containing element and that is what worked for me.
if you're trying to compensate for issues on IE8 you should always target it conditionally (add conditional class to HTML then write css targeting .ie8 specifically)
there literally isn't any way to write code that works for everything all at once...
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.