<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>opera border radius</title>
<style type="text/css">
img{
border-radius:10px;
-o-border-radius:10px;
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bonsai_IMG_6426.jpg/450px-Bonsai_IMG_6426.jpg" width="337" height="450" alt="my think">
</body>
Opera doesn't like adding border-radius to images directly -- Opera is stubborn like that.
For a solution that works in Opera, check out http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/
Also, put the real CSS rule border-radius after the vendor-prefixed rule -o-border-radius.
Take a look at http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius
Border-radius has had issues in opera, since quite some time. In latest versions, if supported
can be used directly using border-radius property.
Officially, Border radius property is supported by all Opera versions > 10.5, but NOT on Opera Mini, and Opera Mobile < 11, but seems to give problems.
(Also, tag this question under css3)
[EDIT]
I just checked your code again. You wanted to appy border-radius to an image. This is not possible in Opera, unless you put it as a background-image using css instead of foreground one.
So to get this done, make a div and apply the rounded corners to the div instead of the img.
then set the background-image as the image, you should get the rounded corners. In case the image doesn't come centered, just change position property. That should do the trick.
Here, try this : http://jsfiddle.net/c8nmZ/5/
Related
So I am using #e5592e as a background colour.
In Safari it renders significantly brighter than in Firefox or Chrome. To the point that I need to change it.
However, I can't seen to find a css hack that allows me to target Safari only.
Is there a more elegant solution anyone is aware of?
edit: Adding code to demonstrate the problem;
<html>
<style>
p {
background-color: #e5592e;
min-height: 500px;
}
</style>
<body>
<p></p>
</body>
</html>
Not the page in question but still demonstrates the same problem.
For me, the colour here is much brighter in Safari than in Firefox or Chrome.
The following code works differently in Firefox and Webkit (Safari/Chrome) and should not. From what I understand, Firefox is rendering it correctly. How can I make Webkit render it the same?
<!doctype html>
<html>
<head>
<style type="text/css">
.frell {
margin: auto;
position: absolute;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="container">
<button class="frell">Test</button>
</div>
<body>
</html>
Probably inheriting either it's parent's width or getting display:block. What does the Chrome developer tools say? I'd either specify a width (% or px) or display:inline (possibly inline-block)
Firefox is rendering it incorrectly, webkit is rendering it correctly. To make firefox behave, you need to add width: 100% to the class, even then, that won't work in all cases, but it will be closer.
Absolutely positioning an item and specifying both left and right should make the item become the necessary width to fill the space between them. For a simple test, here is a jsfiddle http://jsfiddle.net/c3EeF/2/ that shows what happens when you apply the same class to both the button and div tags. Firefox misbehaves when using the button, and I have been unable to find any setting that makes it work 100% correctly.
The tab content displays well in all browser except IE. Is there away to correct that size issue with the IE browswer?
LIVE EXAMPLE
Here is the CSS to control width
div.st_horizontal { /* The main container */
position:relative;
float:left;
/*clear:both; */
width:655px; /*Set the full width */
color:#616161;
}
You could set up a conditional CSS that targets only IE.
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
and write the width in there.
But I'm looking at the link on chrome and it seems like its also not align to the edge of the tab as well.
Kindly visit the following website:
property.consultfinman.com
You must have seen the problem, if you are using IE 7 or IE 6. My page is loading fine in FF, IE8, Safari and Google Chrome. But in IE7 floats are not positioned where they are intended to be positioned. and in IE6 everything is shuffled.
Any solution for this problem (keeping in mind that i am not a css guru).
Thanks
Many of your IE6 bugs are caused by double margin bug which is when you use float and margin in same direction, ex { float: left; margin-left: 10px; }, IE6 magically double the value.
So you need to add *display: inline; where you need to use float and margin in same direction.
As for bottom of your design, I have no idea why you specify background-color: #000000; at .featured-content
This is the reason why you have black background on IE6 and IE7, I can't tell which bug but I'm pretty sure it's something to do with float.
Hope this helps.
You can check the browser using this
<!--[if lt IE 6]>
<style>
//your style
</style>
<![endif]-->
<!--[if lt IE 7]>
<style>
//your style
</style>
<![endif]-->
see http://www.quirksmode.org/css/condcom.html
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
I have a div with a pretty curve background image so it does rounded corners on all browsers.
The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.
Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
}
Is there some IE 'gotcha' regarding height that I'm missing?
Here are some additional details:
The line does not appear in FF or Chrome.
There's little javascript on the page, nothing that would impact how this renders.
Other changes to the css get applied to the div.
if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add
line-height: 0;
font-size: 0;
Remember to set the doctype so the browser doesn't go into quirksmode
First line of your html document should be
<!DOCTYPE html>
You could also use a more traditional xhtml doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)
Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)
Try applying overflow:hidden to your CSS
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
overflow:hidden;
}