I would post code along with this but I can't seem to find out what type of scenario it occurs in but in IE7, certain elements seem to shrink when you hover over them and as you hover, unhover and rehover them they keep shrinking and shrinking until they are very small blocks of colour. It seem to be elements where thy ahve dimensions like width: 50% and height: 100px. But not 100% sure on this.
Any idea what could be causing this? On first display or after a refresh the site is fine but hovering over has this effect.
Any thoughts?
Are you using boxsizing.htc? Remove it (yep layout is broken but that's a test). Is the bug gone?
I don't have the solution except when removing the HTC from ONE element is sufficient but layout isn't affected. To remove it, just redeclare behavior property with url() value:
.ie67 .noboxsizing {
behavior: url();
}
Related
I'm using this inside Angular if it matters, but for some unknown reason only in Edge.. as I move the mouse around on the screen the img will either distort and render with some of it missing, or completely disappear
thoughts?
<img class="my_image_class" src="img/My-Svg-ToRender.svg" ng-src="img/My-Svg-ToRender.svg">
associated CSS for this element is as follows.. I've tried setting no height and no width, setting height and width.. behavior doesn't change
img.my_image_class {
width: 100%;
-webkit-user-drag: none;
}
there is other parent CSS, but it looks like just margins, borders, padding
edit :
turning everything I can off, in CSS, I notice the svg will not render UNTIL I mouse over it.. I do not see any directives that could be modifying the svg's CSS and don't see any transformations occurring
I found some open issues on SVGs through Microsoft's feedback portal; it looks like a recent update may have negatively impacted SVG display in Edge (e.g., https://connect.microsoft.com/IE/feedback/details/2350665). Based on what I've read about this issue, it seems like text boxes are a common culprit.
My website displays a logo as an SVG containing text, and it renders without problem in Edge. However, before I exported my SVG from Illustrator, I converted all text to paths. I did this for a similar reason: I was having issues with SVG text display in Safari.
Of course, ideally, SVGs should just work in all browsers. And it seems like this issue is on the fix-list for Edge. But in the meantime, perhaps this workaround will help! Cheers!
I had my inline svg images disappear on hover. I had the following styling:
svg {width: 100%; height: 60px;}
The 'width: 100%' styling was intended to activate the hover styling as soon as the mouse entered the containing block element. This caused som strange behavior on the svg image. Mouse-in from top or bottom functioned as expected, mouse-in from left or right caused the svg to disappear. Removing the 'width' styling, solved the problem.
Some strange is happening in applying the styling of css code in some browsers...
Please take a look in the example...
http://jsfiddle.net/3FepW/3/
In Chrome the green div is bigger, than in Firefox, I really don't know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can't resolve this for days.., I can use height: 100% or overflow hidden but I can't use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div...
The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.
There are many questions in here regarding the same problem. I've answered one of them here - Adding CSS border changes positioning in HTML5 webpage
Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that's why it gets bigger (that is, 'that's why .c1 gets bigger').
Try adding overflow: auto; to .c2- another way of preventing margins from collapsing - so c1's margin gets 'stuck in' .c2 instead - I'm assuming that's probably what you're looking for.
Here's a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .
Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html