It seems logical that if you want a 1px wide black border around an iframe, you apply same rule as if you want the border around anything else. But this code doesn't work:
#myiframe{
border:1px solid black;
}
The border goes on the left and top of the iframe, sometimes (unpredictably) the bottom of it, but never the right of it. Why would it not just apply it consistently around the iframe??
I only have this problem in Google Chrome.
Try to add this..
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
outline:none;
outline:none and appearance:none will delete default browser appearance.
As pointed out in the comments on the question, I was on an out-of-date Chrome version. On the latest stable version, there is no bug.
try to wrap a DIV
html
<div class="wrapper">
<myiframe>
</div>
css
.wrapper {
float:left;
border:1px solid #000;
}
We can get unique border around our iFrame, by using attribute frameBorder.
So try <iframe src="" frameBorder="1"/>
Related
I am making an html page in which I have put some pictures. Now I want to put some fancy borders around it. How do I do that? My code is:
<img src="award.gif">
When I run it, it comes out perfectly. But I need a border. I use the latest version of Google Chrome. Thanks.
You can use CSS rules to set border around the image, see the below link where you can see different CSS borders and you can generate cross-browser border CSS. I like this tool very much and this tool provides an intuitive preview to see how the border will look like-
http://www.cssmatic.com/border-radius
Like this,
css:
img {
border:1px solid #021a40;
}
The "Double Border":
img {
padding:1px;
border:1px solid #021a40;
}
For multiple images, you can class in each images, and css is here,
Simple Example
Another one Example
And for more about border and border-radius refer this Link
UPDATE:
FIDDLE
You can do this by using a instead because in matters of CSS this can be more versatile.
CSS
myImage {
background:url(path to image file goes here);
border: 1px solid #000000; //black border
//some width and height values
}
HTML
<div class="myImage"></div>
HTML
<div class="divimg">
<img src="award.gif">
</div>
CSS
.divimg {
border: 1px solid red; }
There are many ways of doing that, you can create a div and put the image inside the div and then, with css, create the border.
Another simple way is this:
img {
border-style:solid;
border-width:1px;
border-color:red;
}
Say I have the following code:
<style>
iframe
{
border:none;
}
div
{
border: 1px solid;
padding: 10px;
}
</style>
<div>
<iframe></iframe>
</div>
If I view this in any modern browser there is no border around the iframe. But If I view it using IE8 or 7 then the border remains. How can I make the border disappear for older, crappier browsers?
I am also having a few other styling issues with the iframe, so bonus points for anyone can provide a good link that goes over cross browser styling of iframes.
You need to add the following to the iFrame. It's can't be done with just CSS for older browsers:
frameborder="0"
Can anyone tell me why the hell is this happening in Google Chrome? http://jsfiddle.net/webtiago/D2jLr/
An outline means that is a line that is outside something right? When I focus on my input my outline turns an "inline". It shouldn't right? This is happening in several projects I'm working on. I'm using Chrome 19.0.1084.52 m.
Any help?
It just looks like that. Try this I made the lines thicker. The outline is still on the outside.
It moving in 1px looks to be just a Chrome bug.. you can sort of work around it by switching the border and outline colors on focus.
input:focus { border: 1px solid red; outline: 1px solid orange;}
It still moves in 1px but the order of the colors is maintained at least.
Chrome changes outline-offset (which controls the location of the outline) on focus.
Simply use outline: 1px solid blue; outline-offset: 0; and it'll work the way you want it to.
Chrome's outline border is slightly thicker than the border of your input causing it to look like it's on the inside. If this is annoying, you can turn of chrome's outline by:
outline:none;
Demo http://jsfiddle.net/D2jLr/2/
Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link
example
...<li>
<a href="#link">
<img ...>
</a>
</li> .....
Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. !
edit// I added a picture to better explain what I am talking about.
Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text
To remove it, simply use:
a {
outline: none;
}
Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do
* {
outline: none;
}
This will remove it from all elements.
#link img a
{
border:0;
outline:none;
}
Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.
To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:
Your HTML:
<div id="test">
<a...>
<img .../>
</a>
</div>
And use the following CSS:
#test img {
border-style: none;
}
I see no reason why this shouldn't work in all browsers, here is my css for anchor tag :
.myButton{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #D8DFEA !important;
color:#3B5998;
cursor:pointer;
font-size:20px;
padding:10px;
}
Here is how it looks in IE7 :
And here is how it looks in other browsers :
HTML is nothing unusual as well :
Beta
All of this is inside table, this anchor html is wrapped around with :
<tr>
<td><a>...</a></td>
<tr>
I don't think this has to do it with anything but I mentioned it just in case, so the button is missing border top, any indications what might cause this?
If the usual zoom:1; isn't working try float:left; or display: inline-block;vertical-align: top; but the first thing id do is serving IE7 margin-top:1px or position:relative;.
You probably just need to trigger the magic HASLAYOUT.
As an alternative you could style the TD instead.