I'm not quite sure why, but the CSS code in this fiddle does not work properly in Chrome. In Firefox, if you hover on one of the li elements, the text would become visible but not in Chrome. Apparently, in Chrome if you change the display attribute on hover, the whole CSS rule for the li element would just get ignored (The state doesn't change to hover actually). However, if you use the Chrome Developer Tools to change the state of the element manually, it'd work just fine. Am I missing something here? Or is this a bug in Chrome? I've tested this in Chrome 22 (stable release) and 24 (dev channel release).
I don't know what is getting ignored as you said, because I see no difference, but by removing display: inline;
li:hover
{
overflow: visible;
}
and it works
My Fiddle
Updated Fiddle assuming you need to have a background color for the text
Updated Fiddle
HTML
<ul>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
</ul>
CSS
ul
{
width: 100px;
}
li
{
overflow: hidden;
text-overflow: ellipsis;
}
li:hover
{
overflow: visible;
}
li:hover span
{
background-color: #ff0000;
}
While having the text wrapped in a span would allow you to modify the display attribute, it's redundant in this case because you want to set it to inline. Wrapping it inside the span element is enough.
Related
I have this mega-menu, some of the links have fairly long names, when the window is made smaller the longer links overlap text on the the other columns. I added the following rules to the ul class,
.sub-menu-lists {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I had tried adding these rules to the li class .hover_drop_down and also .hover_drop_down a, neither of these helped.
The overlap is gone, but the link is just cut off. I can not get the ellipsis to show up. I want them to trail to the end of the column.
here is my codepen, going into the software menu shows the problem. Any suggestions on how to accomplish this??
https://codepen.io/iamgonge/full/egqPQR
You have to assign these settings to the li elements, not to the ul as you did. So, that's this selector:
ul.main-nav > li ul.sub-menu-lists > li {...}
This question already has answers here:
List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?
(2 answers)
Closed 6 years ago.
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.
The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
}
<ol>
<li>
<div>Some text that trails off</div>
</li>
</ol>
What's going on/is this a bug/can this be worked around?
Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.
CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
Demo
Try before buy
This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)
Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.
If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.
Your best work-around would be to set an additional piece of CSS to override the main div element.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
}
ol div {
overflow: visible;
}
<!doctype html>
<html>
<body>
<ol>
<li>
<div>Some text</div>
</li>
</ol>
</body>
</html>
If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px; display: inline;
}
<ol>
<li><div>Some text</div></li>
</ol>
Define selectors for these elements.
Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.
eg:<li class="dothis"> <div class="thisdivdoes"> ...
After you do this it would be easier to differentiate overflow:hidden; where and not where.
Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.
Also, check your doctype in HTML5 I think it's not valid while in strict it may be.
It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).
Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.
The question:
Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+
Is there a bug report for this somewhere? Or is it actually by the standards?
I'm aware this is a rather elderly thread, but having just been up against this problem in IE 11, and unable to find much help, I decided to experiment. Aided by a significantly improved dev tools than in the earlier versions I managed to figure it out - for what I'm working on at any rate. Chances are it'll work for others as well, although you might need to tweak. YMMV.
The HTML:
<li>Whatever</li>
The CSS (edited after #frnhr pointed out that the initial version I posted didn't actually work):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
The secret sauce is setting the height and the overflow: hidden; line; it means that the underline is still there but outside the viewport provided by pseudo element, and so never gets seen on screen. It also works across other browsers (tested on Chrome and Firefox as well). Depending on your existing styling you'll probably want to tweak the pixel value in the calc() value.
See http://jsbin.com/biwomewebo/1/edit?html,css,output
IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”
There does not seem to a bug a report on this at the IE Feedback Home.
In this case, a suitable workaround might be to use an image as the generated content:
a:before {
content: url(arrow.png);
}
where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in #EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.
If the background is white you may use the bottom border:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
Not sure what standards say, but IE behavior seems to be more logical. Think of :before as an element inside of <a> tag, not outside of it. Child's text-decoration property should have nothing to do with its parent's.
This workaround will work
http://jsfiddle.net/9N35f/4/
<span>a link</span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.
I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.
In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
JSFiddle Demo
This works for me:
html:
<span>a link</span>
css:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
In this the before tag is still part of the anchor.
I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.
I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).
I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:
http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/
(click on the International Gymnast link on the right)
Here is a screenshot demonstrating the issue as well.
Thanks,
Karl..
Its because links in dropdowns in TWBS have white-space: nowrap;.
The easiest solution i could think of is creating a custom CSS class:
.dropdown-menu > li > a.btn-wrap {
white-space: normal;
}
And then adding class="btn-wrap" to your <a> element
.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
white-space: normal;
}
I would also reduce the line-height on the a tag.
Reduce the height on [.live-mon]
Remove the height on the a tag.
Increase the padding top and bottom on the a tag.
.intl-link li a {
overflow: hidden;
}
.intl-link li a {
line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
padding: 7px 20px;
}
.live-mon {
display: block;
height: 62px;
width: 92px;
}
You would get something like this:
I have created a dropdown menu using CSS and JavaScript and I'm having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.
You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.
I have tried a bunch of things like setting the width to 100% and the display to block but haven't been able to get it to work. Has anyone solved this problem?
Thanks
Well, let's see what do you have:
<li>Content</li>
so you can see that the problem is that the hover is being applied to the <a> and because it's not wide enough it does not work correctly.
Why don't you hover the <li> instead then?
changing from
#mainmenu li a:hover { background: #008de2; }
to
#mainmenu li:hover { background: #008de2; }
P.S. I'm using IE9, so I can't test it properly :-/
Try setting display:block on those anchor tags.
You may find your solution here (jsfiddle).
I made a few changes to #mainmenu li ul li, as well as adding #mainmenu li ul li:hover { background: #008de2;}. Seems fine on my IE7, IE9 (don't have IE8 to test), Safari, Firefox, Opera, and Chrome :)