when I create a list of links and give those links an a:hover state, I want the entire link, including the bullet point, to highlight on hover. But what because my list has a defined width which is wider than the As, the LIs pick up the :hover and change color before the As do. This looks messy! Like this:
http://jsfiddle.net/NgWLR/
See what I mean? It's like the A & the LI are separate entities, triggering at different times.
If I try adding a display:block to the A styling, all I get is weird display issues in Firefox & a slight improvement in other browsers, but it certainly doesn't solve the problem.
I can change the list-style-type to none and put a :before bullet entity on my LIs, like so:
http://jsfiddle.net/tScnS/2/
And that seems to work fine, in Safari & Firefox at least, but as a solution it seems kind of rough/messy/unlikely to be supported in all browsers.
Anyone know a 'bullet-proof' (hah!) way to get this to work, or should I just go ahead and implement in the manner of the 2nd JSfiddle- list-style-none, bullet :before?
Thanks!
You can use li:hover a instead of a:hover to style the link, e.g: http://jsfiddle.net/NgWLR/2/
PS: Please remove remove unrelated code when showing examples.
As per i understand remove display:block from your <a> tag. LIke this:
Check this http://jsfiddle.net/NgWLR/1/
Related
I've set the padding of the li element to 0 but there is still about 10 pixels worth of padding. How do I shorten the amount of padding provided?
Don't want to be boring :) But in my opinion negative declaration text-intend:-5px; a kind of wrong trick. I know it does trick the browser default styles. But basically it just moves the text outside of the parent element, making something like a hanging intend.
I've tried to find those browser inherited styles, but there are none of them that would create such padding around bullets/discs.
I did some research and found out that CSS3 has special pseudo-element ::marker to address this issue. The idea is great, but unfortunately it is still not implemented in any browser :(
Mozilla has own temporary trick to better style bullets :-moz-list-bullet - https://developer.mozilla.org/en-US/docs/CSS/:-moz-list-bullet
No other vendors that either support or have implemented such hack
CSS3 also has new value for list-style-position: hanging, that may help. But it's still not well defined.
Another solution is to use pseudo-element ::before (no support in IE7)
li:before {
content:"•";
margin-right:1px;
}
After all seems there is no any interest or need to address this issue. Everybody happy with text-intend.
In fairness in the end of the day why the heck would you want to remove that space between bullet and text :)) I think that's the case they called - accidental implementation
I've prepared this demo:
https://dl.dropbox.com/u/7224702/lists-bug.html
It works fine in Firefox, Chrome and IE8 but is broken in Opera and IE9.
Oh and I don't want to use list-style-position: inside; because if some <li> is longer then one line the second line is not correctly indented.
This is a problem with lists that isn't really specified by CSS. It just says that the marker is outside the box but doesn't precisely specify where.
You could perhaps solve it with text-indent to move the first line back again.
That's the question that's been bothering me for some time as well.
First of all if we look at the spec describing the list-style-position: outside property we will see that
"CSS 2.1 does not specify the precise location of the marker box or
its position in the painting order".
This actually makes this situation not a bug, merely different implementations.
IMO Opera and IE9 make it closer to the spec - which is to put the marker... well... outside the box. In case of floats the box made by the li element is still full-width, only content is shifted inside of it.
I tried to think of alternative solutions but they still turn out to be inappropriate and cause more problems than they solve. An example of using css3 counter increment can be seen here: http://jsfiddle.net/s3sZS/3/, but visually it looks like list-style-position: inside (your indentation problems remain) and the increment itself is selectable and copyable (at least in Opera).
Actually list-style-position: inside looks like the only appropriate solution to this imo.
If you are interested in future implementations of lists - you may read the CSS Lists and Counters Module Level 3 (currently Editor's Draft).
Little later then planned but here is my final solution.
Use list-style-position: inside;.
To repair the indenting of second and folowing lines, use negative text-indent (thanks Joey!)
It is not easy to determine the right value for the negative text indent as every browser does things little differently. Knowing that we will need to use something where we can set the width of the marker manually. And that something is pseudo-element :before. (thanks skip405!)
With the :before pseudo-element and right value of the content property we can now use list-style-type: none;
Delete the list-style-position from 1. as it's useless now.
You can see working demo here:
https://dl.dropbox.com/u/7224702/lists-counters.html
The only drawback is with content: counter(list, disc); in Opera 12. The disc/circle/square values are not working as they sould, values like decimal are alright. I've already reported it as a bug so hopefully it'll be fixed in next version.
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.
I'm not sure that this will be easy to explain without just showing you so here is an example -
http://jsfiddle.net/46gL8/1/
When viewed in FF, Chrome, and IE8/9 the example works as expected. When viewed in IE7 the nested UL is rendered inside of the parent despite both being positioned absolutely. Things like z-index make no difference and the only fix was to remove the filter: line from the shadow class.
I suppose it would be fine to just render a regular border or something in IE7 but it would be awesome if anyone had any insight!
It looks like the filter cuts off all content that falls outside the filtered box. If you remove the submenu from the hierarchy of the main menu, it does work. See: http://jsfiddle.net/wyDTQ/
Of course, I don't know how you're constructing your menu, so that might not be what you want. It does fix your issue, though.
Seem you only need an explanation rather then a solution. Everything you need to know about the filter property is explained by Microsoft at http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx, no further details is given to why or how it works in certain scenarios.