Problem site: www.basing.com/problem/index.html
If you hover over the items in the list on the left you should see a nice popup showing the remaining characters of the text.
However, this doesn't work in IE 7. Does anyone have any ideas why not, or suggestions on how I could go about fixing this? Thanks.
There is a known bug about z-index on IE <= 7, when you use z-index when you mix absolute and relative positionned DOM elements you have to invert the z-index properties so that the lower will appear on top of the higher.
See http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug or http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7 for another solution.
There is about a million post about this bug on the internet.
Related
got stucked into CSS...
on
[http://codepen.io/n00n/pen/RoqWJy][1]
you will see an example what I would like to to.
But would like to have a margin cuttin the card at bottom like it is on top where the scroll bar still gets till the red bar.... But cannot get it fixed.
Anybody who has any hint?
cu s00n
de n00n
After a while I come to the conclusion that it is impossible. Will find another way to solve it
I'm new to CSS, jQuery etc. I have created a page and I need some guidance.
Currently I am using the metadata viewport tag with a fixed width (since my page is a fixed width at all times) and a initial-scale of 1.
This works very well once you have zoomed out - on all devices. The page renders at the correct scale, everything is great and you can zoom in and back out, and the page stays the same.
The problem is the INITIAL zoom level. When "Initial scale" is set to 1, it will zoom in way too much on phones, which is disturbing to first-time-viewers.
Is there a way to just tell whatever device that is viewing the page, that it should just zoom out as much as the viewport allows it? Like you would do with you fingers as it is right now. Just zoom all the way out and everything is fine... There must be some simple way to accomplish this? I've searched the net as much as I can, and all the solutions I have found either don't work or are really complicated, which seems unnecessary to me!
Thanks in advance
Turns out, the entire thing was because I had used a comma (,), instead of semicolon (;), to seperate my arguments in the metatag. This caused my first argument, which was width:810px, [next argument] to become invalid, cause the comma was attached to 810px. As soon as I replaced it with a semicolon, everything worked!
I have installed superfish module in joomla 1.5 . I have a problem in IE 6,7 . the width of 'li' elements are not calculated correct and this causes some items fall down. unfortunately I am working on my pc and cann't uploaded it somewhere to show you the site, but I hope maybe it is a common problem and someone can help me.
How can I resolve it?
Common reasons why you might get width issues in IE6:
Quirks mode: Number one cause of layout glitches in IE. Make sure your <!DOCTYPE> is set correctly.
The floated margin bug: If you're using float in your CSS and those elements also have margin, you may find your margins getting doubled. The best work around for this is to use padding or border instead of margin. You may have to adjust your layout to deal with it.
max-width and min-width not supported: IE6 simply doesn't support these CSS features. It will break your layout. Not much you can do about it.
Floats with spaces between them: In some cases, floated elements may appear a few pixels further apart in IE6 than other browsers. IE is inserting spaces between them because it's in the HTML code (maybe they're on separate lines of code?). Remove the spaces and IE will render it correctly.
One of the has-layout bugs: IE has an internal flag called has-layout that has a number of rendering bugs associated with it. You can't set this flag manually; IE decides what it should be based on the other properties of the element. You can sometimes work around it by setting zoom:0; in the stylesheet for the element. But not always.
Further reading: http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
my problem is the following:
I've got a grid of containers. When you hover one of them, a child element(absolutely positioned) is popping up. I gave this child element a z-index of 100, and everthing works fine. Except in IE7, where img-elements of the parent container lie above the popup.
Now I know that you can give the parent element a higher z-index than the popup to avoid this problem. In my grid layout, this doesn't work, because there are several parent-container over which the popup is floating. Applying this technique, every container lies in front of the popup, even in modern browsers.
Here is a simple sketch of the situatuion:
How can I solve this problem?
Setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
I've relatively positioned one of the elements with negative 'top' and 'left' values, the negative 'left' value actually takes the element outside of the 'body' width, this seems fine in all browsers apart from IE7 where it just cuts it off.
establi.sh
I thought it might be that weird bug where if it's outside the parent container then you have to set a z-index but that didn't work, then I thought it might be the hasLayout bug but trying to fix that didn't work.
I'm not an expert on IE browsers so need some help. I'm thinking IE7 might be choking as the negative left value actually takes it outside the body?
Thanks
E7 doesn't support negative margins the way you want it to. Fortunately, you can easily just increase the width of your body tag, and then increase the left style of the rest of your absolute divs and accomplish the same result.