I have a website that uses OpenTable's reservation widget. In every browser except IE9 (including older versions of IE) I can style and manipulate the widget elements, both through a stylesheet and by using jQuery. But in IE9, the widget shows up with strange styling, and I can't effect it in any way. Even trying a simple test like $('#OT_form').hide(); has no effect whatsoever.
Here's a temporary link to the site:
http://www.tcmulder.com/jing/reservations
Anyone know what the problem might be?
Related
On the contact portion of my website, I noticed that there is a visual glitch only with Firefox that causes the JSFiddle SVG (and possibly others as well underneath it) to be a full size at refresh. Even after cache it does this. It does not occur on any other browsers. Have any of you seen similar issues to this?
It appears to work well on all other browsers including Chrome, Opera, Edge, etc. My fix with all other browsers for any flashing at refresh was to create a second class for things called .hiddenOnLoad and gave it a CSS display: none;
However, it appears that Firefox does not want to follow this rule and display my SVG even when it is supposed to be hidden until requested to fade in.
You need to remove at least the <a> tag on the <head> section:
<a name="top"></a>
You can also find other unnecessary tags and errors in your markup with the help of the W3C Markup Validation Service, like this: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.christopherfrydryck.cf%2Fcontact.html
I've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.
There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!
I am trying to create an interface using jQuery but having some difficulty making it work on different browsers although, what I am linking now should work on most of the Windows browsers.
See here: http://122.173.254.198/picasa_hover_experiment.htm
(Please note the problem part is programmed minimal and solution expected on same)
The problem is with images 3 and 8 which I want to focus on mouseover and show in between as other images. It fails to work on either Opera or IE 6 as I am testing. Would somebody provide me a cross-browser and working solution to it?
Try updating your jQuery to 1.4.2...
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js