Here's my HTML code.
<table cellspacing="0" class="assets_table">
<tbody>
<tr class="table_header"><td>ID</td><td>Title</td><td>Regarding</td><td>Status</td><td>Date</td></tr>
<tr><td>9</td><td>Testing</td><td>hijacked account</td><td></td><td> 4 Jan, 2012</td></tr></tbody>
</table>
and here's the CSS for it.
.assets_table{width:100%;border-radius:4px 4px 0 0;border:1px solid #ccc;overflow:hidden}
.assets_table .table_header{background:grey;height:30px;font-weight:bold;padding:0;border-top:1px solid #f9f9f9;}
.assets_table td {padding:5px 10px}
.assets_table tr {border-top:1px solid #ddd;padding:0 10px;}
But no paddings or borders or border-radius's practicably nothing will work on the tr's. Here is what I get. http://pastehtml.com/view/bjmptfulh.html
I have tried everything I can think of but nothing works? I tried display:table and display:block but it just kinda messes up the table. Any help here?
I think you need to apply the css to the td elements, as explained in this post: Space between two rows in a table?.
Otherwise your code looks fine.
If you view your code in Chrome, it actually works with the rounded corners on your table as well as all yoru other styles. If you are not using Chrome or a webkit browser (safari, chrome) then you will need to add other border-radius tags.
For mozilla (Firefox) you will need to add -moz-border-radius: 4px 4px 0 0;
For Opera you will need to add -o-border-radius: 4px 4px 0 0;
I also add -khtml-border-radius: 4px 4px 0 0; for some of the older versions of Opera and browsers that use the Konqueror web browser.
You will also need to check the syntax of these different forms of the styles as not everything uses the identical markup. For instance, -moz- uses -mox-border-radius-topright to change the top right corner while -webkit- uses -webkit-border-top-left-radius to adjust just that one corner.
Here is a good article on border radius and some of these new CSS3 tags. Thsi article is from 2009 so some things have already changed:
CSS Tricks border radius example
Related
Please check this fiddle
input {
border: 1px solid blue;
padding: 4px;
border-radius: 5px;
background: transparent;
}
It looks good in any browsers other than IE 11.
If you test it in IE11 you'll see that the border is broken (white pixels) at the beginning (top and bottom) just after rounded corners, like this:
What do I miss in my style declaration?
I am able to replicate this issue in IE 11 inside virtual box. It works correctly in Edge.
This is the only solution I could find to fix this issue:
Go to device manager and disable the default Virtual box display adaptor.
I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:
border-radius: 4px;
As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!
Try adding some of the following:
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
Be sure that these items are in the correct css class you are trying to apply to the form element.
I recommend you to define all border properties. Here is an example;
input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}
Here is a working Live Demo, running smooth in my IE9.
Note: Here is a list of browsers supporting CSS3 and others will not.
YOU have a website for create border-radius css code
border-radius : 4px; // for new ie, opera, chrome, firefox
is a new W3C specification for new browser,
if you can use border radius for old browser, you can use
-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px; // for old firefox
-o-border-radius : 4px; // for old opera version
for old ie version, you want to use CSS3PIE.
I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.
We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons.
However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.
I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.
What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.
Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:
.mybutton {
border: outset #EFEFEF 1px;
}
I am not sure how to call this kind of feature but my question is, is there a way to set the color of the following effect:
Using just border doesn't make it.
Use the outline property:
input:focus { outline: 2px orange solid }
outline works in all modern browsers except for IE < 8.
The :focus pseudo-class works in all modern browsers except IE - you would have to use a JavaScript workaround for that as shown here.
However, you will not be able to duplicate the desired effect (which seems to be Chrome's default behaviour when focusing on a field?) entirely because outline doesn't have a radius property. Maybe #Sarfraz' suggestion is a suitable workaround for that.
You can use this css:
input:focus,textarea:focus,select:focus{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
Check out the demo
off course you can change the color as you like.
Is it possible to bring curve edges to divs using html and css only...without using images.
Not in a way that's compatible cross browser (in particular, IE does not yet support it). In CSS 3, you can use border-radius, which Safari and Firefox support currently as -webkit-border-radius and -moz-border-radius. For example
<div style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
padding: 10px;">
This is a sample div.
</div>
Yes, it is possible, but it is a CSS 3 feature that may not work on all browsers (or not the same in all browsers). See this article for an example.
I assume you mean border-radius. Yes, it is possible in proper browsers (not IE) with border-radius. As it's a CSS3 property, it's not yet properly implemented and you need to do some trickery to make it work:
-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */
Take a look at http://www.css3.info/preview/rounded-border/ for more info.
Yeah, it, certainly, is technically possible (the best kind of possible, I guess), here is an example (be sure to check the source, it really is a cool technique).