I am making a banner where people can upload an image.
Before the upload it you see the image. With just a standard html code
<div id="box"><img src="blah blah" /></div>
The CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.
Example:
This is Chrome and Firefox. You can see the image will fit with the screen and got a nice border-radius on the top.
This is Safari. You see that the image dont have a border-radius on the top. I dont know the problem.
For that i also tried to use:
-webkit-
But that also didnt work. Anybody know how to fix that for safari?
please Update Below css and Check .....And make necessary changes as per your requirmnet..
hope this will solve your problem
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D9D9D9;
}
Please Mark answer if your problem is solved...
This is all you need:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}
Keep it simple. :-)
Related
I have a problem with my parallax scrolling website. I need to create a fixed header at the top of the site, but it wont remain "fixed".
Link to full code here:
http://jsfiddle.net/ressy0101/sx4ukc1c/5/
#header{
position: fixed;
background-color: black;
height: 50px;
width: 100%;
z-index: 9999;
color:white;
text-align:center;
font-size:40px;
}
This is working for me, hope it will resolve your issue.
change position:sticky;
& add
top:0px;
i.e
#header{
top:0px;
position:sticky;
}
I have the following scenario below-
HTML
<ul>
<li>Messi</li>
<li>Ronaldo</li>
<li>Neymar</li>
<li>Fabregas</li>
<li>Rooney</li>
<li>Bale</li>
<li>Ozil</li>
<li>Gerrard</li>
<li>Torres</li>
</ul>
CSS
ul{
list-style-type: none;
max-height: 65px;
outline:none;
overflow: auto;
width:200px;
}
li{
height: 20px;
padding: 10px 0;
text-indent: 10px;
width: 200px;
}
Now when i open this in Safari 7.0 (Mavericks) & use Voice Over Reader, first few items the black outline comes around the <li> items but after that the Voice Over reads the items but the black outline doesn't come on them. Also the items are hidden below the overflow clipped region.
This works fine in Safari 6.0.
I believe it has got to do something with the overflow property.
Any explanation & solution for this? Help is appreciated.
Thanks.
I'm try to use border-radius on a website, but firefox keeps doing this:
Firefox CSS.
Everything is good except the top left corner.
This is my css for the border-radius:
border-radius:10px 0px 0px 0px;
border:1px solid #FFF;
border-bottom:2px solid #000;
width:400px;
It works fine on any other browser but not on firefox 24.
Is there a way to fix/work around this with only css?
Try adding: the background-clip property:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';