I am currently working on a one-page-layout, in which I've put an iframe of another one-page-layout.
Chrome and IE are doing well, but Firefox seems to mess with me.
http://neu.createk-medien.de
Just click on an item (currently every item opens the same iframe) and see for yourself.
Be aware the page is work in progress.
main-page:
<div id="tablet" class="box">
<div id="close_tablet" onclick="tablet_weg()">x</div>
<iframe src="http://tablet.createk-medien.de"></iframe>
</div>
the actual iframe is a lot of code and a really got no idea what causes the issues.
EDIT:
Solved it.
Firefox actually hates "display: none" on iframes.
Bypassed it with "visibility: hidden".
Related
I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.
<div class='browseWrapper'>
Drag & Drop Images Here</br><em>Or click to browse.</em>
<input class='browseImage' type='file' />
</div>
Here's what i've got so far: http://jsfiddle.net/sPJ9u/
Thanks in advance.
EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.
Firefox Version: 26
Check out this related question: Why does overflow:hidden not work in a <td>?
It's because you have display set to table-cell, which makes it behave as if the div is actually a td.
You can use this structure in your css:
-moz-overflow:hidden;
Here's my deal:
The boss asked me to fix a page not displaying properly in IE7.
I'm working with a div tag initially set as:
<div id="login_content" style="left: 0px; text-align: center;">
And so it is rendered in Firefox, Chrome, Safari, and IE9. The issue comes in IE7--somehow the div is cut off when IE7 automagically decides to set the inline style with a height of 8px.
There are no scripts that modify this (as I said, it doesn't get touched in other modern browsers) and upon inspection with IE9 developer tools, it's not inherited from a style sheet. Does anyone know what might cause this behavior?
If it's running through an external script it's probably an inline style in that. If you post a link we can use inspection tools.
You can use the conditional <!--[if IE7] code to fix it [endif]--> to just change how it renders on IE7.
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)
In Google Chrome (And I think firefox?) a page renders correctly
But in IE, the page appears to be "transparent", see This image.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div>
I believe this div causes the issue, when I remove it, the page looks correct. Is the CSS on it incorrect?
I needed to close a div, silly me.
<div style="margin-left:-10px;float:left;width:130px;height:30px; background-image:url('/gc_mycoinamount_display.png');">
<div id="mygoldamount" style="margin-top:7px;">5 Coins</div></div>