I have created a menu in HTML and CSS that works in all the major browsers (Chrome, Firefox, IE8+, and Safari). You can find it here: http://www.calvaryccm.com/MenuTest.aspx
The problem occurs in IE 7.
I have a hover menu using some JS for effect. When I try to render it in IE7 this is what happens:
I need some help figuring out how to position the menu under the text. Thank you for your help!
I'm not sure whether you want to use .block or .nav in the selectors below. I've gone with .block because I can see it being applied to the element.
On .block ul, remove overflow: hidden.
On .block li, add position: relative.
On .block ul.nav ul, add left: 0.
You now have the infamous IE6/7 z-index problem:
To fix it in this case, on .block ul, add position: relative; z-index: 3.
z-index: 3 to be one higher than the z-index on #player-area.
Also, you don't need to use javascript to add the 'hover' class as you've done. Just use the :hover pseudo selector in CSS:
ul.nav > li:hover
Related
I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.
I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.
I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).
JS Fiddle: http://jsfiddle.net/g7Lk7/1/
.pit_toolbar_ul ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
list-style-type:none;
margin: 0;
}
Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.
Thanks for your time!
You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:
.pit_toolbar_ul li:hover ul.rightside {
left: auto;
right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
margin-right: 0;
}
and add rightside class to corresponding ul.
http://jsfiddle.net/g7Lk7/2/
.pit_toolbar_ul li:hover ul.alignRight li
{
position:relative;
left:-30px;
}
Add this class to your style sheet this may help you. I have positioned your dropdown li.
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
The footer in the folowing site contains a sitemap:
http://www.openawards.org.uk/
It doesn't look right in IE and I can't figure it out can anyone
Remove float:left from #explore ul li a
The problem is with your float left for the a tags. Try looking at the before pseudo selector such as ...
#explore ul li a:before {
clear: left;
}
It looks like IE is having a problem with the width of your lis, so it is not clearing the shorter links.
Set a width to the lis and it should work.
I tried to create a drop down menu. That's what I did so far:
http://gegensinn.org/test.html
(I made the drop down menu visible at all time for "debugging")
I think the problem is quite obvious: The menu is behind the text.
First I thought I could fix this with z-index.
Although I'm not quite sure which element has to get the z-index property.
I tried to set the whole menu to z-index:100; and at the same time set the z-index:1; of .main.
Afterwards I tried to set only the z-index of <li> and <a> but nothing worked.
add position:relative on #header :)
I think applying z-index like so should work.
CSS
#menu a
{
z-index: 100;
}
#menu ul li ul
{
position: absolute;
}
#main
{
z-index: 10;
}
Some browsers ignore z-index if it is not set on both elements in question.
add position relative to li and position absolute to sub ul and then z-index
For anyone else with this issue, just add !important and the z-index to the menu/header area:
position:relative !important;z-index:999
On this page: http://catonthecouchproductions.com/fish/boat-captain.html I have a list on the bottom right box in yellow, but it is not displaying as a list-style-type:circle, but i have it set in my CSS.
I am not sure why it is acting this way. Any ideas?
I have FireBug installed and it doesn't seem like anything is conflicting with it.
You need to add a left-margin to li to get them to show up.
ul li { margin-left: 10px; }
should do it
You haven't left any space for the circle to display - try margin:1px 10px; on the ul li instead
list-style-type:circle; should be defined for the ul and not the li.
Add a padding to the ul element that has been reset by reset.css.
Another detail, that I saw: your <ul> element has list-style-type:disc; and the <li> elements list-style-type:circle;. This property should only be declared for the <ul> element.
I had the same problem, when floating li.
As soon as I removed float from li element, the circles in ul showed up in IE7.