I have a ul with overlfow-y set to auto allowing me to have a nice scroll bar for all the li. However IE7 ignores all this and the list goes outside the container.
http://jsfiddle.net/asWeb/LnnmW/ see my code here.
I checked on the internet and the common solution was to put a position:relative to the outside div (registered_members) but it didn't work.
Thank you
Add position:relative to the ul tag. This will force IE to render the element tree correctly.
Related
I recently created a pure css drop-down menu using Google tutorials.
I have an issue though:
If I give a small margin to the 2nd level ul, when you hover on the gap between the ul and parent li drop-down fades away.
Is there any way to fix this not involving Javascript?
Refer to the demo here : http://jsfiddle.net/ba76n/2/
that margin is causing the mouse to drop the "mouseover" state, without it it works fine.
If you switch to padding-top:.5em; it should work as expected. This is because margin is on the outside of block elements while padding is on the inside.
Use padding-top instead of margin-top.
See it working. http://jsfiddle.net/ba76n/5/
use padding-top instead of margin-top since margin is applied outside of the block so when you try to select the sub-menu its come on the margin and the block is changed so the sub-menu disappears
http://jsfiddle.net/ba76n/9/ updated your fiddle...hope it helps :)
( Just removed the margin top from the dropdown li and added a border )
I have the following website: http://dev.driz.co.uk/phase/about.php
If you view the website in IE7 you will see that the drop-down menu in the top left does not appear above the main content area. This is because of the stupid IE7 z-index bug, however the normal fix of making the parent element have a high index to make it fix the child would not work in this instance as I need the parent header to sit under the main content...
Any ideas on how to fix this based on the layout structure I have? I've tried most of the IE fixes on the net, including a jquery solution that resets the z-indexes in a loop, but none of them have solved the problem.
You need to give your header a z-index less than your nav element.
IE7 is a pain with z-index, you need to habe a structure like this.
Header - z-index:2
Content - z-index:3
Nav - z-index:4
Along those lines, sorry I can't be more help.
I've found that when having problems with z-index in IE, that setting the elements you want to be affected by the z-index to have a relative position.
i.e.
#block {
z-index: 1;
position: relative;
}
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
I've been banging my ahead on this IE7 bug for the last few days and it's time to resort to the mind of the crowd.
I have the following HTML and CSS: http://beerpla.net/for_www/ie7_test/test.html
The goal is to have a <ul>, with each <li> containing a small icon and some text. Multiline text would be aligned to itself and not wrap under the image.
I've tried using float:left on the image and a bunch of other things, and finally I thought the position:absolute would work for sure but in IE7 I consistently see the text pop off to the next line and get misaligned with the image:
This is what I expect it to look like:
I even tried to make the div display:inline which kind of worked but then started wrapping under the image for long lines, so it was no good. zoom:1 also produced a similar effect.
I'm at a loss at the moment. This code works fine in all other browsers. IE7 is a special, very special child.
Any ideas?
Thank you.
Edit: If you have IE8, you can emulate IE7 by pressing F12 and then Alt-7.
instead of putting the image as an element, try using background property. like so
ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }
note: you might have to adjust the padding to suit the distance you want to maintain between the image and text.
Try using padding on the li instead of margin on the div. If display:inline worked, it's probably IE choking on working out the div's box model in some arcane way: padding on the li and maybe display:inline on the div may iron it out.
Moving the <img> tag into the <div> fixes the issue. Still unknown to me why IE7 does what it does.
Go back to floating your image left, and then add overflow: hidden; to the div. The text will no longer wrap below the image, and there are no side-effects unless you are trying to position content from inside the div out (don't see that here). Completely compatible cross-browser. With IE6 you simply need to add hasLayout by any means to get the same effect.
http://biochrom.fivesite.co.uk/catalogue4.asp
On the page above there is an image floated to the left. To the right of it is a list, titled "features". The list items have a background image, however, it isn't appearing. List 2 shows how the background image looks.
Does anyone know how I can make the bullets visible?
I know this is a year old post but others may want to know...
What happens if you are using a content management system and some pages have images & some don't you wouldn't want your list items to be 200px in the content?
You can add this CSS to your UL/OL element:
overflow:hidden;
I hope that helps.
Your image has a float:left property. The list items are therefore rendered "behind" the image.
margin-left:200px;
on the UL element will solve your problem.
Alternatively, you can apply a float:left on your UL-element. This will make it float right to the image, but will make the following content appear on the same line. You can prevent this by clearing the UL-element, or adding element after the UL-element with...
clear:both
...applied to it.
More information about this behaviour can be found at http://www.positioniseverything.net/easyclearing.html.
This thread is old indeed, but always relevant...
Another alternative solution:
display: inline-block;
Put this on the UL. It forces the entire ul to appear after the float. That way you can have a page with or without the image and it will always display correctly (checked on FF4, IE7 & 8, Chrome 11).
Alternatively, you could use the list-style-image property instead of background-image. I ran into this very problem the other day: the text-wrapping behaviour that floats exhibit on their 'neighbours' only applies to 'content', not background images (for example).