I am having shadow boxissues when I extend my side navigation in Internet Explorer only. This is not an issue with Chrome or Firefox. It leaves the bottom line of the site every time you change the position of the site. Is there anyway to clear this issue, or any suggestions would be great. The site if you want to check out the code and issue is.
http://www.rsd17.org/test/test/district1.shtml
Here is link to image to show you what I am talking about.
http://i41.tinypic.com/2m07c7.jpg
Just an update. This only seems to be an issue now on IE 10. Anyone know a fix?
box-shadow browser compatibility.
I'm assuming you're testing on IE 8 or lower? Please edit the question to include the version of IE you're testing on, as what it supports varies somewhat between versions.
I was able to fix my own issue by giving my footer div a box-shadow this added to its css
box-shadow: 0 0 20px transparent;
This seems to have solved the issue. Not sure its the best way but it works enough for me. Thanks again for the help guys.
Related
I have a very strange problem that I can't solve.
I have an application being created with draggable divs.
Everything was working fine so far. But since a few hours, as soon as I drop a draggable div, most of the divs on my page disappear, even though they are not related to the element at all!
As soon as I resize my page, the divs reappear. It's as if it's a display bug. Moreover, this problem only happens on Chrome. No error message is displayed though.
Does anyone have any idea what this could be?
Thanks a lot.
Google is aware if this problem and they fixed it in Chrome version 107, which is currently in Beta status. I was facing the same issue so I installed the Beta version and confirmed it is resolved. You can download the beta here:
https://www.google.com/chrome/beta/
I would also mention that this problem started with Chrome version 106, which is the latest stable version as of today.
Until Chrome is fixed, I found this workaround which fixes the problem. Add this style to the draggable element:
background-position: 0;
transform: translate(0, 0);
The fix for this is coming out soon.
https://bugs.chromium.org/p/chromium/issues/detail?id=1370030
The circles at the bottom of this site: http://benupham.com should open on click, but do not in IE 9 (and below, but concern is with IE 9). The JS is a modification of the example here. But I'm not even sure it's the js -- it could be the CSS. I'm viewing this bug through browserstack, which makes it very difficult for me to diagnose. Thank you.
You seem to be using transition in the code, that specific event is not supported by IE 10, 9 or 8. To get a better idea of the browser support available for transition or any other CSS you could check it out here: http://caniuse.com/#search=transition
If you're still having issues, I suggest showing some of your code and possible a gif of whats happening exactly.
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
This is the closest I've seen:
Changing font-size with jQuery css() function is crashing Chrome
But it didn't help.
Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.
The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.
Here's the simplified code in JSFiddle:
http://jsfiddle.net/alininja/j4jD9/12/
This gist of the code is this line:
$('body').css('font-size',(content_size-1)+'px');
For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.
If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.
Thanks in advance!
If you want presentation consistency cross browser there is more involved than just setting font-size. You are assuming other font property defaults such as font-family are the same cross browser which they are not.
Use of a css reset will help
The title pretty much explains it.
I need some way to keep using body { direction: rtl; } but prevent IE from moving the scrollbar to the left side and keep it on the right. Just like all other browsers. (This is not such a big issue with IE < 9, but IE9 has several bugs when using rtl.)
Anybody got a hack/fix? Thanks.
(Don't mind doing this with jQuery or something...)
You can put everything in a div with dir=rtl, and leave the body alone.
I believe the answer is no, it can't be done.
You could replace the browser toolbar with a custom bar, using a javascript lib like jScrollPane.
Anyway, I think this is a bad idea and you should live with this feature of IE ;)