I am designing a website and it looks good in basically all browsers except IE7, where I have a problem I haven't been able to correct. I have a menu in HTML like this:
<div id="nav">
<ul>
<li id="cMenu"><a id="cart" href="#">Home</a></li>
<li id="pMenu"><a id="promos" href="#">Promos</a></li>
<li id="aMenu"><a id="anun" href="#">Ads</a></li>
</ul>
</div><!-- /nav -->
Then I have my CSS:
div#nav{width:339px;height:120px;display:block;}
div#nav ul{list-style:none;}
div#nav ul li{display:inline;padding:20px;}
div#nav ul li a{width:30px;height:80px;}
div#nav ul li#cMenu{text-indent:-999999px;}
div#nav ul li a#cart{background:url(../img/menu2.png) 0 50px no-repeat;width:110px;height:120px;display:block;}
div#nav ul li a#cart:hover{background:url(../img/menu2.png) 0 -69px no-repeat;}
The thing here is that when I preview this on IE7 nothing gets displayed, I've tired positioning absolutely and also checking if everything is there by using border="dotted" and I get to see the border of only the div#nav, nothing else shows up. (I didn't placed all of the css of the menu since it's basically the same just different id's).
Does anybody knows what's wrong?
Use
display: block;
for your CSS nav declaration. That should fix it :)
div#nav ul li#cMenu{text-indent:-999999px;}
by this its sending all inside li tag to -9999999 text-indent
try putting text-indent to a tag
i hope it work
Related
I have 3 links to other pages, but only no3 shows a color change on hover in Safari.
It works fine in Firefox and others but not Safari.
ul .root-menu li:hover > a {
color:#FFF;
}
<div id="menu">
<ul id="root-menu">
<li>HOME</li>
<li>AREA COVERED</li>
<li>CONTACT</li>
</ul>
</div>
its a bit complicated when cant see real example of your case, but maybe try to set display: inline-block or block for links
ul#root-menu li > a {
display: block; // or inline-block
}
also try to add :hover state styles directly for a, but not for li:
ul#root-menu li > a:hover {
color:#FFF;
}
But again, answer would be more accurate if you will show real examle
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
Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.
So I have a menu bar with some menu-items and submenu-items as:
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="">Menu1</a></li>
<li>Menu2
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
Here is the fiddle of what I have done so far.
What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?
I hope I am clear with my question.
EDIT:
Wooo thanks a lot every-one.
got it with: #menu li:hover
#menu li:hover,#menu a:hover,#menu > li a.current{
}
In last line of your CSS, add #menu li:hover to target selectors
Updated example here: http://jsfiddle.net/7UaNn/
Add this #menu li:hover > a in the following css
#menu a:hover, #menu > li a.current {
// your Style
}
So it should look like this:
#menu a:hover, #menu > li a.current, #menu li:hover > a {
// your Style
}
See Demo: http://jsfiddle.net/akhurshid/bk2HA/7/
At the moment all you hoverstyles for the listitem are applied to the a- Element.
However, you need to apply them to the li-Element to keep the hover state active.
Sometimes that may become tricky, but in your case it's pretty easy, just add:
#menu > li:hover{
background:#474747;
}
to your styles.
See your modified fiddle
Along with "a" also add hover for "li" :
#menu > li:hover{
background:#474747;
}
You may achieve this by hooking up to the :hover state of the parent li element instead of the anchor element - which is a children of the list-item that is actually hovered - like so:
li a:hover,
li:hover > a {
color: #fff;
}
You might need to use :nth-child() to get around every sublink being in hover state. Did not test this.
/edit: updated the selector, now using > a to only select the direct child anchor element of the hovered list element, no need for :nth-child or the like.
Make the thing that is changed on hover the background of the LI rather than the background of the 'a'.
ul#menu li:hover { background:#000; }
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..
which is better for use
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu ul li{
float:left;
width:150px;
height:25px;
background:#F00;
}
or
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu li{
float:left;
width:150px;
height:25px;
background:#F00;
}
which tag is right menu ul li or menu li?
When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?
If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments
.menu > ul > li{
// this matches only list items directly inside a ul directly inside a .menu
}
even better would be this:
#menu > ul > li{
// now you are referencing the menu by id, so you know this is a unique assignment
}
or, if you have multiple menus:
#menubar > .menu > ul > li{
}
because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li id="abc">Menu Item abc</li>
</ul>
</li>
<li>Menu Item 4
<div><div><div><ol><li><div><ul>
<li id="xyz">Menu Item xyz</li>
</ul></div></li></ol></div></div></div>
</li>
</ul>
</div>
(you probably don't want to match items abc or xyz).
It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.
It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.
Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)
Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.
This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?
It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.
Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.