I have a div in my layout which has box-sizing property assigned to it with value border-box. It works good in other browsers but does not work in IE7. I have read that for fixed width elements, it works. The IE developer tool tells that box-sizing property is assigned correctly. The CSS code:
.item {
width:360px;
background:#FFFFFF;
border:0;
border-bottom:1px solid #DDDDDD;
padding:12px 24px;
margin-bottom:24px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
It breaks the layout.
Unfortunately IE7 doesn't support box-model: border-box and uses the W3C content box model instead. There are a couple of options here - use a polyfil or write specific IE7 rules in a conditional comment.
Related
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have many SELECT elements on a page, the problem is that in IE11 they have an outline which I try to remove it using CSS :
select{outline:none;}
It works fine as long as , it is the only style element! As soon as I add more style e.g background-color to SELECT, the outline:none does not work anymore!
It should work in IE and for SELECT element. However in other browser, there is no outline applied to element by default.
thanks in advance
By using a bit CSS you can get same style across all browser.
Check the DEMO.
select{
outline:none;
border:1px solid #E4E4E4;
padding:10px;
width:200px;
background: none repeat scroll 0 0 #F7F7F7;
}
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
I wanted to replace text on hover with css and though it didn't work, Google chrome ignored the entire :hover pseudo-class, while Mozilla firefox safely ignored content and continued to run the rest of the events
Html:
<li id="menuDebating">Debating</li>
Css:
#menuDebating a:hover{
content: "Public Speaking" !important;
color:red;
}
Fiddle: http://jsfiddle.net/FSyAv/
However I have read the css3 declaration and I know that content should not work for :hover, which isn't a big deal since implementation is easy with javascript.
But, I then looked at it further and tried using the a:hover::before psuedo-class and that's where it gets really strange
Html:
<li id="menuDebating">Debating</li>
Css:
#menuDebating a:hover::before{
content: "Public Speaking" !important;
color:red;
}
Fiddle: http://jsfiddle.net/FSyAv/1/
In Chrome, it flickers non-stop, Safari flickers, then stops for while and continues flickering, while Mozilla and Opera runs the event as intended
content can only be used with pseudo elements (before and after).
You can force it to "overwrite" the original word by setting its position to absolute:
Demo
ul li {
position:relative;
}
#menuDebating a:hover:before{
position:absolute;
top:0; left:0; right:0; bottom:0;
content: "Public Speaking";
color:red;
background:#FFF;
}
I added these css. But I can't get the placeholders/watermarks to have ellipsis. They do have the red font though.
input::-webkit-input-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
input:-moz-placeholder {
color: red !important;
max-width: 95% !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
overflow: hidden !important;
}
Since I am working for mobile, I want it to work in Safari.
Using the :placeholder-shown selector works well and will ensure any text input doesn't get hidden. Compatibility is pretty solid too.
input:placeholder-shown {
text-overflow: ellipsis;
}
<input placeholder="A Long Placeholder to demonstrate"></input>
YES
Method 1
Still supported on all browsers.
Overflow ellipsis of a placeholder can be achieved using the attribute selector:
[placeholder]{
text-overflow:ellipsis;
}
This will also have added the side effect of adding ellipsis to the inputs value in some browsers. This may or may not be desired.
[placeholder]{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
<input value="A long value to demonstrate"></input>
Method 2
No longer supported.
As of Chrome and Edge V100+ the ::placeholder pseudo element selector does not support the text-overflow property.
::placeholder{
text-overflow:ellipsis;
}
::placeholder{
text-overflow:ellipsis;
}
input{width:150px;}
<input placeholder="A long placeholder to demonstrate"></input>
WHY?
It seems like a tightening of the conformation to the specification:
Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
All font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family.
All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode.
The color property
word-spacing, letter-spacing, text-decoration, text-transform, and line-height.
text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
OLDER BROWSERS
Need support for older browsers?
IE not playing nicely?
I created a little css hack to simulate a placeholder. Use this code to simulate your inputs placeholder. It's a little dirty but can offer support as far back as IE6.
.ellipsis{
box-sizing:border-box;
position:relative;
padding:0 5px;
background:#fff;
color:rgba(0,0,0,0.5);
width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ellipsis input{
box-sizing:border-box;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
display:block;
background:none;
border:1px solid #ddd;
color:#000;
padding:0 5px;
}
.ellipsis input:focus{
background:#fff;
}
<div class="ellipsis">
A Long Placeholder to demonstrate A Long Placeholder to demonstrate A Long Placeholder to demonstrate
<input></input>
</div>
Support outside of this range would require javascript.
To cover as many browsers as possible, try these:
[placeholder]{
text-overflow:ellipsis;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow:ellipsis;
}
::-moz-placeholder { /* Firefox 19+ */
text-overflow:ellipsis;
}
:-ms-input-placeholder { /* IE 10+ */
text-overflow:ellipsis;
}
:-moz-placeholder { /* Firefox 18- */
text-overflow:ellipsis;
}
According to the specification, text-overflow applies only to block containers like div and p tags. And since inputs are not containers, you cannot apply this CSS rule.
Just input { text-overflow: ellipsis; } without any placeholder pseudos did the trick.