Rounded corners not working in IE9 - html

As far as I am aware, IE9 should have CSS support for rounded corners. I have apparently coded my page in such a way as this does not occur in IE9 though - although it displays correctly in Chrome and FF.
*I have edited CSS to reflect suggestions as per answer below - the problem is still occurring *
I need top and bottom left corners only to be rounded for the div that contains the site main navigation.
The 'Activate Now' buttons are also not working, in the hosting package display boxes.
Site link to view is http://activehost.co.nz
I've checked other questions - and the most common cause (using prefixes) is not something I am doing.
Relevant CSS for sections is below.
Navigation:
#main_nav {
margin: 0px 0px 10px 0px;
float: right;
height: 37px;
/*background:url(../img/nav_bg.png);
background-repeat: repeat-x;*/
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-radius: 20px 0px 0px 20px;
clear: right;
}
And the CSS for the 'Activate Now buttons:
.hosting_order {
position: absolute;
top: 148px;
border: none;
height: 35px !important;
background-color: #286e38;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#6dc067), to(#286e38));
background-image: -moz-linear-gradient(top, #6dc067, #286e38);
background-image: -ms-linear-gradient(top, #6dc067, #286e38);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dc067), color-stop(100%, #286e38));
background-image: -webkit-linear-gradient(top, #6dc067, #286e38);
background-image: -o-linear-gradient(top, #6dc067, #286e38);
background-image: linear-gradient(top, #6dc067, #286e38);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6dc067', endColorstr='#286e38', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
width: 120px;
padding: 0px 20px;
font-weight: bolder;
font-size: 1.1em;
border-radius:20px;
box-shadow: 2px 2px #888888;
}
The background image CSS is to produce a gradient effect - I wonder if that's the problem?

It's because you combine filter and border-radius for same element. Try to apply border-radius to one element, and filter to its child element instead.

see this question regarding the meta tag and some other possible issues/process to eliminate: IE9 border-radius

For IE9, you are correct it doesn't like the border radius and the filter combined. Here is what I followed and it worked perfectly in IE9, as well as all the other browsers.
https://github.com/bfintal/jQuery.IE9Gradius.js
Hope that helps!

You only need to define one number for your border radius if you're using "bottom-left" and so on. By specifying two numbers IE9 may not interpret it correctly.
If you use the following, the first number is the top-left, second is top-right, third is bottom-right, and fourth is bottom-left.
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
-0-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;

Making the border radius compatible to IE browsers, follow these steps:
Open Setting option in IE.
Go to compatibility and view setting.
Uncheck "Display intranet sites in Compatibility view " as well as uncheck "Use microsoft compatibility list".

Related

How to increase the size of icons in jqgrid?

How should I increase the size of icons(add,delete..) in jqgrid?I have written following code in ui.jqgrid.css
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon{float:left;margin: 2px; width:18px;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none
!important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}
Free jqGrid supports vector based Font Awesome icons as alternative to raster icons of jQuery UI. To use Font Awesome you need just include the CSS of Font Awesome and to add iconSet: "fontAwesome" option. For example, https://jsfiddle.net/OlegKi/9f9exg91/1/ uses the following simple code
$("#grid1").jqGrid({
colModel: [...],
iconSet: "fontAwesome",
...
});
which displays
If you want for example increase the size of navigator icons in 1.5 of the standard size you can just add CSS rule
.navtable .ui-pg-button {
font-size: 150%;
}
and get the navigator buttons
see https://jsfiddle.net/OlegKi/9f9exg91/2/. You can see that the navigator buttons are wrapped automatically. See the wiki article.
If you want in increase the size of all the buttons of the pager then you can use CSS rule
.ui-pg-table .ui-pg-button {
font-size: 150%;
}
alternatives. See https://jsfiddle.net/OlegKi/9f9exg91/3/, which displays
Free jqGrid supports additionally iconsOverText: true option, which allows to get the following look of icons:
see https://jsfiddle.net/OlegKi/9f9exg91/4/
In general you can customize the buttons in easy way like you need. For example you can go to some button generator page like this one create custom button and to copy the CSS styles to .ui-jqgrid .navtable .ui-pg-button. I did this and created the next demo https://jsfiddle.net/OlegKi/9f9exg91/6/, which displays the following navigator bars:
Below you can find the CSS rules used in the last demo:
.ui-jqgrid .navtable .ui-pg-button:not(.ui-state-hover) {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
-webkit-box-shadow: 3px 3px 7px #666666;
-moz-box-shadow: 3px 3px 7px #666666;
box-shadow: 3px 3px 7px #666666;
color: #ffffff;
font-size: 14px;
padding: 6px 6px 6px 6px;
border: solid #0089de 1px;
text-decoration: none;
}
.ui-jqgrid .navtable .ui-pg-button.ui-state-hover,
.ui-jqgrid .navtable .ui-pg-button:hover{
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
padding: 6px 6px 6px 6px;
font-size: 14px;
text-decoration: none;
}
I used additional pagerRightWidth: 100 option in the last demo to fix the right part of the pager and to provide more place for the navigator icons.
UPDATED: One can use top pager by usage of toppager: true instead of pager: true or to use both pagers. If one would replace .navtable in the above CSS rules to .ui-pg-table then the style will be applied to all buttons of the pager: https://jsfiddle.net/OlegKi/9f9exg91/9/
Your query is missing some valid information but you can always use zoom in your CSS over proper selectors.
Another possible solution is to increase the font-size - see the classes
.ui-jqgrid .ui-jqgrid-view
and increase the font size you want.
Since you use Guriddo jqGrid 5.2.1 you can get quick and professional response in our public forum

Two different gradients in one html button

What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)

IE9 display issue for gradient and rounded corners CSS

I made a CSS class that applies a gradient and rounded corners to a span element to act as a button. It seems to work in most browsers that I've tested, but IE9 is giving me some issues. As the class is now the rounded corners aren't working correctly. However if you look very close it seems like there are rounded corners underneath a layer that is not rounded (I think that's the best way to explain how it looks, forgive me if that doesn't make sense)
Anyway, by trial and error I messed with the class until I found that removing the 'display:inline-block;' property allows for the rounded corners to be displayed correctly, but as a result the gradient no longer works. Any ideas?
http://jsfiddle.net/jessikwa/wcgzkkgr/
The HTML:
<span class="action_button">Button</span>
The CSS:
.action_button
{
color: #FFFFFF;
font-size: 12px;
font-family: arial;
cursor: pointer;
text-decoration: none;
padding: 3px 5px;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid #f7a03b;
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #8b8b8b 0px 1px 4px;
-moz-box-shadow: #8b8b8b 0px 1px 4px;
box-shadow: #8b8b8b 0px 1px 4px;
background-color: #efbb7f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#efbb7f), to(#f88600));
background-image: -webkit-linear-gradient(top, #efbb7f, #f88600);
background-image: -moz-linear-gradient(top, #efbb7f, #f88600);
background-image: -ms-linear-gradient(top, #efbb7f, #f88600);
background-image: -o-linear-gradient(top, #efbb7f, #f88600);
background-image: linear-gradient(to bottom, #efbb7f, #f88600);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#efbb7f, endColorstr=#f88600);
}
Update: Further reading of other posts in StackOverflow gets me a bit closer, but still not quite right.
IE9 border-radius and background gradient bleeding
This post's answer suggestions using an image, which I would prefer to avoid. Another proposed answer of the thread puts a wrapper around the button with "overflow:hidden;", but this doesn't seem to be quite right, either.
http://jsfiddle.net/uu19uqg4/
you have forgot the "-" near webkit-border-radius
try this :
-webkit-border-radius: 3px;
this link can be usefull
Add the following in the head of the page.
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9" />
This will disable the compatibility mode in IE9. If it's due to compatibility issue then it will be solved.

Background-image with background-gradient

I'm trying to add a logo to one button that is styled with gradient, but the background-image "delete" the background color...
Here is the fiddle: http://jsfiddle.net/FDXy5/ and below is the current tet .css.
.rounded-orange-button {
text-align: center;
color: #FFFFFF;
display: inline-block;
border-radius: 2px;
line-height: 27px;
width: 200px;
position: relative;
background: #FF9100;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9100) to(#FA6800));
background: -webkit-linear-gradient(top, #FF9100, #FA6800);
background: -moz-linear-gradient(top, #FF9100, #FA6800);
background: -o-linear-gradient(top, #FF9100, #FA6800);
background: linear-gradient(to bottom, #FF9100, #FA6800);
-pie-background: linear-gradient(to bottom, #FF9100, #FA6800);
}
.logo-edit{
background-image: url('http://www.w3schools.com/cssref/smiley.gif');
background-repeat:no-repeat;
}
Thanks to help me :-)
The graident is actually a background image as well. Luckily you can, in modern browsers, have multiple background images.
Example:
background-image: url('http://www.w3schools.com/cssref/smiley.gif'), linear-gradient(to bottom, #FF9100, #FA6800);
And you also need to do the same for the vendor specific gradients.
jsFiddle
See this link for compatibility table: background-image MDN

How to maintain browser compatability with Gradient in css?

I am developing a website using html , css and javascript . The buttons display differently in every browser . Here are the screenshots for different browser of the same page :
Internet Explorer :
Firefox :
I actually intend it to display as it displays in firefox . Here Some of the css code i am using :
#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #60B842),
color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these to change the button colors */
#B58515 0%,
#DC9E1F 85%
);
/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
}
#button:hover{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #6DD14B),
color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these colors to change the mouse hover colors */
#E17100 0%,
#FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
}
There maybe some issues with using the gradient . Can someone suggest me any changes or another ways to code so that the webpage looks the same in different browsers ?
I usually use Colorzilla's Ultimate CSS Gradient Generator to generate cross browser CSS gradient code.
Apart from -webkit-gradient() and -moz-gradient() you also need to use the prefixes for IE and other browsers.
Example:
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Source
Read more here
Note that IE 9 and earlier do not support gradient.
What's happening is that IE ignores your gradient css completely. You have to add a 'filter' in order for the gradient to appear in IE.
This page will help you create a cross-browser gradient.
All browser Support gradient property
use this
background: -moz-linear-gradient(top, white, #1a82f7);/*Mozila*/
background: -o-linear-gradient(top, white, #1a82f7); /*opera*/
background: -webkit-linear-gradient(top, white, #1a82f7);/*Chrome and safari*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#1a82f7'); /*IE*/
Here is a set of CSS gradients that will be useful for you for cross-browser compatibility:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);