The vertical submenu shows fine in all browsers but not in IE7 when I hover over “Diensten”.
see the website
Can anyone help me
Its not fine even in IE9. Fix the position absolute top 1.68em for the #access ul ul
am i right that you are using css3pie? If yes, try to remove it first, does it work now?
Yes It works little bit, when I remove Pie. See website.
But I cannot use rounded corners with css3 on IE7 and IE8.
Related
I've been working on our site using a WordPress theme that I've tweaked a bit, and noticed that the drop-down nav in Safari for :hover is displaying too low and pushing down other content on the page. Seems to be related to padding, but I can't figure it out.
I saw other posts on this sort of thing, but nothing quite like my scenario. Ideas?
http://dev2.bingdesign.com/ - the nav above the slider.
Thank you!
I think margin of span element doesn't work on safari.
So if you add the margin top to span element on safari, please change display: block into display: inline-block.
Please check this link: example
the problem is that in IE7, the dropdown under "Departamentos" its cut by the banner, and it seems to be pushed to the right...
This should be a very easy to fix but I have little experience with IE fixes... I try for some time but I need your help, can you check it out??
Link to the Website
Thanks
It's same in IE8 because your document is rendered in quirks mode. Move the comments before the doctype declaration after the declaration. Anything before the doctype will trigger quirks mode in IE.
After you do that give .nav-wrap a z-index higher than #mainData and the submenu will show in IE7. Then give your submenu ul a left:0; to position it right.
Can you check this page and let me know why the menu doesn't work on IE7? It shows up all the way on the right, almost out of view.
The page works okay in other browsers (including IE8 and IE9). Thanks.
Change postition:absolute; to position:relative; in your #top-nav css ID. That will fix the position for you. After that remove position:absolute; from #top-nav li p and it will display correct.
I suggest you to download Developer Tools for IE. It helps you alot with HTML/CSS related problems when using IE.
Because you have ul#top-nav set to display:none ?
If not that, try playing with position:absolute, you have there all over the place... IE may have issues concerning that.
Here is the code I am using:
.customBulletList {
list-style-image: url(images/bullet.png);
}
The weird thing is that it shows up in Firefox, Chrome, Safari, and Opera. Is this CSS property not supported in IE or something?
Thanks in advance.
it is implemented. Probably it's problem of margins, padding, that are counted wrong and put image outside visible area.
Use a background-image instead (with additional padding to the left) and set list-style to none.
I belive that IE6 does not supportlist-style-image!
Add padding-left to the ul css style. That may bring the bullets into view. Try 40px and work from there. If you put a temporary border on the ul you can see where the bullets are getting chopped.
I've been trying to modify the following menu to make it look indentical in IE, Firefox, and Safari/Chrome but I can't seem to get it to look right in Safari/Chrome.
Could anyone tell me how to fix it? When viewed in Safari or Chrome, notice that the menu is ignoring the padding.
View flickr-like menu
Thanks in advance!
Padding on elements that are or are displayed as inline. http://www.maxdesign.com.au/presentation/inline/
Try making the inline elements inline-block in order to get the padding working properly.