text-decoration solid not supported in IE 10 - css

this code works Choreme and Firefox . But not working on İE 10 . Last td in table cannot take affect. It must turn normal.
.gridview tr
{
font-size: 20px;
border: solid 1px #c1c1c1;
padding-bottom: 3px;
padding-top: 3px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #EEEEEE;
}
.noadres td {
text-decoration:line-through;
font-style:italic;
background-color:#f5eded;
}
.noadres td.etkabone {
text-decoration:solid;
font-style:normal;
}
html
<table class="gridview">
<tr class="noadres">
<td>HELLO</td>
<td>MY</td>
<td class="etkabone" >NAME</td>
</tr>
</table>
https://jsfiddle.net/dwc7kjmo/

In CSS2 the text-decoration property was a regular property with the syntax:
none | [ underline || overline || line-through || blink ] | inherit
In the CSS Text Decoration Module Level 3 : the text-decoration property is now a shorthand property with syntax:
<'text-decoration-line'> || <'text-decoration-style'> ||
<'text-decoration-color'>
where the values for <'text-decoration-style'> are:
solid | double | dotted | dashed | wavy
So now you can see why text-decoration:solid; works in Chrome and Firefox, because according to the newer spec - it is perfectly legal code.
Here is the browser support for the new text-decoration properties.
Notice that IE doesn't support the new syntax.
So, like others have mentioned, you should use text-decoration:none for greater browser support.

Change CSS to:
.noadres td.etkabone {
text-decoration:none;
font-style:normal;
}
solid is not valid for IE.
p.s. If you select inspect element you will see solid has a red underline.

The problem is here:
.noadres td.etkabone {
text-decoration:solid; /*This is invalid value for this property for IE*/
font-style:normal;
}
solid is the by default value of this property but IE does not support it.
You might want the normal font having no strike-through. Please change the above to the following:
.noadres td.etkabone {
text-decoration:none;
font-style:normal;
}

Related

Underline single letter in an input placeholder

One can apply CSS styling to a placeholder, such as for Firefox:
::-moz-placeholder { text-decoration: underline; }
However, what I would like to do is underline a single letter in a placeholder, for the purpose of hinting at a hotkey for the user to press (similar to Windows in file menus), such as making the F in First Name underlined below:
<input type='text' placeholder='First Name' />
Is there any way to do this?
I think you can achieve this with CSS only in google chrome. For example:
You can select the first letter of placeholder
::-webkit-input-placeholder::first-letter {
color: red;
text-decoration:underline;
}
Result:
The text-decoration does not render when set with :first-letter in Chrome (Version 39.0.2171.71). So we can achieve the underline with border-bottom.
::-webkit-input-placeholder::first-letter {
color: red;
border-bottom: 1px solid red;
}
Result:
UPDATE: text-decoration works fine on Chrome 41.0.2235.0 Canary.
Here is the DEMO: http://codepen.io/MizR/pen/myeJZe
Unfortunately, this solution doesn't work on Firefox. :(
Update 2: No longer works. :(
You can use an absolute-positioned u tag, being careful to use the same font and padding as the input.
You'll need to hide the u when the input has content:
document.getElementById('iFirstName').onkeyup= function() {
var u= document.getElementById('uFirstName');
u.style.display= this.value>'' ? 'none':'inline';
};
u {
position: absolute;
font: 10pt verdana;
padding: 4px;
}
input {
padding: 3px;
font: 10pt verdana;
border: 1px solid #ddd;
}
<u id="uFirstName">F</u>
<input id="iFirstName" type='text' placeholder='First Name' />
If you are comfortable using contenteditable instead of input, you can try:
http://jsfiddle.net/lotusgodkk/GCu2D/473/
HTML:
<div contenteditable="true" data-ph="First Name">Hello</div>
CSS:
div {/*For styling div similar to input*/
width:300px;
height:24px;
border:1px solid grey;
}
div[contentEditable=true]:empty:not(:focus):before {
content:attr(data-ph);
color:grey;
}
div::first-letter {
text-decoration:underline;
}

How do I create a white background for my text area (change it from a different colour)?

My website - http://www.automated-stores.com has the strange feature of a blue-ish background for text areas, seen more specifically here: http://www.automated-stores.com/vending-machines-business-electronics-cosmetics-perfume
I didn't code the website, but I suppose that to change this it would have to be in the stylesheet.css, does anyone know what code to enter/change?
I thought it would be this:
input,textarea,select {
padding: 1px;
border: solid 1px #000000;
font-size: 10pt;
color:#000000;
background-color:#ffffff;
}
(the colours were different before) but I have changed it several times with no effect.
I looked through your source code and you need to find your style.css under your root and change this:
input,textarea,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
to this:
background-color:#ffffff;
Remember this will affect everything with the class of input, textarea, select. I used the chrome inspect and firebug lite tool to verify this and it worked. If you only want to effect text areas bg color do this:
input,select {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#224f5f;
}
textarea {
padding: 1px;
border: solid 1px #5c8593;
font-size: 10pt;
color:#42484d;
background-color:#ffffff;
}
The code in the question does it, provided that you insert it e.g. in a style element after the tag <link rel="stylesheet" href="style.css" type="text/css" />. The external style sheet sets the background color etc. in a simple manner, which can easily be overridden, provided that you place your code after that link tag.
If this does not appear to work, check, in a browser, the HTML source code of the page. It is possible that the server software does some modifications to your code or that your browser has got an old version of the page (Ctrl+F5 should help then).
your <textarea> have attribute <... class="textarea"... You could add this to your stylesheet
.textarea {
background-color: #FFFFFF;
}
The specific rules changing the color of the textarea on the page you gave (the second link) is in style.css line 44:
input, textarea, select {
background-color: #224F5F; // This is the blue background
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
If it is just textareas that you want to style but dont want to touch the formatting you can do one of two things:
Option 1
Keep CSS as it is and add this underneath:
textarea {
background-color:#FFFFFF !important;
}
I dont like doing this as it makes the CSS to rigid and lots of !important declarations makes managing the style very difficult.
Option 2
Change line 44 styling to:
input, textarea, select {
border: 1px solid #5C8593;
color: #42484D;
font-size: 10pt;
padding: 1px;
}
textarea {
background-color: #FFFFFF;
}
input, select {
background-color: #224F5F;
}
I'd recommend simply targeting the textareas and changing their background colour and giving them a border.
textarea {
background-color:#FFF;
border:1px solid #224f5f;
color:#000;
}

Firefox -moz-placeholder, not working

I can't get this placeholder to style correctly in Firefox 13.0.1
I have an input field with a placeholder:
<input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" />
I have this CSS:
.textFieldLarge{
width:400px;
height:50px;
line-height:50px;
padding-left:5px;
padding-right:5px;
background:none;
background-color:#FFF;
border:solid 1px #BBB;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#333;
}
.textFieldLarge::-webkit-input-placeholder, .textFieldLarge:-moz-placeholder{
font-style:italic;
color:#BBB;
}
This should style the text field #333 and the placeholder #BBB italic. I have this working with chrome and IE but can't figure FF out.
EDIT, FOUND THE PROBLEM THAT I APPLIED ::-webkit-input-placeholder AT THE SAME TIME
Still would appreciate a fix, but I doubt possible as it works fine when both are applied separately. Not a real issue any more but a little annoying.
If one part of a selector is invalid, then the whole selector will be invalidated.
Therefore, one needs to have two different rules for each of -moz- and -webkit-.
It's been a while since posting this question, but in addtition to Gerve's answer, one should use ::-moz-placeholder for Firefox 19+: http://mzl.la/15FPlx6 and can add support for IE10 with :-ms-input-placeholder. So the final code will look like that:
.textFieldLarge::-webkit-input-placeholder {
font-style:italic;
color:#BBB;
}
.textFieldLarge:-moz-placeholder {
font-style:italic;
color:#BBB;
}
.textFieldLarge::-moz-placeholder { /* Firefox 19+ */
font-style:italic;
color:#BBB;
}
.textFieldLarge:-ms-input-placeholder { /* IE10 */
font-style:italic;
color:#BBB;
}

CSS3 selectors not working in FF and Opera?

I'd like to style one span element generated by Rich faces:
<td class="rf-tb-itm" id="j_idt7:logoutLink_itm">
<span class="topmenulink" id="j_idt7:logoutLink">Logout</span>
</td>
I can't match for the whole id because the part before the semicolon can differ. For testing I wrote
span[id="j_idt7:logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
and it matches.
This matches too:
td > span {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
But why does not match this (in latest Firefox and Opera)
span[id*="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
or this?
span[id$="logoutLink"] {
padding:2pt 10pt !important;
border:1px solid transparent;
color:grey;
}
Any ideas?
I know what's going on. It's an RichFaces problem. The CSS EL Parser doesn't recognize CSS3. See the JBoss output:
08:54:18,235 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Error in attribute selector. Invalid token "*". Was expecting one of: <S>, "=", "]", "~=", "|=".
08:54:18,236 WARNING [org.richfaces.log.Resource] (http--0.0.0.0-8080-6) Problem parsing 'css/default.ecss' resource: Ignoring the whole rule.
It works when I use a "real" CSS file and not this EL CSS.

I am seeking help for CSS trick

I have a little CSS code as below:
input{
background-image:url(css_img/input_bg.gif);
padding:6px;
margin:1px;
width:250px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
font-variant:normal;
height:30px;
-moz-border-radius:3px 3px 3px 3px;
-moz-box-shadow:0 2px 3px #DDDDDD;
border:1px solid #aaa;
color:#333333;
}
But this code changes the style of all the <input type="..."/> tags. How can I change the style of just text fields <input type="text" name="name" />? I don't want to have to add classes to them.
Also is there any way to round the corner just using plain CSS (not using image) which diplays well in Internet Explorer.
Please help me...
Use an attribute selector:
input[type="text"] {
/* styles here */
}
Use an attribute selector:
input[type="text"] { styles here }
As Eric and Rikudo stated :
input[type="text"]
For the corners in ie use CSS3 PIE
You can also use :
input[type=text]
input[type^=te]
input[type$=ex]
input[type*=t]
Element input with attribute type which contains a value that is equal to, begins with, ends with or contains a certain value.
More info here

Resources