I have an iframe element that contains PDF document the element itself is benaeath a dropdown menu.
|Menu|
<iframe />
it is UI and I can not give you the exact explanation but I believe that you can imagine it. Everytime I click on the "Menu" dropdown a dropdown is generated. No matter that this dropdown has higher z-index attribute it always shows behind the iframe element. This happens in Chrome and IE. I don't know why but it works on Firefox. In other topics I saw that there is a solution if the content was a youtube video but it didn't work for me.
Related
I have an <iframe> that displays video content when a menu item is clicked. The position of the iframe is correct when I open the page in Chrome. However, the iframe and side menu div shifts out of position when I open the page in Safari and Firefox. I need to have them open correctly in all browsers for a presentation. Here is my temp page:
http://www.foxsportsgraphics.com/Lab-presentation/new.html#
Excuse my messy code. I am fairly new to doing web pages from scratch.
I currently have anchor tags in my main navigational menu, which when clicked will open the corresponding accordion item below. The problem I am having is, when you click on the anchor link, the accordion will open 1/2 way down the inside content, and you cannot see the accordion header/title. It is almost like it opens at the bottom of the content.
Everything seems to work with no problems in Firefox and Chrome, but the dreaded IE will not behave.
Does anyone have any suggestions or ideas?
Thanks much!
Jen
could you help me with the following case:
I have a youtube video on my website.
<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>
Beneath and above this video I have some form elements like
<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>
The video is in its own div, the buttons and form elements are in their own divs.
The buttons work perfectly on the desktop browsers, however on the mobile browsers those buttons, that are beneath the video are impossible to click (top buttons are working fine) I figured out that if I remove the video from the page, all the buttons start working. The buttons also work for the first few seconds before the video is fully loaded. So, it looks, like the video is invisibly overlapping the area 100-150px beneath it and makes impossible for mobile browser users to click on any element. (ps Ive tried to use z-index of 1000 - no effect)
Please, help.
Thank you for your time.
I'm having the exact same issue with the YouTube iFrame. I've been testing all day. Here is where I'm at:
The problem is the element that is inside the YouTube iFrame.
<video class="video-stream html5-main-video" controls="true"
x-webkit-airplay="allow" data-youtube-id="..............."></video>
If you 'display:none' that, or change it to 'top:0'. It fixes the problem.
However, since it's inside the iFrame, I dont know how to change it.
To add to this discussion attached is a link to a fiddle of the issue here:
http://jsfiddle.net/krismeister/KynXG/5/
//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>
I am having a problem with the visibility of my LIKE BUTTON social plugin.
the problem only occurs on IE (it works just fine in Chrome & Firefox), and only to the type of "box_count".
I tried multiple ways to implement the plugin (iframe, fb:like etc...) and the result in IE is the same (as the picture demonstrates in the following link):
print screen of the messed-up FB LIKE-BUTTON
The problem is ONLY while i'm toggling a div (in a "talkbacks" area), while to plugin is inside a DIV with "Display:NONE" (before the display changes to "display:block" by clicking on another link).
I think the property "display:none" effects the plugin on IE somehow, altough the display changes after toggling the div.
You can't have a div with an ID that starts with a number - it's invalid.
Try and use the HTML version:
<div class="fb-like" data-href="http://www.example.com" data-send="true" data-layout="box_count" data-width="70" data-show-faces="true" data-font="arial"></div>
Make sure you don't have any CSS styles that alter the width of the DIV - as Anagio said - use the developer tools on chrome/firefox to inspect the div element that has shrunk. Also look for any javascript errors.
If you can post the actual URL, people will be able to offer more help
I have a page that is generated by ajax/jquery at http://chainery.comoj.com/test.html. That page is the html generated by http://chainery.comoj.com#anklets. The problem is the product image is not being displayed. I think my problem lies in the css as neither the ajax page nor the html page show the image to the left of the product description. The link and image appear to be there in explorer's dom but just not showing. Everything does show in FF and safari. Also IE is not displaying any errors, that I can see.
Thank you for any tips or solutions,
Todd
This is a pretty unique issue, but I think I know what the cause is.
If you look at the generated source on your page, the img tag that you're having issues with reads exactly like this:
<img class="itempic" src="images/products/anklets/thumbnails/SSA-40_thumb.jpg" alt="Ravina - Ravina - A hana-gusari anklet" title="Click image for larger view" height="" width="">
If you look at that you'll notice that the height and width attributes are both set to an empty string (""). I'm guessing that Firefox is generously ignoring those attributes and IE is cruelly applying them. Meaning that in IE the height and width of your image are 0, since that's the closest numerical value that IE can derive from "".
Try changing whatever it is in your script that creates that tag to either set a height and width that is appropriate, or to not add those attributes at all.