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.
Related
Is it possible to remove the dotted outline from an iframe in Firefox?
Setting the outline property in CSS doesn't work.
HTML:
<iframe width="50" height="50"/>
CSS:
iframe { outline: 0 }
Here's a jsfiddle that reproduces this issue. http://jsfiddle.net/6sHkw/1/
Edit
Sorry guys, I wasn't clear with my question.
With the above jsfiddle, the dotted outline appears if you tab to the iframe. I would like to make it so that the dotted outline does not appear when you tab to it. Neither border: 0 nor frameborder=0 works.
Add the following
iframe {
border:0px;
}
jsFiddle works in all browsers.
The fiddle will be blank, as there is no src in the iframe.
The dotted focus outline is in the document inside the iframe, not on the iframe itself. You can see the same thing with the main browser viewport as well.
I don't believe you can turn it off via styles. It's an accessibility feature: if people are using tab navigation the assumption is that they want to actually see where they are in the tab order. Otherwise it quickly gets completely unusable.
you can also set it from the markup (iframe has a frameborder property)
<iframe width="50" height="50" frameborder="0"/>
Working Fiddle:
Caution: this in no longer supported in HTML5, so use CSS styling instead (like the other answers)
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 creating a website and there's a strange white space at the bottom of the page (only at IE). safari is fine. i am using ie8.
I want the white background ended after that black navigation links.
http://www.applezone.com.hk/newrx/
I can't figure out which part of the css causing that white space.
Thanks.
try adding those:
.navlink{
display: inline-block;
margin-left: 51px;
}
i don't have IE8 to test on but i do use "IE tester" program which showed me the problem.
If you use Firebug (Firefox add-on) you can select that white space and it will show you where it is in the DOM, i.e. what the HTML is that is actually generating it - which element it's part of.
You can also switch on and off the individual styles on the fly.
The equivalent in IE is to hit F12 and get the 'Developer Tools' console. Find -> Select Element by Click.
Try display:block and/or margin:0 and/or padding:0 for the element in question. One of them is going to be the culprit.
In this website: http://www.blackblot.co.il/kb/ I can't make the anchor ( tags) to show tooltips in IE.
It works in chrome and Firefox.
what makes it even harder to understand, is it not happenening in all the tags, but only these in the content section.
for example, the links on the left side are showing the titles, but the links in the content, altough has it, won't show it.
I checked for CSS manipulation, or js code, but nothing really stops it from showing the titles.
really need help here. Thanks
I checked out the source code and found out that the anchors didn't have titles. Did you try putting titles in those anchors? That should work in my opinion.
OK
I found the solution. which is not a real solution - but it something in IE was absolutely wrong.
it is clearly a bug in IE. Anyway, if someone have the same problem.
I have dicided to take off the css and see if I see the tooltips without any css. And then I saw it.
So I had to debug 500 lines of poorly written CSS. Among these 500 line there were 3 declarations that caused this bug. I found that when I use F12 (developer's tools of IE) the positioning of the element was not in it's actual position on the page. Please see image attached.
So I tried to figure out which css declaration causing this. For some reason 3 declaration of 3 div's padding had to be removed in order for this to work.
the CSS lines are as follow, the commented code is the bad guy:
ul,ol,dl,p,h1,h2,h3,h4,h5,h6{margin-top:10px; margin-bottom:10px; /* padding-top:0; padding-bottom:0; */}
div.post,div.page{display:block; margin:0 0 0px 0; border-bottom:solid 1px #eee; /* padding:20px */}
div.post-bodycopy p{margin:1em 0; /* padding:0; */ display:block; font-size: 13px;}
I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.
<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />
For those of you that have Firefox version 2 or Seamonkey, please see my site
Thanks all
SOLVED
No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.
Thank you all for your help. :)
From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.
My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.
I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.
You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.
I see you're applying the same style via id and class, however that style is declared only for use as a class:
div.w_span_auto{
background:url(../images/wr.png) top right no-repeat;
padding-right:18px;
height:34px;
line-height:34px;
text-align:left;
border:none;
}
(For an id, you'd need to have declared it as div#w_span_auto.)
I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.
Cheers.
Are you sure JS is enabled on your copy of Firefox?
Do you really have to worry about FireFox 2? It also only has a 3% market share:
http://marketshare.hitslink.com/report.aspx?qprid=0
DO you need a type="submit", instead of type="Button"?