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 :)
Related
I have problem with rendering in Firefox. My code is working fine in Chrome and IE. Menu elements with the submenus are going few pixels down when rendering in Firefox.
Here is the example images:
Try removing your inline block.
but this does shift everything to the left, not sure if thats what you want?
I've solved it. Removing dipslay: inline-block; from #cssmenu span element did it. Removing padding from #cssmenu > ul > li > a and giving margin to #cssmenu also works fine also.
I have this html page: https://dl.dropboxusercontent.com/u/84321529/Fensternorm/index.html
There is a bigger div when you hover products and it contains more information about the product and one button. This content is hidden with overflow:hidden and everything is done with pure css solution.
I have no idea why is that problem with google chrome (Version 29.0.1547.66 m) and safari(5.1.7). Tested it on Firefox on mac & windows and on IE>7 and it works fine.
Do you have any idea how to fix this?
Put the position: absolute; in these class: .product-list li div {}
.product-list li div {
width:184px;
color:#999;
line-height:15px;
position:absolute; // <--
}
Disable absolute positioning on the div inside of the li and, in all probability, you should have a working solution.
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'
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)