i used this corner style:
.corners4{
background:url(../img/panelHeaderColor.jpg) repeat-x;
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
but, this doesn't work in IE, is there any IE equivalent for this?
thanks
If you remove the -moz- part of the property, you will have border-radius-topleft and so on. These are the border-radius properties. These are only in the CSS3 standard. With IE's current track record, CSS3 should be supported sometime around 2017. If you want it to work in Safari, you can use -webkit-border-radius. See this question for more information on rounded corners.
The -moz- part stands for "Mozilla" - this property is not supported by IE.
There is no CSS only equivalent for this that works across all browsers. At least not yet.
Curved corners are a serious pain in the behind to implement with javascript, and most solutions aren't very robust. The absolute best way to achieve this in a way all your users will be able to enjoy is the old school way of using your own images as corners, unfortunately. This website makes the process easier, at least. If you want to venture into JS solutions, I've heard good things about curvyCorners.
IE seems to be tricky with rounded corners a lot of times. All in all, you will find it isn't supported very well, and there are still plenty of users going back to IE5.5 or so. I would recommend a different approach.
While I don't remember exactly where I learned it, I can give you the code I have on my website.
HTML Code that goes before your element:
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
HTML Code that comes after your element
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background: #000; margin:0 4px;}
.b2 {height:1px; background: #fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 2px;}
.b3 {height:1px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
.b4 {height:2px; background: #fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 0px;}
The above CSS code, the #000 is going to be your border color. The #FFF is going to be
the color of your content box.
You will want to have no top and no bottom border on your content block, but then set the left and right border to be 1px and then the color you want the border to be.
Depending on your current implementation this may seem somewhat not as nice looking, and feel free to add more b tags applying the same logic to get a bigger radius. If you would like a larger radius and can't figure it out, just let me know and I'll extend this to be larger.
One final note, depending on where you are placing these you may have to tweek the margin settings a bit.
Check this site: http://border-radius.com/ it generats css for WebKit, Gecko, CSS3.
Example:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
The corner radius issue of IE gonna solve.
http://kbala.com/ie-9-supports-corner-radius/
Related
I've got a problem regarding CSS(3) borders.
I'm trying to transform an input text field giving it U shaped borders. The left and right borders should have 50% of the height.
This means that the top-left, top-right and top borders should be transparent.
The hard part are the following requirements:
It shouldn't be solved with overlapping elements to mask the top part (so additional elements and pseudo elements like :before and :after aren't a solution
It should be in pure CSS (no JavaScript libraries)
The hight should be 50% of the height
I tried to solve it with a combination of border-image and linear gradients, without success
Does someone has a solution for this problem?
Thanks!
P.s. Sorry for not posting example images, but Stackoverflow wouldn't let me...
this is something that look like a U, with pure css only
DEMO
div{
height:100px;
width:100px;
border:1px solid black;
border-top: 0px;
border-radius: 0px 0px 45px 45px;
}
that's what i understood from your question, if it's not what you want enlighten me more
maybe these is what you need
more percent in radius it will be more bigger circle
depend what you prefer
div{
height:90%;
width:90%;
border:1px solid black;
border-top: 0px;
padding:2% 8% 20% 8%;
border-radius: 0px 0px 50% 50%;
}
<div>The Roman and Han empires saw an exchange of trade goods, information, and occasional travelers, as did the later Eastern Roman Empire and various Chinese dynasties. These empires inched progressively closer in the course of the Roman expansion into the ancient Near East and simultaneous Han Chinese military incursions into Central Asia. Mutual awareness remained low and firm knowledge about each other was limited. Only a few attempts at direct contact are known from records. Several alleged Roman emissaries to China were recorded by ancient Chinese historians. The indirect exchange of goods along the Silk Road and sea routes included Chinese silk, Roman glassware (example pictured) and high-quality cloth. Roman coins minted since the 1st century AD have been found in China. A coin of Maximian and medallions from the reigns of Antoninus Pius and Marcus Aurelius were found in Vietnam. Roman glasswares and silverwares have been discovered at Chinese archaeological sites dated to the Han period. Roman coins and glass beads have also been found in Japan.</div>
You can use border-bottom-left-radius: 50%; and border-bottom-right-radius: 50%; on a div to create a u-shape.
An example:
HTML
<div class="u-shape"></div>
CSS
.u-shape {
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 300px;
width: 50px;
}
And if you want to add a border to it to create the U shape, just give borders to the right, left, and bottom sides, like so:
CSS
.u-shape {
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
Whoops sorry guys,
A simple
border-bottom: 1px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
already did the trick when having your left, right and top borders transparent.
Still, thanks for the quick response!
I used the CSS border radius to curve a dotted border. It looks great in every browser except firefox where only the corners have a solid curve.
Thanks in advance
Some years ago this was a bug of FireFox as far as I remember. Not sure how it's now.
Show us your CSS please. Maybe you have to use browser specific CSS like this:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
Also there can be some dependency of what HTML version you use. HTML 5 hope :)
That's the way Firefox renders it.
There is no solution for this.
http://jsfiddle.net/437sp/
.border {
width:200px;
height: 50px;
border:5px dotted green;
border-radius:10px;
}
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
I have a problem with partially rounded corners. See the first working example for most browsers:
.box {
display: block;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
You can see that only bottom right corner should be rounded. Natural choice would be adding a border-radius.htc hack inside a conditional IE statement:
.box {
border-bottom-right-radius: 20px;
behavior:url(border-radius.htc);
}
This is not working because border-radius.htc file is only accessing normal border-radius value (this.currentStyle['border-radius']). VML used by the hack is roundrect which only supports one percentage value for arcsize.
So I was wondering if there is any other way around the problem by using some other VML elements?
Another problem is that htc-file doesnt's support borders but that can be fixed with VML's stroked attribute. Nifty corners for example doesn't work well with corners at all.
I was able to get it to work with border-radius: 0 0 10px 10px; and htc from http://css3pie.com/
The other solution: border-bottom-right-radius:10px; not to make the CPU calculate unneeded border roundings