I have a sort of an image map, where I've used li's to create the elements, and on hovering the information pops up. The html code is:
<li id="b906" style="z-index: 1000;">
<a href="#">
<span> </span>
<span class="para">Some text and maybe an image goes here.</span>
</a>
</li>
And the CSS code for the corresponding HTML is:
#map ul li {
position: absolute;
list-style: none;
top: 0;
left: 0;
width: 100px;
height: 100px;
text-align: center;
display: block;
}
#map ul li a {
color: #000;
text-decoration: none;
color: #fff;
display: none;
position: absolute;
top: 0;
left: 0;
}
#map ul li:hover a {
display: block;
}
#map ul li a span {
display: block;
width: 100%;
height: 120px;
border: 2px solid #777;
}
#map ul li a span.para {
display: block;
background: #777;
padding: 2px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100px;
}
This works splendidly in all the browsers, but IE8 does not show the spans on hover. However, if I put a border: 1px solid red; on the li, the spans do show up, but only if my mouse is exactly on that 1px thin border. Doesn't show up still if the cursor is inside the li.
What am I doing wrong here? :(
Thanks for the help.
Internet Explorer has some problems with dealing with :hover events, especially for li elements. You need to use this: http://www.xs4all.nl/~peterned/csshover.html
Should work for you then.
If all else fails, and in my case, I use jQuery's hoverIntent to show menus reliably.
From http://msdn.microsoft.com/en-us/library/ms530766.aspx
Windows Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not only links. If the pseudo-class is not applied specifically to an element in the selector, such as the A tag, the Universal (*) Selector is assumed. Indiscriminate use of the :hover pseudo-class can negatively impact page performance.
See Defining Document Compatibility
Related
Based answers to other questions, ie Link inside a button not working in Firefox, HTML5 disallows <a> in <button> and <a> in <a>, etc. I have a design (no pushback permitted) which has a row of three clickable tabs which switch the content displayed - on two of them when active there are two arrows at either end which paginate the tab. Quick mockup:
How can I nest clickable targets using correct HTML5 markup and proper interactive elements?
There are many ways to make, for example, <div>s clickable. I'm asking about a HTML5 solution, not a JS hack.
What I would do is have the tabs as part of a unordered list, each with <a> tags within. For the one(s) needing arrows include additional <a> tags within the <li>, and use CSS to position them above the primary <a>.
ul {
line-height: 2em;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
ul > li {
position: relative;
width: 10em;
padding: 0;
margin: 0;
display: inline-block;
}
ul > li > a {
text-decoration: none;
color: green;
border: 1px solid green;
display: block;
}
ul > li > a:hover {
background-color: lightgrey;
}
ul > li > a.back, ul > li > a.next {
position: absolute;
top: 0;
width: 2em;
color: darkgreen;
border-color: darkgreen;
}
ul > li > a.back {
left: 0;
}
ul > li > a.next {
right: 0;
}
<ul>
<li>One</li>
<li>Two<></li>
<li>Three</li>
</ul>
One possible solution - <label> is an interactive tag which expressly allows interactive content (intended for form elements). The <label> could set values of a hidden radio element which can be used via CSS or JS to pick which tab content to display, while (potentially) allowing nested <a> tags inside for prev/next.
I am working on my online shop, and I want to add stages, like in the picture below:
My problem is getting one of the stages to be highlighted, depending on the page it should be shown on. I had a standard div and ul in my HTML:
<div id='stages'>
<ul>
<li class='selected'>Cart</li>
<li>Your Details</li>
<li>Summary</li>
<li>Payment</li>
<li>Complete</li>
</ul>
</div>
And my CSS (so far):
div#stages {
position: relative;
display: block;
height: 40px;
text-align: center;
}
#stages > ul > li:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
#stages > ul > li {
text-align: center;
width: 110px;
height: 40px;
line-height: 40px;
display: inline-block;
background: #DDD url(/img/bin/bg-steps.png) no-repeat top right;
margin: -3px;
text-indent: -15px;
}
#stages > ul > li.selected {
background: #306bb4 url(/img/bin/bg-steps.png) no-repeat bottom right;
}
#stages > ul > li:last-child {
background: #DDD!important;
padding-right: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Originally using the image 'bg-steps.png':
Which looks nice. However to get an item selected is proving to be too hard, because it needs a different image at the begining of the LI and at the end. Can anyone help/simplify this for me? See here for a JSFiddle.
EDIT: This is my aim:
Try this one: jsFiddle
Here I added some pseudo classes :before and :after
In here you do not need your pictures in the background and it is made in PURE css and html
With CSS3, you don't need to use images.
It can be achieve using a pure CSS solution with pseudo classes :before and :after.
You can use it to generate triangles before and after each li element.
You can find a full working example in this JSFiddle.
I have used a similar trick in one of my project, and it's well supported in FF, Chrome and IE10. For other browsers, you need to check yourself because I don't test them.
I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.
I have ONLY one <UL> and under that we have group of <LI>
<ul>
<li>1<li>
<li>2<li>
<li>3</li>
<li>4<li>
</ul>
now I wanted to show them as TABLE, please help me with CSS, how can we show as a TABLE for above UL/LI in below table format, 2 LI set in one TR (two TD) and so on....
Well, here's one possible solution:
ul {
width: 450px; /* change it to whatever you like */
position: relative;
/* these should be probably already set up by `reset.css` */
list-style-type: none;
margin: 0;
padding: 0;
}
ul:before, ul:after {
text-align: center;
display: block;
border: 1px solid black;
border-bottom: 0;
width: 48%;
}
ul:before {
content: 'col1';
border-right: 0;
}
ul:after {
content: 'col2';
position: absolute;
top: 0;
left: 48%;
margin-left: 1px;
}
li {
text-align: right;
width: 48%;
float: left;
border: 1px solid black;
margin-bottom: -1px;
}
li:nth-child(even) {
margin-left: -1px;
}
It works (JSFiddle; tested in Chrome, Firefox and Opera; nth-child(even) selector obviously fails in IE8, so you have to emulate it with class or other means; but otherwise it's still solid), but I admit I feel guilty about this. )
P.S. If you want to add padding to the "cell" contents, don't forget to change their widths as well, like here:
li {
width: 47%;
padding-right: 1%;
}
It's a really late answer, but I think this is a common topic. Here's a codepen I made.
Obviously it's just a starting point. It also has some example of how to add styles like bg or borders. If the 'cells' contain some arbitrary content, you'll have to adjust dimensions, for example. I use this kind of code for thumbnails galleries, for example, where you don't have to worry about borders or bgs and it's quite elementary code (the example is for a 2x3 table, see codepen):
ul{
list-style:none;
}
ul li{
float:left;
padding:10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
ul li:nth-child(3n){
background-color:#888;
}
ul li:nth-child(3n+1){
clear:both;
border-left:1px solid #000;
background-color:#ccc;
}
ul li:nth-child(-n+3){
border-top:1px solid #000;
}
Hope it helps.
You cannot convert a single list (containing more than 2 items) into 2 columns via the display: table properties because you need some element to act as the table-row. Without an element acting as a table-row, all adjacent elements that are set to display: table-cell will be contained within an anonymous table-row element that cannot be modified or styled in any way.
Your only option is to either change the markup (to use tables or lists of lists) or use a different approach to your CSS: either floats/inline-block on the lis or using the columns property on the ul.
Follow-up from another post here: IE7 li bullet or number shown outside of div
In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. Since the hover element can not be set through the , how do I fix this one?
P.S. Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated.
Again everything works in firefox, etc.
The screenshots:
The code:
#create_request ol {
width: 339px;
}
#create_request li {
display: list-item;
line-height: 23px;
background-color: #E3E3E3;
list-style: decimal;
list-style-position: inside;
padding-left: 25px;
padding-top: 5px;
}
#create_request li.alternate {
background-color: white;
}
#create_left li:hover {
width: 356px;
background: url('/images/list_add.png') 100% 100% no-repeat;
background-color: #B0B0B0;
cursor: pointer;
}
Unfortunately, that's not possible without bringing in another element in the <li>. The incorrect list-style-position behaviour occurs in IE6/7 when the <li> element get hasLayout. You want to totally avoid hasLayout on the element. The width is one of the hasLayout triggers.
I suggest to put a <span> in the <li> (yes, sorry if you would cry)
<li><span>Item</span></li>
and change the li:hover style as follows
#create_left li:hover {
background: #B0B0B0;
cursor: pointer;
}
#create_left li:hover span {
display: block;
width: 356px;
background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}
This way the span controls the width of the <li> without giving it hasLayout. You only need to remove padding-top: 5px; from the <li>'s CSS and counteract it with line-height, otherwise the <span> will not get the full height.
Make it if necessary an IE6/7 conditional stylesheet.
I believe you need to declare "list-style-position" in the rule for your OL tag:
#create_request ol {
list-style-position: inside;
}