I have a CSS hover menu which works in all browsers except... surprise -- IE6!
#menu_right ul li:hover ul { visibility: visible; }
This ul is hidden initially, obviously. When I hover over its parent li, it should show up... but it doesn't.
To try to pinpoint the problem, I've tried making the ul initially visible and had the hover action take on something else. For example:
#menu_right ul li ul { visibility: visible; }
#menu_right ul li:hover ul { background: red; }
This doesn't help. On other browsers (including IE7+), the ul will turn red when I hover over its parent list element. But not in IE6. What am I missing?
IE6 doesn't know the CSS :hover pseudo-attribute, when it appears on anything than a link element. You will have to use JavaScript for this. Try conditional statements, and if you use jQuery, you can code the hover effect for IE6 in 3 (+/- formatting) lines:
<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
$(this).addClass ("hover");
}, function () {
$(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->
Mark, that in the CSS statements I used the dot instead of the colon.
Cheers,
You should use something like this
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and style the <a> instead of the <li>. You just have to make sure that you size the a to be the exact same size as its enclosing li.
div.menu ul.menu {
margin:0;
padding:0;
}
div.menu ul li {
margin:0;
padding:0;
}
div.menu ul.menu a {
display:block;
height:22px;
margin:0;
overflow:hidden;
padding:0;
width:252px;
}
The reason you are seeing that it works on every browser except IE6, is that it supports :hover only on <a> elements.
Take a look at whatever:hover http://www.xs4all.nl/~peterned/csshover.html. This baby solves all sorts of weird IE6 hover problems, might solve yours.
No :hover on anything but <a>... God I love this browser.
Try to use :hover on a conveniently-located <a> (if it's a list of links, like most CSS hover menus, it won't be a problem ), or just go with Javascript, as already suggested.
It is exactly as Tal wrote. I do not know how it works with table but this example WORKS in IE6 perfectly.
http://www.cssplay.co.uk/menus/final_drop.html
Related
I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
I have a drop down list that I'm trying to get working in IE7. Amongst other bugs, the one that has me beat is the anchors on hover not pushing the background to full padding height. It seems to stay within the dimensions of its li and ultimately the ul. I've tried expanding the height of both ul and li but this doesn't seem to work. Works correctly in all other browsers:
http://jsfiddle.net/gzLVR/2/
What you should see: The anchor tag, on hover, should expand at the bottom by 50px (as per the css #menu > ul > li:hover > a { padding-bottom:50px; }. This expansion is performed, but the background-color doesn't seem to push to the anchor's margins.
What am I doing wrong?
IE7 does not support :hover on items other than <a> tags. Since you have your :hover on an <li> it is not working in IE7.
You'll need to add some javascript to add a .hover class to the <li> when you mouseover, and then adjust your css to include it as well:
#menu > ul > li:hover > a,
#menu > ul > li.hover > a{
padding-bottom:50px;
}
[EDIT]
It appears this is only true when IE7 renders in quirksmode. If you are using a strict doctype, you should be able to use :hover on an <li>
I think trigger hasLayout will fix it; you can do it with somthin like this:
#menu > ul > li > a { display: inline-block;}
Be aware of that IE don't supports :last-child up to IE8, but you can use :first-child.
I would also suggest to use a pseudo element for the part you used the <i></i>, so you don't have unneccessary markup in your HTML.
I ended up finding the solution myself. Each li's anchors are by default set to wrap around it's content (display:inline?), and setting the display to inline-block is somewhat dangerous as its behavior in IE7 is somewhat unpredictable.
By simply setting the anchor to display:block, you allow it to take on dimensions of itself in IE7, so you break it away from having it simply wrap around its content. Thus, it's possible for it to affect the needed padding when on hover.
This will now work in IE7:
http://jsfiddle.net/gzLVR/5/
Have you tried changing the anchor to
display:inline-block;
zoom:1;
The zoom should only be required for IE7, it triggers 'hasLayout'
The following snippet is causing me a QA headache.
<div id="links-container">
<ul>
<li class="resource-link li-sep"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>»</span></li>
<li>...etc...</li>
</ul>
</div>
I tried this in CSS, but nothing is working;
#links-container ul li a { color:#C28234; }
#links-container ul li a span { font-size:140%; line-height:1em; }
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; }
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; }
#links-container ul li a:hover { color:#75450A; }
What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.
Our project mgrs wish to keep the outlines to promote accessibility.
If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.
Anyone else ever have to deal with this? If so, how'd you get past it?
Thanks
Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.
Example: jsfiddle.net/zDbsQ/2/
EDIT: Fixed link to example, original was wrong.
You can just use:
#links-container ul li a *{ outline: none; }
This will select all elements within an a and disable the outline..
i am well aware of iE6 hover probs and workarounds. what i am failing to see is how to show a li on hover in IE6? for example there is a link for support and when hovered over i would like a ul li to appear and on hover out just show initial link. any tips to get me started? many thanks
html code example
http://jsfiddle.net/zdUMG/4/
Well, for one thing, your HTML is invalid.
You need to wrap the whole thing in a ul, and you need to move the submenu ul inside the li. Like this: http://jsfiddle.net/zdUMG/2/
Then, you need some simple CSS: http://jsfiddle.net/zdUMG/3/
#nav li ul {
display: none
}
#nav li:hover ul {
display: block
}
But, that won't work in IE6.
i am well aware of iE6 hover probs and
workarounds
So, what's the problem?
Just use Whatever:hover to allow a selector like #nav li:hover ul to work in IE6.