In my custom webpart I am using few buttons and would like to make their corners rounded.
Below is one of my button in the ascx file:
<style type="text/css">
{
.BtnStyle
{
border: thin ridge #FF0000;
background-color: #C0C0C0;
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #FF0000;
border-top-left-radius: 10px 5px; --- did not work
border-bottom-right-radius: 10% 5%; --did not work
border-top-right-radius: 10px; -- did not work
-moz-border-radius: 15px; --- did not work
-webkit-border-radius: 15px; --- did not work
border-radius: 15px; --- did not work and gives an error saying not a valid CSS property
}
}
<table width="500px">
<tr>
<td align="right" >
<table width="60%">
<tr>
<td valign="middle" align="right">
<asp:Button ID="bttn1" runat="server" onclick="bttn1_Click"
Text="Delete" CssClass="BtnStyle" />
</td>
Nothing worked. Please provide me CSS code that helps me making the corners rounded.
The correct property should be:
border-radius:15px;
You can drop the vendor prefixes, as all modern browsers accepts the standard now anyway. I don't know why it doesn't work in your case, but I would check the output to see if the class is there or the style is dropped.
Your editor doesn't recognize CSS3 properties, which is why it's marked as invalid. That doesn't mean it's actually invalid, as modern browsers will parse it just fine.
Also bear in mind that any IE version below 9 doesn't support border-radius. You can use http://css3pie.com/ to make IE7 and IE8 support it, but I think it's better to leave it out and reserve the fancy stuff for the modern browsers, unless the client demands it.
EDIT: You have too many curly brackets. Remove the first and last one. Also, your style tag is not closed.
Which browser are you using? Border-radius is not supported on IE versions before ie9 as this tag is considered an advanced CSS property.
Related
I have modified an email signature for the company that i'm working with, everything looked great when i tested it.
The things is that i did code on a mac, and when my client send a mail to a windows user, there is a small part of that signature that does not apply my styles options
Here's my code :
<tr>
<td style="width: 167px; padding: 0px 13px 8px 30px; border:none;" class="">
<span style="font-family: Verdana, Arial, sans-serif; padding-top: 5px; font-size: 9pt; margin-right: 10px; color: rgb(119, 119, 119); vertical-align: top;" >partner of</span>
<a href="link" title="brand website link" style="color: rgb(4, 180, 134); text-decoration: none;" class="">
<img moz-do-not-send="false" width="35%" src="http://www.website.com/wp-content/themes/brand/images/logo-inner#2x.png" alt="Logo brand" style="padding: 10px; border-radius: 5px; background-color:#153754; border: 0px;" class="">
</a>
</td>
</tr>
This code already works with another image on the top of the signature so i assume it must come from my styling ?
Which is suppose to do this : right behavior of the style
But this is the behavior i get on Windows :wrong behavior of the style
I can't find anything anywhere, so if you have an explanation, i'd be glad to hear it !
Thank you all !
The background-color isn't working because you're applying it to the image. Outlook 2007-2016 does not support styling ALT. Apply the background color to the actual table cell for the image and it will work.
No image is loading because YOU POSTED A DUMMY LINK TO AN IMAGE. If you're going to come here asking for help, post your actual code. I took the time to test your code to determine the best way to help you. Don't make us work harder just to help you. That's rude.
Outlook has partial buggy support for Padding:
https://www.campaignmonitor.com/css/box-model/padding/
Outlook has partial buggy support for background colors:
https://www.campaignmonitor.com/css/color-background/background-color/
My suggestion is to create a table with two cells. Color the one with the image using bgcolor="#ff0000" or whatever color you wish. That will give you a reliable background color. Apply your font styles to the image style which will change the font for the ALT if an image doesn't load. Use cellpadding to give yourself the padding you want with Outlook.
Good luck.
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I have the following ASP.Net code
...
<div style="width: 40%; float: left; margin-left: 15px">
<b>County:</b>
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
</asp:ComboBox>
<br />
...
The problem: This div contains many combobox's and they are not showing as expected, they all have EPSCombo class. and when I debug the CSS I find that it is being overridden, here is the output from FireBug
My EPSCombo style is as follows (overriding the default AjaxToolkit CSS)
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
border: solid 1px #7F9DB9;
border-right: 0px none;
padding: 1px 0px 0px 5px;
font-size: 13px;
height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
margin: 0;
padding: 0;
background-image: url(../images/windows-arrow.gif);
background-position: top left;
border: 0px none;
height: 21px;
width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
And the CSS file containing EPSCombo is the last one included in the Master page.
Question: It might had been a while since I did web development, but if I decide the CSS class for a control shouldnt that have the highest priority and should override everything else, correct? If so, then why is my combobox style (Height, Width, margin, and padding) is being overridden?? I dont have any other style class that set the height and width for those values shown in Firebug.
Update after Loki's answer I thought I should add this, adding !important to these attributes would solve the problem, but I want to get to the root cause of this and see where things went wrong.
Your ComboBox may be inheriting it's styling from the <div> it is contained in, or from a div higher than that. Since you have not specified a 'class' or 'ID' attribute for the div that it is contained within, that div may be retrieving style from your CSS file if you have something like:
div
{
height: 21px;
margin: 0px;
padding: 0px;
width: 21px;
}
To force your ComboBox to take independent styling though you may use the asp style attribute like so:
<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0"
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>
That should be the highest priority over any other styling that may be interfering in your application. Although considered improper programming practice it may help you narrow down the issue.
Cheers, Eric
EDIT I should also mention that your CSS code is interpreted in order from the most specific to least specific tag definitions. Ex, div.menu is more specific than div, this may be occurring somewhere else in your style-sheet.
This is also a good article to look at describing inheritance. Hope this helps!
A quick fix - add !important flags to your stylesheet. They'll have higher priority over everything else, unless there are other flags defining the very same property of the very same element
I am using a link tag styled to look like a button in my email . The css for the tag is as follows.
Submit
a.submit{
background: none repeat scroll 0 0 #FF9900;
border: 1px solid #FF9900;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
The link style works everywhere except in outlook . Where only the text gets the background color
I noticed the same issue in the google+ email too. Their buttons show the same css styling problem in outlook
A bit of a work around the padding issue in Outlook, you can use a border with the same color as the background to create the padding for the button. For example:
<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>
This would only work for basic button styles.
http://jsbin.com/pohidedayo/edit?html,output
EDITED:
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
See CSS Support in Mail Clients - The Ultimate Guide
In the above link you can see css background property is not supported in outlook so you should use background-color which is supported in outlook.
As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution really well.
I managed to create an HTML table-based button that will work in almost all major email clients.
Here is the HTML for your reference:
<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
<tr>
<td bgcolor="#c62228" valign="middle" align="center" width="174">
<div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
MY BUTTON
</div>
</td>
</tr>
</table>
Hope this helps!
You havent assigned a class to your <a> tag, but if it still doesnt work its because certain email services dont allow certain CSS tags, check here for more info: http://www.campaignmonitor.com/css/
I have a list of percentages that range from 0% through to 200%.
Is there a way to style those numbers depending on their value i.e. make numbers 0% - 100% be green and numbers 101% > red?
Please note, I don't have access to the HTML for this, just CSS.
Thanks in advance,
Tom Perkins
Edit:
The HTML in question reads:
<td class="HtmlGridCell" colspan="5" align="Left"> </td>
<td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>
And the CSS reads:
#-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") {
.progress:after {
content: attr(title);
font-size: 14px;
position: relative;
left: 122px;
top: -27px;
float: left;
color: #666;
background-color: #efefef;
-moz-border-radius: 4px;
padding: 5px;
border: 1px solid #cfcfcf;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
Hope that helps.
If you could set the percentages <100% to start with a 0 like 099% , You could use the attr starts with, and attr equals selector. Works in modern browsers and ie 7 +
.progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/
.progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */
Alternatively you could make a selector for all 200 odd variations you have , which is quite long winded
Since, there is evaluation of values involved, It can not be done with CSS.
But, Javascript may do what you are looking for.
I am also not convinced that there is no possibility by using only CSS at the moment...I would suggest defining two CSS classes "green" and "red" (or corresponding) and making a small evaluation in JavaScript or PHP to assign the classes to the elements...
Sorry, but this needs access to HTML in any kind.
This really depends on the kind and structure of HTML elements you'd want to select. If you have only <span> or <td> elements without any kind of semantic structure it won't work.
But if you happen to have attributes like title, class, etc you could do sth. like this:
span[attributeName="attributeValue"] {color: #FF0000}