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)
Related
I'm currently tuning a file input for displaying its content using a preview <img> tag.
<div id="image_preview">
<input> .....
<img id="preview" src="" class="img-fluid" alt="">
</div>
Using some CSS, it renders correctly on Chrome but I got a black stroke on every side of the square on Firefox (and only on Firefox). I tried to set a "border: none;" or even a transparent background but none of these are working as expected. Any hints?
Thanks for any kind of help :)
Fixed. I found that Firefox is adding these lines only on blank img src. I added a blank image base64 string and it's working fine now.
Thanks for your help :)
If needed : data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7
Firefox usually adds a dotted line, this can be removed and an SO user answered this question:
How to remove Firefox's dotted outline on BUTTONS as well as links?
Basically writing in your CSS this ::-moz-focus-inner
.img-fluid::-moz-focus-inner {
border: 0;
}
I hope this solves your problem.
because a png image that I put in the header of my website on all browsers display correctly on Internet Explorer and 10 displays a square around it? I'm going crazy trying to figure out why. Can anyone help me? The image has no background, is transparent. I attach a screenshot for you to understand the problem better.
The blue part is the logo (which I covered)
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" style="border-style: none"/>
</a>
An even cleaner solution, if you never want the blue border, is to say so in a style sheet:
img
{
border-style: none;
}
And then reference that style sheet in the head element of your page:one
or
img
{
border: 0 none;
}
To get rid of the blue border you can use the border attribute for the img element like so:
You need to set the Border to 0 or None:
There are two ways to delete the Border using CSS or Direct way
Direct implementation is
<img src="image path" alt="" border="none">
Using CSS :
<style type="text/css">
a img {border:none;}
</style>
HTML
<img src="image path" alt="">
It's IE10 issue. Give it a style and remove the border.
<img src="/YourImage.png" style="border-style:none;">
Same issue here
People say that this is an issue of IE, but its actually not exactly an issue,
its just their browsers default CSS rule which in a lot of cases is overridden.
Basically if you are making a page that is compatible with a lot of browsers, specially if
IE is included in that case its wise to use Reset.css, which reduces the browser inconsistencies and which allows you to specify your own rules from scratch.
I know you got your answer, but I would recommend this approach.
I use zurb-foundation to maintain the layout of my website. The home page of that website is rendreded perfectly in Opera 12.14 beside some other pages. However, some pages such as this page has extra blank space on the right on Opera only. I tried to inspect element in the blank extra space, it mentioned to the html tag?!! I copied the html source into my editor (netbeans) to see if there some missing ending tags, but I did not find any of them. My website is rtl. What should cause this issue?
I got the cause of this layout problem in Opera. It is due to soundmanager2. In Opera only it generates a div tag just before the closing body tag as follows:
<div id="sm2-container" class="movieContainer sm2_debug" style="position: absolute; width: 6px; height: 6px; top: -9999px; left: 9999px;">
<embed name="sm2movie" id="sm2movie" src="/quran/themed/slate/js/swf/soundmanager2_flash9_debug.swf" quality="high" allowscriptaccess="always" bgcolor="#ffffff" pluginspage="www.macromedia.com/go/getflashplayer" title="JS/Flash audio component (SoundManager 2)" type="application/x-shockwave-flash" haspriority="true">
</div>
Since I don't know how to make Soundmanager2 to stop generating this div, I decided to solve it using CSS as the following:
#sm2-container .movieContainer .sm2_debug{
display: none;
}
However, the above CSS solution fixed the layout issue, but it causes the Soundmanager stop working on Opera! Till this point, I regard this is an answer for my question about the layout.
The Final Solurtion:
from this answer on the official SM2 forum. I have to make a div with an id sm2_container and style it as follows then place it anywhere I want in the source:
<div id="sm2-container" style="width:1px; height:1px; visibility: hidden" class="movieContainer sm2_debug" >
</div>
The real useful style is visibilty hidden because it is just an swf square with white background and I want to hide it.
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.