In my application, I am including one page within another via an iframe. I'm working on a quick prototype here, so I don't want to take additional time right now to implement something fancier].
Everything looks good except for IE10 on Windows 7. From what I can tell, the style sheet of the iframe is being added into the cascade of the style sheet for the page and causing strange display errors. I'm a little dumbfounded this is even possible.
If I comment out the iframe, everything renders correctly.
I can also see the styles changing as the iframe loads:
Pre-iframe: http://screencast.com/t/8qcl2U4Uuy
Post-iframe: http://screencast.com/t/fzR9esWsq
Anyone else experience strange behavior like this?
Thanks in advance.
Thank you for your reply. My coworker was actually able to help me trace this back to an issue with the IE10 developer toolbar.
I was able to create a file that replicates the issue: https://dl.dropboxusercontent.com/u/1686497/iframe.zip
If you open the index, you'll notice that there is no margin on the body. While you have that page open and you open the F12 Developer Toolbar in IE10 (10.0.9200.16540) on Windows 7 (at least), you will see the body becomes padded and the parent window font switches to Times. Hope this helps someone!
Related
In a website I am developing, the background image is disappearing in Chrome. It is working fine in Edge and Firefox. I tried it in Another laptop to assure the problem is with Chrome and same in other laptop too. On inspecting, I found that for some unknown reason, Chrome automatically adds a property background-image: none; directly to the element.
See the faulty code here
This overwrites the property and div and makes background none. On disabling this property in inspect tool, the background images appears but refreshing page brings back the problem.
Well, here i have suggestions for you:
Check if any adblocker is working in your chrome or not. If yes, then please remove it, and try again.
Do not run the code at Chrome's incognito
Add the style elements at the head section of your HTML file.
Please let me know if it works or not. Don't hesitate to ask further questions.
I have found the root cause. It was due to an extension. It was not the Ad-Blocker in my case. Removing that extension has solved my problem
I don't really know how to phrase my problem. My page is working fine and all, responsive included (resizing my PC browser). But when I open the page from a browser in an actual phone, the blue section with icons gets all messed up.
There's apparently nothing wrong with it on the code. The thing that is driving me mad is, and as soon as I change anything from the inspector, it corrects itself (but that's something my users aren't going to do). It doesn't matter whether I change the color of a random text or anything, it reacts correcting itself whenever I make a change in the CSS on the inspector.
Can anyone help me figure this out? I'm attaching a screenshot from my phone before and after changing CSS on the inspector:
In which mobile did you try to show it?
I don't know if you solved it but i try to see your website from my smartphone and i show it correctly.
This has been mentioned before though after two days of trying everything I desperately need help. I've tried changing the z-index but it still shows behind the content though it does appear to be fine on Google Chrome but not Safari? I'm trying real hard to learn CSS so if someone could please explain my answer so that a retarded monkey could understand, that'd be great !
www.whiteboda.com
You have JavaScript Errors
Click F12 --> Console FIX the JavaScript
for this one
http://www.whiteboda.com/wedding-packages/
Try to play around z-index of with these CSS class="jqueryslidemenu" or class="sf-menu"
or by ID id="sf-menu" id="menu-menu-1"
To find that Info I use right click inspect element (Dev tools F12)
Then you can add CSS and test before update the real one
look into some tutorial of Google DEV tools
https://www.youtube.com/results?search_query=google+Dev+tools
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.