I am working on this site for a client of mine.
Issue is that the dropdown menu on the home page hides behind the embedded youtube player. It seems to be a simple css problem involving z-index but I have been unable to solve it. Maybe it has something to do with the youtube embed.
I have tried to set the z-index of the menu but it does not seem to be effective.
I almost forgot to tell you that the problem occurs on IE9 specifically.
Also, I'm not a css expert so please just point out what the issue is.
Use below code for youtube iframe:
<iframe width="597" height="323" src="http://www.youtube-nocookie.com/embed/Rahab_AMCkE?wmode=transparent" rel="0" frameborder="0" allowfullscreen=""></iframe>
Add wmode=transparent" just after the source(src) of video
This is a Flash issue. When embedding Flash, the default is wmode=window, making the SWF overlay any HTML object on the page. To avoid that, use wmode=opaque or wmode=transparent which allow HTML elements to overlap SWF content. For more info and the difference between the two see Adobe's help.
Define your css style like this.
.navigation ul ul{
z-index:3;
}
.lcd{
position:relative;
z-index:1;
}
use
_z-index:1000001;
do not remove
z-index: //whatever;
Related
I've been searching for a while now about how to layer html element over SWF object and at last what i came up to is (according to Abode):-
Internet Explorer : Doesn't support layering at all.
Firefox : Doesn't support layering (But it worked but without transparency).
Chrome : Adobe claims that it is not supported but amazingly it worked fine and with transparency.
Safari(Windows) : Doesn't support layering at all.
safari(Mac OS) : supported.
I know that i can easily set wmode="transparent" or wmode="opaque" an layering will work just fine. but i found out that with SWF object which contains 3D content its wmode must be set to "direct" or "gpu".
if anyone knows any solution to this problem, i would appreciated cause i'm developing a game on flash i want to overlay it with html elements and i didn't found any firm answer whether its possible or not
Thanks in advance
After a few tries I got a solution working on Firefox & IE.
It's kind of dirty but works in some cases.
An iFrame is shown on top of the swf, so you can add your layered html in the iframe.
You can go further and set the iframe into the background, it's just needed to keep the spot clear for the upcoming html.
HTML:
<div class="box">
<iframe src="emptyframe.html" frameborder="0" class="emptyiframe"></iframe>
<div class="content">
Shown on top
</div>
</div>
CSS:
.box { position: absolute; z-index: 100; background: #fff;}
.emptyiframe { position: absolute; width: 100%; height: 100%; border: none; z-index: -1; }
With this solution it's possible to add elements over the flash even with wmode="direct". But you need to keep in mind that the iframe is in the background of the html on top of the flash, so you can not make any transparence.
bug here: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D
just encountered this problem, streaking up my screen on chrome, but not on firefox, or IE. anyone on a mac seen this?
Removing the background-color:
body {
...
background-color: #fff;
}
in the CSS of the HTML document which is rendered into the iFrame did solve the issue in my case.
After one full day trying to solve this bug I can confirm that there's another workaround and it's probably an "easier" one.
In my case these solutions didn't work. In fact, applying them to the examples in the issue tracker of chrome (look for them here http://code.google.com/p/chromium/issues/detail?id=143354 ) didn't actually solve the problem. (PS: the problem is usually based on using the scrollbar and SOMETIMES in using the mouse scrolling).
Therefore I did some searches for services the worked and guess what:
Visual Website optimizer didn't have this problem
and they are indeed using and iframe, good job guys!
So, what solution did they use?
They used a fixed height.
(yup!)
So, take the example in the chrome issue 143354 (the one with the red background, ok?)
and change the code from
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>
to
<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>
This will solve the problem of red lines.
To fix my webapp I needed to calculate the height on every window resize, put those margin/padding , and avoiding relative positioning on the iframe, nothing more.
Hope it helped (It almost drew me out of my mind to solve it)
Still same problem here using Windows 7 and chrome 22.0.1229.94 except white lines appear when scrolling down, not scrolling up.
I've tried all solutions proposed but nothing seems to fix it.
Setting -webkit-margin-after and -webkit-margin-before make lines disappear when scrolling down but now it appear when scrolling up.
In chrome group forum, they say it should be fixed in 23 series but who knows...
Finally, can find a workaround (not so cool but works) inspired by some read.
Here it is:
$(document).ready(function(){
//to fix scrolling bug in iframe for chrome (issue: http://code.google.com/p/chromium/issues/detail?id=140447)
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
var ibody = document.getElementsByTagName('body')[0];
window.onscroll = function(e) {
ibody.style.visibility='hidden';
ibody.offsetHeight;
ibody.style.visibility='visible';
}
}
});
Had the same issue. Resolved by setting position style to relative:
<iframe ... style="position: relative"></iframe>
The issue causing these visual anomalies has been confirmed fixed in the latest canary build of chrome (>= 25.0.1365.1 canary), so hopefully the chrome stable channel should have the fix fairly soon.
I found out that it's possible to workaround this Chrome bug by shaking up the DOM a bit.
E.g. this was causing the issue:
<h1>foobar</h1>
<iframe src="..." style="border:none"></iframe>
... but replacing the H1 with SPAN fixed it:
<span style="display:block">foobar</span>
<iframe src="..." style="border:none"></iframe>
I ran in to a similar problem and was able to fix it in my case by setting -webkit-margin-after and -webkit-margin-before to 0.
<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>
Also, I initially tried replacing the H1 with a span as in Jiri's example, but the lines came back when I tried to apply a top and bottom margin of .2em to the span. Removing margins cleaned things up (I just used line-height to create some space around the header)
I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:
#vidframe
{
width: 577px;
height: 358px;
overflow: hidden;
border: none;
}
<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>
Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...
The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.
Remove iframe border and scroll bar using javascript,see the following link...
How to remove border from iframe in IE using javascript
Hello Everyone and Good Morning,
I am working with the page:
http://702wedding.com/live/
And it works in ALL my browsers Execpt IE. I dont have IE so I am kinda flying in the dark as far as fixing it. My boss is saying something about the iframe border showing in IE and w/e else any of you IE'ers can see. Also the font on the index page BEHIND the modal is showing tiny font.
I am on a mac and desprately need a way to see IE in the future, BUT can anyone help me fix this this morning?
Problems:
iFrame Showing in IE
Tiny Font behing Modal in Index Page.
Thank You all very much, as always.
^_^
I see the frame border in IE7. Try setting border: 0 and background: transparent in your styles for the iframe. Then add allowtransparency="true" as an attribute to the iframe.
Instead of border:none, try setting the border to an explicit value:
style="border:0px solid #fff; overflow:hidden; width:100px; height:21px;"
Also, try setting the display selector to block.
I have this style on an iFrame, and the border does not display in IE:
style="border:0px solid #FFF; display:block; left:0; top:0px; height:100%; width:100%;
Also, you have an extra comment in your Javascript, causing an error:
$(".example5").colorbox({innerWidth:686, innerHeight:624 ->,<- }
If you don't have any browser try https://browserlab.adobe.com/en-us/index.html.
you can get a preview of your link in set of defined browser (almost all ).
set your border="0" and frameborder="0" on the iframetag
The page is at least functional in IE6:
Note that the nav at the top of that dialog is broken. IE6 doesn't listen when you tell it a frame has no CSS "border" - you have to explicitly tell it it has no frameborder, so use border="0" frameborder="0" on the iframe tag.
Behind the modal dialog, the text isn't "tiny" - in fact, it's rendered similar to how FF renders it (though, it's IE6, so the text is hard to read/aliased, of course)
And, for future reference, you can use BrowserShots to get screenshots of the page in a variety of different browsers/versions, including IE[4-9], last time I checked.
Otherwise, you could look into IEs4Linux which'll let you run IE6 and 7 on Linux, provided you have a valid Windows license.
Given IE6, an UL-LI list and a background image for the UL container.
<style>
ul {background-image: url(images/bgr.png);}
</style>
...
<ul>
<li>...</li>
...
</ul>
When I load the page, the background is randomly loaded, some parts are visible, some are not. Moreover, it changes on runtime when I'm scrolling on the page. When I scroll out the UL list and scroll back, different parts of the background will be visible, depends on the speed of scrolling.
Do you have any idea? Thanks in advance.
IE6 struggles when it comes to using .png files full stop. There are various suggestions for fixes, but unless you have a specific reason for using a .png file (for instance transparency) I would suggest using a different file format. I've worked around it before by detecting when I have an early version of IE and substituting a .jpg for the .png file I wanted to use, so that most users with up to date browsers get a .png background but IE users get a .jpg.
I've encountered similar problem some time ago (but it was simple background-color, without image) and if I remember correctly, adding position:relative to parent element solved this. So something like this:
<div style="position:relative">
<ul>
<li>...</li>
</ul>
</div>
Does li float or something?
Try putting...
ul
{
zoom:1;
overflow:hidden;
display:block;
}
height:1%;
You can use this to fix