Display:Block Not Working in Chrome or Safari

Display:Block not working in Chrome or Safari

EDIT 2:

I think I have worked out your problem. Webkit overrides display: block; and computes it to be display: table-cell; in a td when there is no <!DOCTYPE> declared for your html.

To fix this I recommend you set <!DOCTYPE html> before <html> at the top of your html.

The reason the jsfiddle will work is because the site has a <!DOCTYPE> already declared.

Try this and let me know if it fixes your problem. If not I'll try find another answer.

Style=display:block; works in Chrome but not Safari

From testing this in Chrome and Safari, it seems Chrome is more forgiving in that it parses the style string and puts the right style in place for you, but Safari does not.

Try:

document.getElementById("cookie1").style.display = 'block';

It's probably best to be explicit like that anyway, instead of relying on string parsing for the style itself.

Display:inline-block not working on safari

Debugging

If something like this happens to you in the future you need to debug it.

All modern browsers feature in-built Web Inspectors/Developer Tools (and if they're not good enough for you - you can always grab Firebug).

If website looks different in X browsers all you need to do is to inspect the different-looking elements and then see what CSS rules are being applied to them. The differences are almost always related to different rules being applied. If you can't track existing rules in your CSS files they're most likely being added with JavaScript.

I've recorded a quick gif for your case, notice everything is fine after you remove floats and min-widths from your links (as previously stated by Imube). You don't actually need floats there, as inline-block will work just fine. I'd generally recommend avoiding floats wherever possible.

Opera vs Safari - tracking your problem using Dev Tools

Opera vs Safari Dev Tools

Uncompressed: https://gifyu.com/images/debug47afb.gif

Why it was not working

Looks like Safari ~~interprets~~ ignores min-width: auto in comparison other browsers (by the way what is auto supposed to mean in this case?).

Here's a demo that uses min-width of 150px for inline-block link and then overwrites it with auto. It works fine in other browsers, but in Safari the links are still 150px wide.

It's really easy to track down using dev tools:

Opera:

Opera

Safari:

Safari

DEMO

Learn more

Read more about dev tools for Chrome, Firefox and in Safari.

CSS display:block not working on Chrome for Android

Well, thanks to @JoostS insights I managed to fix this annoying error myself with this @media query for Chrome only:

/* @media queries for Chrome 29+ only */

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) and (max-width: 479px) {
    .fadeIn {
        display: initial;
        margin-left: 5% !important;
    }
    article {
        padding-left: 5%;
        padding-right: 5%;
    } 
}

See https://gitlab.com/snippets/17238 for more Chrome media queries.

Safari- show() and css('display','block') doesn't work

Add a # to <a href='#' and put a space between event. I try with safari work fine.

$(document).on('click','.skip-step',function(e){

    $('.spinner-ctn').css('display','block')

})

.spinner-ctn{

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  text-align: center;

  line-height: 0;

  width: 100%;

  height: 100%;

  z-index: 9999;

  background: rgba(255,255,255,.7);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" event="next" id="skipBotton" class="skip-step pull-right">link</a>

<div class="spinner-ctn"><a class="spinner">test</a></div>

Display: none/block for elements works in Firefox, not in Safari or Chrome

The right syntax is:

document.getElementById('EiT_ToC1').style.display = "none";

in jquery:

$("#EiT_ToC1").css("display", "none");

Table td display block not working on Chrome

Your table should be display: table. If you're worried about the lining, try adding display:block to the child elements.

The reason is that display: table creates the table layout mechanism , hence the rows and columns will be laid out properly;

In certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td elements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)

So, always leave the display: table-* styles intact if you want an actual table layout. Sort out your lining issues using the appropriate styles for that.

You can try spaning across several divs, and defining your child element in it, using colspan(on the td) and display:block (on the child-element).

style.display not working in Chrome, Safari - Firefox, IE11 OK

You are probably running into issues as a result of putting the event listener on the individual <option> elements, rather than the <select> (browsers are VERY picky about what you can do with <option> elements).

Try binding a function to the onchange for the <select>, instead, and then, when the value changes, get the new value and trigger the correct function based on that.

Trying to use the code that you already have, you could do something like this:

<select name="class_chorus" size="1" onchange="toggleAccomponement(event);">
    <option value="">Any</option>
    <option value="Preschool">Early Childhood</option>
    <option value="Elementary">Elementary</option>
    <option value="Childrens Chorus">Children's Chorus</option>
</select>

. . . and then, in the <script> section:

function toggleAccomponement(event) {
    var sCurrSelection = event.target.value;

    if (sCurrSelection === "Childrens Chorus") {
        showAccomp();
    }
    else {
        hideAccomp();
    }
}

Display:Block Not Working in Chrome or Safari