1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

No-JavaScript CSS toggle not working on Android 4.0.3

Discussion in 'CSS' started by xms, Jan 24, 2016.

  1. #1
    I would like to make a toggle button which will open more details. This works fine on my laptop, but not on my mobile phone. Why is that so? I quess that this should work on Android 4.0.3, but it does not do so.

    My XHTML code:

    <div class="listaus">
    <input type="checkbox" value="checked" id="someID-1" class="listaus-valintaruutu" />

    <div class="listaus-kilpailunimi"><span class="listaus-seura-sarja">&nbsp;Org / 1 div&nbsp;</span><br /><a href="test.php">1 div, RG2</a><span class="listaus-avauspainike"><label for="someID-1" class="listaus-avauspainike">+</label></span></div>

    <div id="tooltipID" class="listaus-sisalto">
    Hello World!
    </div>
    </div>

    My CSS code:

    .listaus-kilpailunimi {
    clear:both;
    margin:0px;
    padding:2px;
    padding-left:32px;
    color:#000000;
    border-bottom:1px dotted #444444;
    }

    span.listaus-seura-sarja {
    background-color:#C4DCF8;
    }

    span.listaus-avauspainike {
    float:right;
    margin-top:-5px;
    padding-right:0px;
    }

    label.listaus-avauspainike {
    cursor: pointer;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #FFFFFF;
    background-color: #13539B;
    font-family: Tahoma, Arial, "Times New Roman", sans-serif;
    font-weight: normal;
    font-size: 11px;
    color: #FFFFFF;
    text-align:center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
    SEMrush
    label.listaus-avauspainike:hover {
    border: 1px solid #D60C3C;
    background-color: #D60C3C;
    }

    .listaus-valintaruutu {
    display: none;
    }

    .listaus-sisalto {
    }

    .listaus-valintaruutu:checked ~ .listaus-sisalto {
    display: block;
    }

    .listaus-valintaruutu:not(checked) ~ .listaus-sisalto {
    display: none;
    }

    So, why does not that code toggle when using Android 4.0.3?
     
    xms, Jan 24, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Why are you using Android 4.0.3? It's at least 6 generations, if not more, old. Second, which browser? The built-in Android browser? It has crappy support for a lot of stuff, and might not like the CSS. If you're using Chrome, it should work just fine. Could you perhaps provide a link to the site, so it would be possible to test?
     
    PoPSiCLe, Jan 24, 2016 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,131
    Likes Received:
    1,696
    Best Answers:
    239
    Trophy Points:
    515
    #3
    :not is unpredictable cross browser, I advise NOT using it. Likewise if you're going to play with :checked, you really need to state your FULL specificity.

    Where you have this:
    
    
    .listaus-sisalto {
    }
    
    .listaus-valintaruutu:checked ~ .listaus-sisalto {
    display: block;
    }
    
    .listaus-valintaruutu:not(checked) ~ .listaus-sisalto {
    display: none;
    }
    Code (markup):
    I'd have this:

    
    
    .listaus-valintaruutu ~ .listaus-sisalto {
    	display: none;
    }
    
    .listaus-valintaruutu:checked ~ .listaus-sisalto {
    	display: block;
    }
    Code (markup):
    Though what browser under 4.0.3 and/or what version? There's more than just the built in one available, and at least three different versions of chrome on that one level build of Android alone...

    You also seem to have gone a bit class-happy in there. Really for what you are doing a good chunk of that markup is just code bloat.... and value="checked" is gibberish. If you want it to start out checked in XHTML it's checked="checked", not value="checked". only reason to state value is if that is being passed in a form to the server anyways. When you've got a perfectly good class on a parent element and no siblings of the same to worry about, don't dick around with throwing extra classes on the child elements. (no matter what dumbass halfwit garbage like CSSLint is telling people now) -- you even seem to have a number of "span for nothing" like the one wrapping the label, since you aren't doing anything on that span that couldn't be done on the label....

    Much less all those px measurements being a giant middle finger to accessibility...
     
    deathshadow, Jan 24, 2016 IP