I want this :
But I get this :
Using this to style the containing div :
.option {
display:inline-block;
width:100%;
white-space:nowrap;
overflow:hidden;
margin:10%;
}
The rest is nothing here : http://jsfiddle.net/n2LtN/
What is missing?
I fixed it by using display:inline-block instead of display:inline, without floating :
span, input[type="checkbox"] {
display:inline-block;
*display:inline; /*That's for IE*/
*zoom:1; /*That's for IE*/
width:auto;
}
See the working fiddle.
Remove float:left from span, input[type="checkbox"]
You should read up on how float works.
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.
The code is exactly the same but it just isnt inline with the box above it.
Thanks in advance.
CSS
#menu {
margin-top:75px;
min-width:19px;
max-width:1920px;
height:40px;
background-color:#0F0;
border:4px groove #F00;
}
#header {
margin-top:50px;
max-width:1920px;
height:70px;
background-color:#000;
border:4px groove #F00;
If those are div or other block elements, you could use the CSS-attribute float.
I think you have part of the answer you are looking for already in your question.
If you have a block-element (or any other non-inline-element) and want it to behave like it is inline you can do so by setting the display-property:
display: inline;
How do you get the :before pseudoclass to render properly? Do I need some special CSS to make this work?
This does not work and does not display anything:
http://jsfiddle.net/XzMH6/
HTML
<div id="test"></div>
CSS
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
}
You need the content property.
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
content: "";
}
http://jsfiddle.net/ULfeu/
try this
please add this content:"" in #test class then :before is working properly
Demo
I have a vertical CSS menu but there is a gap to the left and above and i cannot work out where to remove it - my menu CSS is below and i have created a fiddle with my full code:
#vertical_menu {
float:left;
}
#vertical_menu > ul > li {
display:inline-block;
width:140px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
any ideas?
http://jsfiddle.net/Dfw9f/1/
i think what you are looking for is a reset CSS, kindly check CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings
for quick solution just add this to your CSS
ul,tr,hr{margin:0;padding:0;}
I think adding this to your code will solve your problem:
ul
{
padding:0px;
margin:0px;
}
Hope this helped.
UPDATE
I think the gap is not because of an issue with margin or padding, but because of an empty row in your table. You can see this by giving the table a border, like <table border="1"> (jsfiddle).
I see that you included the last row of the table to have a line between the table and the menu. You can accomplish this simply by deleting the last row of the table (which is messing your layout) and add a border-bottom to the table, like <table border="0" style="border-bottom:1px solid gray;">
JSFIDDLE - here is an updated version, with the line and correctly laid out menu.
Hope this helped.
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit