CSS cursor:cell property not working safari browser. i have created simple div tag and set cursor as cell, but it is not working in safari browser.
#cursor{
height:200px;
width:200px;
border:1px solid black;
cursor:cell;
}
<div id="cursor"></div>
cursor: cell; isn't supported in your version of Safari.
See here - http://caniuse.com/#search=cursor
Related
Microsoft Edge Browser is not showing table borders for our website.
Our site has been using the same HTML/CSS code for years.
The table borders show up correctly in Internet Explorer, Google Chrome, and Firefox browsers.
Here is a sample of a page that is failing in EDGE.
http://www.nycourts.gov/forms/familycourt/general.shtml
The CSS code we are using is:
table.forms {
border-color:#999999;
border-width:2px;
border-collapse:collapse;
width:100%;
padding:0px;
margin:0px;
}
th.forms {
padding:5px;
border-color:#999999;
border-width:1px;
background-color:#FF9;
}
td.forms {
padding:5px;
border-color:#999999;
border-width:1px;
background-color:#FFC;
}
That's strange and shouldn't happen, but I think I have a solution for you:
Both your table and the cells have CSS rules which contain a border-width and a border-color, but no border-style.
If you add border-style: solid to these rules, the borders will also show in Edge.
I am trying to create a semi-responsive header for a website i am building, however i am running into an overflow issue with IE and Firefox. Chrome, however works perfectly.
I have created a JSFIDDLE to demonstrate what i mean.
In chrome, you should see something like this:
However in the same Jsfiddle on Firefox and Chrome, there is no red border on the bottom like this:
One way i tried to fix this was to change my css to this:
.header .header-image {
position: absolute;
overflow: hidden;
top:0;
bottom:1px;
left:0;
right:0;
}
This worked perfectly, BUT left a white space on Google Chrome (above the border and below the image)
What is causing this and how can I fix it and still get my desired effect?
In order to show the red border, just change your header declaration for the .header to be like this one:
.header {
min-width: 1100px;
position:relative;
overflow:hidden;
width: 100%;
height:350px;
border-bottom: 1px solid #FF0000;
}
As you can see I've deleted the "display: table;" declaration and it works fine.
I think it may have something to do with prefixes for Chrome and Firefox.
an example of a prefix is:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
I noticed that css border-bottom property does not work in Chrome.
So far I've checked on IE 10 and Mozilla. Works fine on these browsers. It works on Chrome when I'm not using full screen though.
#sync2 .item{
background: transparent;
color: #fff;
text-align: center;
cursor: pointer;
width:25%;
margin-right:auto;
margin-left:auto;
border-bottom:1px solid white;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
Try adding the following line all the way at the top of your html code:
<!DOCTYPE html>
Edit:
It's likely the same bug as the one documented here.
I also find that issue in chrome and opera i resolved it like This
first you set all the border
border:1px solid white;
and next you remove the top , left and right border
border-left:0px;
border-right:0px;
border-top:0px;
I am trying to put a border around it, but i can't. Here is what i have as far as CSS:
body{ margin:1em; }
body *{ font-family: RussellSquare}
body{background-color: #363636;}
input[type=number]{
font-size:1em;
width:2.5em;
padding:3px;
margin:0;
border-radius:3px;
border: 1px solid #000;
text-align:center;
}
input[type=number]:focus{
outline:none;
}
It works just fine. Try it yourself on different browsers here.
Short explanation would be:
border is CSS property that is supported on all major browsers.
border-radius is CSS3 property that runs on all modern browsers. IE 6/7/8 is not one of them.
In case you want to know more about Internet Explorer support of border-radius
Read: Support for "border-radius" in IE
I've merrily hacking away at this website, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I've just discovered they don't.
In FF and IE9 I see this:
In Safari/Chrome I see this:
Here's the HTML:
<div class="container">
<div>
<img src="static/images/image1.jpg" alt="" />
</div>
Here's the CSS:
.container {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
What am I doing wrong? :(
UPDATE
Please see a working example of the problem I'm having: http://jsfiddle.net/jAsnU/3 Thanks.
try:
.container img {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
Try adding "overflow:hidden;" to the style of the div. I made a quick test page up at jsfiddle and it seemed to work (tested it in Chrome, Safari and FireFox): http://jsfiddle.net/wabw8/
You might want to try to set the border radius on .container div img.
I think you need to specify a border.
So, something like this:
border:1px solid blue; //whatever blue you are using.
It looks as though FF and IE are giving you the rounded border... but as a blank item that is cutting off the image.