Does anybody knows website that will automaticaly fix my css for more browser compatibility
For example: if in my css is written
div
{
border-radius: 10px;
}
Convert to
div
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
You can use vendor prefix JS for this http://leaverou.github.com/prefixfree/
Related
I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
I want to add rounded corners to my div in firefox.
Ive tried:
-moz-border-radius: 20px;
and its not working.
Pls, does anyone have any alternative solutions?
Thanks
newer versions of firefox support simply
border-radius: 20px;
Did you try that?
Otherwise I'll need to see some more of your css.
Put all the below three in your css
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Some older versions use -moz and -webkit , but recent browser releases adopt CSS3 way of styling.
source : http://www.the-art-of-web.com/css/border-radius/
As #vidiya mentioned
always make sure you cover all your basis:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
i'd suggest looking at LESS or SASS so that you can then use mixins (functions within CSS)
//From LESS
.rounded (#round:"4px") {
-moz-border-radius: #round;
-webkit-border-radius: #round;
border-radius: #round;
}
I have a created a cool theme for checkboxes which renders them as iOS-5 style buttons with animation, all in CSS, but I have this annoying problem with the background not being clipped on webkit for the rounded corners. I know this bug is because clipping container has position which causes the thing, but I can't think of any way to fix this..
Does someone knows how to deal with this issue?
I have dug into this bug didn't find anything useful. 10x!
CHECK THE DEMO (works great on Firefox)
Adding this does work:
.togglebox label::before {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.togglebox label::after {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
I'd also make a small modification to the 'checked' state:
.togglebox input:checked ~ label { left: -61px }
But the problem is that the check box becomes visible then. Adding something simple like:
#chkbx {position: absolute; left: 10px;}
should solve that problem.
Here's the jsfiddle: http://jsfiddle.net/XCKau/2/
I advise you to not put a display: none; on the input! Just to be sure. - Just tested it: when it's NOT in display: none; people using IE8 can still use the check box. If you do use it, they wouldn't be able to 'check' anything.
This is better than before... But still not perfect.
http://jsfiddle.net/XCKau/1/
Add a border-radius to the label:before and label:after and hide the checkbox:
.togglebox label::before{
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.togglebox label::after{
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
input[type=checkbox]{
visibility:hidden;
}
I am trying to use CSS3Pie in my asp.net mvc 3.0 application
But in IE versions lover than 9 the border just disappeared completely.
here is my css
.box
{
margin:auto;
display:table;
text-align:center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #86b0ca;
margin:10px 0 10px 0;
behavior: url("/Scripts/htc/PIE.htc"); /*if i remove that the border not disappeared but square in old IE versions*/
}
Add position:relative to this box, then go and read the documentation!
http://css3pie.com/documentation/known-issues/ has a section explaining why you need to do this, I'm not sure why it's not in the getting started guide.
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)