Mobile & avoiding Display:

[paulr]

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 :)

[RonRoe]

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.

[Senff]

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.

[paulr]

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_

[Senff]

http://validator.w3.org/check?uri=http%3A%2F%2Fmobifreaks.com%2Ffree-mobile-website-templates%2Fmobifreaks-classic-mobi-free-mobile-website-template%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Don’t see the error you posted above anywhere on this page.

[paulr]

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

list element ?

[Author]

Posts