How can I round the corners of a Div ?
I tried with following code but it doesnot work:
border: 2px solid black;
border-radius: 6px;
I am using IE6/7, so above code should not be an issue, still it is now working.
Any other work around ?
TIA.
The border-radius CSS property is not supported by IE6/7
You need to use a .htc file to achieve that effect in IE.
Here is the .htc file link: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc
You need to upload the file to the /css/ folder on your website.
And here is how you would use it in your code:
.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}
This tutorial explains it in detail: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
As cassi.lup just mentioned, rounded corners are not supported in IE6,7,8 .
You could however solve this with CSS3 Pie
Related
I've got this selector code:
#ajax_hits_counter_popular_posts_widget-2.widget li img {
// Give the thumbs in the widget some style
border-radius: 5px;
margin-right: 10px;
border: 4px solid #353434 !important;
}
Everything is rendering properly except for the border: 4px solid #353434 !important;
When viewing in either Firebug or Chrome Dev Tools, the border: property doesn't even show up at all, while the others do.
If I manually type the same exact code into Firebug or Chrome tools, it works fine.
Live is here (it's the "Top Posts" thumbnail widget at the bottom right): Meanwhile, In America
Anyone know why?
// Give the thumbs in the widget some style
is invalid in CSS. The browser seems to ignore the following property, as you can see in this example. If you remove the "comment" it works as expected. (On your page, the border declaration directly follows the "comment", unlike in the CSS posted here)
Comments in CSS have to be enclosed in /* ... */.
As tim.baker mentions, you have have to use border instead of border-style.
Looking at your CSS it seams as though you have used
border-style: 4px solid #353434 !important;
Using purely
border: 4px solid #353434;
Should work
Some other CSS files removed the border around all GWT CaptionPanels. Now I'm looking for a way to add the CaptionPanels border again through the GWT projects .css file. Do you have an idea how to do it? Simply adding a .gwt-CaptionPanel{} to the css file has no effect...
I'm answering my own question here.
It took me some time to figure out that GWTs CaptionPanel uses a fieldset under the hood. The following places a red 1 pixel solid border around GWT CaptionPaneles:
fieldset {
border: 1px;
border-style: solid;
border-color: #ff0000;
}
Im not experienced with GWT CaptionPanels but you can try to set an !important on the class that makes the borders in the main style sheet. So you get something like: .borders {border-width:1px !important}
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
I have this in my HTML everything works except the background-image: 'images/Header.jpg';
Instead I see the grey color in the header but not the image.. I tried removing the grey color but still dont see the image...
#outerWrapper #header {
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');
How can I make this work.. please help.. thanks
What is the path of your CSS file and the path of the image?
You must take in account that, when using url() in CSS, the path is relative to CSS file, not to the requested page.
Imagine you have the following files:
/website/index.html
/website/templates/main.css
/website/images/header.jpg
than the CSS must be:
.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */
Have a look at your page with Firebug for Firefox. You may not be loading the image properly. You will also be able to play with the css on the fly if that's your issue.
Try changing the url to '/images/Header.jpg'
Sure you need the ' char? And maybe it is case sensitive and you have a mistake in the url..
Maybe background-image:url(images/header.jpg);
I want to round the corner of my picture by using css in IE7,8 and Firefox.
I have try to use -moz-border-radius for Firefox but it just round only border not the picture.
Link to picture: http://i108.photobucket.com/albums/n33/ligthing_illuminate/problemwithcorner.png
and the css which I use is following:
.content p img {
float:left;
margin:0;
padding:0;
width:780px;
border: 10px solid white;
-moz-border-radius: 15px;
}
and in IE7,IE8 are not work with border-radius.
Anyone can help me?
Thanks you in advance.
-mos-border-radius is not supported in IE 7 or 8....you will need to revert to rounding images or Nifty Corners to implement rounded corners in IE 7 or 8
Your best bet is to make the image itself have rounded corners.
But this could be helpful too maybe: http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
See the -moz part at the start of the -moz-border-radius CSS rule?
It means that this is a vendor specific extension (in this case for mozilla/firefox).
It is not supported on other browsers.