Jump to content

Search the Community

Showing results for tags 'compatibility'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 8 results

  1. Hi! I'm new to W3C School forum, even if I read meny things about CSS in the main website. I'm trying to customize checkbox and radio inputs... I read many tutorials concerning input customization and I successfully customized buttons, password, text, etc and select, textbox, etc... My problem is the compatibility with browsers. I'm trying to develop a web-app (asp.net) in which I customized everything. Checkbox and Radio buttons are my "bête noire": I can't make them run on FireFox and iExplorer. I choose the "sprite" method, avoiding the use of labels, because my web-app can't use labels. So, this is the CSS code I'm currently using: input[type='checkbox'], input[type='radio']{ background-image: url('http://s28.postimg.org/oggskkn6x/controls.png'); background-repeat: no-repeat; width: 16px; height: 16px; margin: 0; padding: 0; -moz-appearance: none; /* not working */ -webkit-appearance: none; -ms-appearance: none; /*not working */ -o-appearance: none; appearance: none;}/* not checked */input[type='radio']{background-position: -32px 0; }/* checked */input[type='radio']:checked { background-position: -48px 0;}input[type='checkbox']:checked { background-position: -16px 0; }input[type='checkbox']:hover:checked, input[type='checkbox']:focus:checked { background-position: -16px -16px; }input[type='radio']:hover:checked,input[type='radio']:focus:checked { background-position: -48px -16px; }/* focus */input[type='checkbox']:hover,input[type='checkbox']:focus { background-position: 0 -16px; }input[type='radio']:hover,input[type='radio']:focus { background-position: -32px -16px; }/* active */input[type='checkbox']:active { background-position: 0 -48px; }input[type='radio']:active { background-position: -32px -48px; }input[type='checkbox']:active:checked { background-position: -16px -48px; }input[type='radio']:active:checked { background-position: -48px -48px; }/* disabled */input[type='checkbox']:disabled { background-position: 0 -32px; }input[type='radio']:disabled { background-position: -32px -32px; }input[type='checkbox']:disabled:checked { background-position: -16px -32px; }input[type='radio']:disabled:checked{ background-position: -48px -32px; }input[type='checkbox']:hover:disabled,input[type='checkbox']:focus:disabled { background-position: 0 -32px; }input[type='radio']:hover:disabled ,input[type='radio']:focus:disabled { background-position: -32px -32px; }input[type='checkbox']:hover:disabled:checked ,input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }input[type='radio']:hover:disabled:checked,input[type='radio']:focus:disabled:checked { background-position: -48px -32px; } Here, a JSFiddle in order to have a look on how it works: http://jsfiddle.net/Kztwn/5/ If you open it on Opera, Safari or Chrome everything works great (as expected) but, if you use iExplorer (v. 10/11) or Firefox...not! How can I make it work on Firefox, without lables and java? Just to summarize, this is the result I obtain on iExplorer (IE), FireFox (FF), Opera (O), Chrome ( C), and Safari (S): I can accept IE isn't working, but FireFox...how can I hide the default input style? Any ideas? Can anyone help me in finding the right solution? Thanks in advance! Nick
  2. I'm trying to work with SVGs but I'm pretty sure there's going to be some people using the old browsers that don't do this, so I'm looking into installing some kind of a fallback. Is there some way I can do this? Maybe make a DIV with the PNG for the background and containing the SVG?
  3. Need expert help, Javascript is same as example, but has error in IE, works perfect in chrome/firefox. Jquery spectrum() colorpicker The example works perfect in Internet explorer, here: http://jsfiddle.net/bgrins/ctkY3/ Then on my test site, using the exact same css+js files it will not work on my site in IE: http://xekon.byethost7.com/ I have even simplified the example a bit. I cannot tell what the problem is, but I would certainly appreciate any help. I inspected the source at jsfiddle but did not see anything being done differently. edit: Also I am using windows 7, latest updates, Internet Explorer 9.0.8112.16421I have also tried from windows XP sp3, latest updates, Internet Explorer 8.0.6001.18702
  4. I'm having issues with a list displaying properly, or at least how I'd like it to, in IE. It shows up like so in Firefox and Safari: With IE, the circles around the list items are squares. Does anyone have a fix for this? Here is the CSS for the list: .circlemenu{width: 100%;overflow:hidden;margin: 1.2em 0em} .circlemenu ul{margin: 0;padding: 0;font: bold 14px Geneva, Arial, Helvetica, sans-serif;list-style-type: none;text-align: left; /* "left", "center", or "right" align menu */margin: 0em 0em 0em 10em} .circlemenu li{display: inline;} .circlemenu li a{display:inline-block;text-align:center;text-decoration: none;border: solid 1pt #555555;color: #555555 ;margin: 0;margin-right:6em; /*right spacing between each link */width: 6em;height: 6em;border-radius: 4em; /*really large border radius to create round borders*/-moz-border-radius: 4em;-webkit-border-radius: 4em;} .circlemenu a span{position:relative;top:40%;} .circlemenu li a:visited{color: white;} .circlemenu a:hover{border: solid 1pt #CC0000;color: #CC0000;}
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>window.onload = function(){ document.getElementById("txt").onkeypress = function(evt){ var evt = (evt) ? evt : ( (event) ? event : null ) ; var elem = (evt.target) ? evt.target : ( (evt.srcElement) ? evt.srcElement : null ) ; if((evt.keyCode == 13) && (elem.type == "text")) { document.getElementById("t").focus(); return false; }}}function c(){alert(document.getElementById("txt").value);}</script></head><body><form name="form" id="form" onchange="c();"><input id="t" type="input" value="t"/><input id="txt" type="input" value=""/><input id="t2" type="input" value="t2"/></form></body></html> The onChange event is only fired in IE9, not IE7 or IE8.
  6. I've tested the code on the validator and, after ironing out a couple of errors, both the html and the css are valid, but although the page displays perfectly in Firefox it looks a mess in IE. It's at: http://phoenixchange...newIndex000.php I've tested it on Litmus and their result is the same as what I get. Ive attached two screen shots, showing the first two problems. One is of FF9.0.1 (screenshot from my machine) that shows what I want, and the other shows the Litmus test result of IE7. The three problems in IE are that: 1. The inline "menu" on the top of the grey banner and on the right of the window, slips inboard2. The content of the page drops about 150px down from the fixed grey banner3. The fixed banner isn't fixed in IE I've been being helped by dsonesuk on another thread (on another topic) but have moved it here and in case it's of interest more generally
  7. Hi,I´m new in this forums.Does anybody know how to really make a website look the same in all browsers?Maybe its impossible, but are there ways to even try?Thanks
  8. ursath

    Ie8 And <A Class

    Hello all,I have a problem for 3 days now and simply don't know what to do; google did not help.Basically I have to create a table on a website for upcoming events, some of which link to pages where people buy their tickets.I have assigned a class, ex1, to those links to style them in css.Works flawlessly in crome and in ff, as well as IE8 in compatibility mode, but not in IE8 which is the largest chunk of users and thus very important.The website is the following: *edited out, as it no longer exists*I understand that I have used mainly inline styles and yes I know external stylesheets are more useful, but as the url might give away, this is for me to see whether I can actually implement what is asked of me. The design is based on a printed sheet which students can hang on their walls, thus it is important for it to look like this.If you view the site in FF/GC you'll see the effect working, in IE8 however it displays the style of a:link, but actually does not link anymore, let alone hover/active. Interestingly enough, when tabbing through, a:focus works, as well as a:active and on pressing enter I get redirected as planned. This doesn't make sense to me and I have only found the common issue of IE8 ignoring empty anchors, which is not the case.Any help would be so, so, so much appreciated!!
  • Create New...