Grow your CSS skills. Land your dream job.

Mobile & avoiding Display:

  • # December 15, 2012 at 6:46 am

    When checking with the w3c validator the quality of my handheld page i get a couple of warnings. One warning is about absolutely positionned elements.

    The warning points at ” display:block;” elements. Question is how can i avoid using them ? I use it to display in a button like manner very basic phone call, email, map and web site links.

    the original template is http://mobifreaks.com/free-mobile-website-templates/mobifreaks-classic-mobi-free-mobile-website-template/

    Is there a work around with lists, decoration and vertical spacing ? … or other

    Can anyone can help me out ?

    Thank you :)

    # December 15, 2012 at 7:22 am

    Could you post the full error you’re talking about? I’m really not sure I understand what the error is the way you wrote it.

    Also, when I validate the template at the link you posted, I don’t get an error anywhere close to that.

    # December 15, 2012 at 8:55 am

    By itself, there is nothing wrong with elements that are positioned absolute, and/or elements that have display:block;. If the W3C validator points to those with an error, it’s not because they’re positioned or have display:block;, but probably because there’s a mistake or typo in your code.

    Like RonRoe, when I run the URL you gave us through the validator, I don’t see anything about absolute or block or anything — just a few closing LI’s that shouldn’t be there.

    # December 15, 2012 at 11:50 am

    Thanks you for your replies :)
    hmmm using the template link i get the warning @ line 12: “The CSS style sheet contains rules referencing the position, display or float properties”. I have fixed many items.

    _Support for CSS style sheets varies from one device to the other, and cannot be entirely relied upon, especially to position the elements precisely. Floating and absolutely positioned elements should also be avoided on limited screens for usability reason since they may trigger scrolling in two directions.

    Triggered 32 times by http://mobifreaks.com/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=3.4.2. 10 first occurrences:
    Line 19
    … position: fixed
    Line 29
    … display: none
    Line 33
    … position: absolute
    Line 42
    … position: absolute
    Line 47
    … display: none
    Line 55
    … display: none
    Line 59
    … position: absolute
    Line 65
    … display: none
    Line 69
    … position: relative
    Line 80
    … position: relative
    Triggered 57 times by http://mobifreaks.com/wp-content/themes/mobifreaks_v3.1/style.css. 10 first occurrences:
    Line 59
    … display: block
    Line 79
    … float:right
    Line 81
    … float:left
    Line 85
    … position:relative
    Line 87
    … position:absolute
    Line 95
    … display:block
    Line 97
    … display: inline-block
    Line 191
    … position:relative
    Line 409
    … display:inline
    Line 465
    … display: block_

    # December 16, 2012 at 12:49 pm

    Let me rephrase my question : How can i achieve http://indevshop.com/m/ using the

      list element ?
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".