I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work well. The first work well on other browsers.
What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype.
Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting
[for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0] as a selector won't work either.
Related
I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
I have created a custom class for some sliders.In chrome everything is working fine.See image below:
Chrome
My problem though is that on internet explorer i get this:
Now here is my css:
input[type="range"].slider-black::-ms-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
input[type="range"].slider-black::-webkit-slider-thumb{
height:40px;
width:40px;
border-radius:100px;
background:rgba(0,0,0,0.7);
border:2px solid silver;
box-shadow:0 0 4px 2px rgba(1,1,1,0.8);
}
Is there any way to do my ::-ms-thumb look exactly the same as it is on chrome?
The trick is to apply a margin, half the width of thumb-button, in the ::-ms-track.here's an online demo
May I have a little help with styling a select box with a nice looking arrow image? I have tried several combinations but cannot get the default arrow hidden while displaying the .png one.
This is what I need help with:
Here is the CSS:
ul > li.sel_con
{
float:none;
list-style:none;
width:215px;
border:1px solid #cfcfcf;
height:auto;
border-radius:5px;
background-color:#FFF;
-moz-box-shadow: inset 0 0 5px #CCC;
-webkit-box-shadow: inset 0 0 5px #CCC;
box-shadow: inset 0 0 5px #CCC;
padding:6px 0 6px 02px;
position:relative;
z-index:0;
behavior: url(pie/PIE.htc);
}
ul > li > select
{
width:207px;
border:none;
background-color:transparent;
outline:none;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
}
Here is a fiddle of the current CSS and HTML, any suggestions will be appreciated:
http://jsfiddle.net/pazzesco/c0qgggab/1/
ul > li > select
{
width:207px;
border:none;
background-color:transparent;
outline:none;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
-webkit-appearance: none;
-moz-appearance:none;
}
change these code, you will be achieve it.
Here is a JSFiddle.
Ok, finally this is what I did, tested and works in IE, Mozilla and Chrome, as well as Android.
Providing only the changed code:
ul > li > select
{
width:110%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
background-position: 87%;
}
and also
ul > li.sel_con
{
overflow:hidden;
}
I make a simple selector like this:
when I make the float:right, I got this:
please see the red circle to know what is the problem.
css
/* The CSS */
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:right;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
label {position:relative}
label:after {
content:'<>';
font:11px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:6px; top:0px;
width:20px; height:20px;
background:#f8f8f8;
position:absolute;
pointer-events:none;
display:block;
}
the float:right that I changed, and that is making the problem, exist in the select in the css
Its a little tricky to identify without more HTML/CSS but it seems to be because the selection box and the element circled in red are two seperate elements and you've only floated one.
What you may want to do is wrap both in a div and apply float:right to this. This will mean that everything within the div is floated (both the selection box and the element encircled)
I have a CSS style defined for all inputs with type text on the page. I'm using the Spectrum Color Chooser on part of my page, and this is implemented onto the page using
<input type="text" class="basic" />
I'm trying to override the "global" styling that I've applied to all inputs of type text using the following, but it's not working:
input[type=text]:not([class=basic]), select {
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
Is there a way to override this?
I really fail to see the issue here, isn't this the point of CSS specificity? http://jsfiddle.net/calder12/GBH8b/
input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}
input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}
The CSS code posted works, affecting fields not in the class, on supporting browsers (including modern browsers in general, but excluding IE 8 an older).
It does not affect fields that are in the class, obviously. But replacing an existing rule that applies to all input fields by this more restricted rule would make a difference.
Just Declare !important as it will override the main.
input[type=text]:not([class=basic]), select {
height:28px !important;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}