Ie CSS Bug: Background-Color: Transparent Behaves Differently to Background-Color: (Any Other Colour)

Also change your javascript

<script>  src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" >    $("#registerEventTerms").off('change').on('change', function() {      if ($(this).prop('checked', true);)        $("#eventRegister").css('background-color', '').css('border-color', '').prop('disabled', false);      else        $("#eventRegister").css('background-color', 'grey !important').css('border-color', 'grey !important').prop('disabled', true);    });</script>

How to make navigation react to background color

I have put together the following fiddle that achieves what i think you are after.

http://jsfiddle.net/Ecx2E/1/

It works by setting way points at the 50% mark on both up and down directions. Which is not the most modular logic but it works in this case. Ideally we would detect when each dot crosses into the new area and change it's colour accordingly.

$("section").waypoint(function(direction) {
    background = $(this).css('background-color');
    if (direction === 'down') {
        // Scrolling down
        if (background == 'rgb(0, 0, 0)') {
            $("#dots a").css('background-color', '#FFFFFF');
        } else {
            $("#dots a").css('background-color', '#000000');
        }
    }
},{
    offset: '50%'
}).waypoint(function(direction) {
    background = $(this).css('background-color');
    if (direction === 'up') {
        // Scrolling up
        if (background == 'rgb(255, 255, 255)') {
            $("#dots a").css('background-color', '#FFFFFF');
        } else {
            $("#dots a").css('background-color', '#000000');
        }
    }
},{
    offset: '50%'
});

This could be made a lot cleaner with some refactoring but this should be enough to get you going in the right direction.

IE9 Problems with link Cascading order?

Please check you div like <a href="#" class="nolinkcolor">Your test</a>. Also it matter parent container for link. If it is inside other container. you have to overwrite CSS. like:

modify CSS like:

body #parentContainerID or class a.nolinkcolor {}

Hyper link Color-styling in CSS

Visited: A link when it has already been visited (exists in the browser's history), styled using the :visited pseudo-class.

So if you have visited your link at least once it will always be visited

You can read more about this here.

How do I set a background-color for the width of text, not the width of the entire element, using CSS?

Put the text in an inline element, such as a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

And then apply the background color on the inline element.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

An inline element is as big as its contents is, so that should do it for you.

Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

You can use pure CSS to accomplish this. Here's a rundown for multi-browser support, chrome being covered by the first line and the final :focus bit. Details below.

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

Simply add the class="noSelect" attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Some have suggested using JavaScript, but I believe this is the cleanest solution.

For Android/Safari mobile/Edge

-webkit-tap-highlight-color: transparent; is the additional rule you may be looking for. Affects Chrome desktop (esp. with touchscreen) and mobile devices. Here's a warning about using this non-standard property, as well as some accessibility concerns with suggestions. Best practice is to replace the highlight with your own styling.

UPDATE: Later versions of Chrome...

A commenter on this answer pointed out :focus { outline: none !important;} is needed for newer versions of Chrome. Answer adapted to include this, as well! Ah, ever-changing standards.

---

Related Topics