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.
Related
Codepen: http://codepen.io/marcoms/pen/vAgep/
The above pen has a <nav>bar with a dropdown list, with the hierarchy:
nav > ul.nav-list > li.parent > ul /* ul: dropdown list */
The subsequent <p> hides the dropdown, which is unwanted, and I can't figure out how I can stop it.
Oddly, if a {-webkit-,-moz-,...}transform is applied then the dropdown stacks itself above the <p>. (paste -webkit-transform: translateX(0) in the pen and see), which is almost certainly a bug, but I'm not sure what I can do to fix this, aside from changing display and z-indexes.
For z-index to work properly, you must also use position:relative (or any position really, but relative in this case)
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'
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 :)
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/