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..
Related
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
See http://jsfiddle.net/PdZrt/
Basically I have applied the yui reset and base and am the trying to seperately style a ul for a menu. The li's pick up the style but the ul doesn't appear too.
Any ideas?
In the fiddle there should:
list-style: none;
padding: 0;
margin: 0;
background-color:Red
There are a couple issues here.
One, that jsfiddle is all on one line and wrapping.
Two, your CSS for the ul reads: .nav-menu ul -- nav-menu IS the ul, thus it should read:
.nav_menu { list-style: none; ... }
The reason the background: red isn't showing up is because the elements inside of the <ul>, the <li>s have float: left set. This removes from from the flow of the <ul> and effectively makes your <ul> have a height of 0. While there is more than one way to solve this problem, the quickest would be to add a overflow: hidden to the <ul>.
Define your .nav-menu li list-style:none; and define your .nav-menu overflow:hidden;
Add this css
.nav-menu{
overflow:hidden;
}
.nav-menu li{
list-style:none;
}
Demo
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.
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