search

kirubaharan12345 / blueprintcss

Automatically exported from code.google.com/p/blueprintcss
0 stars 0 forks source link

.clear display inline-block fails W3C validation in grid.css #26

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
When validating grid.css using W3C validator it reports:

.clear
Value Error : display inline-block is not a display value : inline-block

Investigating display options shows limited cross browser support for
display inline-block.

see:  http://www.quirksmode.org/css/display.html

Should display inline-block really be used for this purpose?

Original issue reported on code.google.com by glenn.re...@gmail.com on 4 Sep 2007 at 6:09

GoogleCodeExporter commented 8 years ago 
It's a fix for IE. Documented here:
http://www.positioniseverything.net/easyclearing.html

"The .clearfix {display: inline-block;} is seen by all browsers, and fixes 
IE/Mac. Then, inside the rule set that is 
hidden from IE/Mac, the display is reset to block. That's all she wrote! Simply 
stick the above code into your 
CSS, and use .clearfix on any box that has to contain a sizable float. Ain't 
that cool? Just watch out for 
previous external floats triggering the IE Float Model, as mentioned earlier.

Kudos to Alex Robinson for finding that inline-block is superior to the older 
inline-table fix for IE/Mac."

I'll see if I can't find a better, valid solution.

Original comment by ola...@gmail.com on 4 Sep 2007 at 7:19

GoogleCodeExporter commented 8 years ago 
Can't find a better solution, marked as fixed for now.

Original comment by ola...@gmail.com on 8 Sep 2007 at 4:31

GoogleCodeExporter commented 8 years ago 
Re-open.  No clear fix at the moment.  Leave open to track until we get 
creative.

Original comment by glenn.re...@gmail.com on 9 Sep 2007 at 10:49

GoogleCodeExporter commented 8 years ago 
Any updates on this issue? TIA

Original comment by stech...@gmail.com on 15 Oct 2007 at 7:43

GoogleCodeExporter commented 8 years ago 
I just ran grid.css through the validator and it only gave 2 warnings regarding 
the
colors for the hr tag - which validator are you using ?

I used this:
http://jigsaw.w3.org/css-validator/

and uploaded grid.css right from the 0.6 zip file.

Original comment by jtre...@gmail.com on 16 Oct 2007 at 5:44

GoogleCodeExporter commented 8 years ago 
There is a W3C validator binary and ruby script that ships with blueprint.  It 
is in
the script dir (validate_css.rb) and you can run it (at least tested on OS X) 
from
within that dir.  This was put there for the express purpose of having a single
portable validator that can be the baseline for blueprint compliance. The 
following
is reported when run against latest code:

Here is the issue referenced in the bug:

TESTING CORE FILE : ../blueprint/lib/grid.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/g
rid.css 

URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/grid.css
 Line : 208 Context : .clear, .container in property : display
        inline-block is not a display value : inline-block

And here is the complete output:

[glenn@mac-mini scripts (master)]$ ./validate_css.rb 
TESTING MAIN FILE : ../blueprint/screen.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/scree
n.css 

URI : 
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/blueprint/lib/grid.cs
s
 Line : 208 Context : .clear, .container in property : display
        inline-block is not a display value : inline-block

Warnings :

 URI : file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/blueprint/lib/grid.css
Line : 185 Level : 1 You have no color with your background-color : .box 
Line : 190 Level : 1 Same colors for background-color and color : hr 
Line : 200 Level : 1 Same colors for background-color and color : hr.space 

 URI : file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/blueprint/lib/forms.css
Line : 47 Level : 1 You have no color with your background-color : .success 
Line : 49 Level : 1 You have no background-color with your color : .error a 
Line : 50 Level : 1 You have no background-color with your color : .notice a 
Line : 51 Level : 1 You have no background-color with your color : .success a 

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/blueprint/lib/typogra
phy.css
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 54 Level : 1 You have no background-color with your color : a:hover 
Line : 54 Level : 1 You have no background-color with your color : a:hover 
Line : 55 Level : 1 You have no background-color with your color : a 
Line : 57 Level : 1 You have no background-color with your color : blockquote 
Line : 59 Level : 1 You have no color with your background-color : dfn 
Line : 59 Level : 1 You have no color with your background-color : dfn 
Line : 66 Level : 1 You have no background-color with your color : del 
Line : 92 Level : 1 You have no color with your background-color : th 
Line : 95 Level : 1 You have no color with your background-color : tr.even td 
Line : 97 Level : 1 You have no color with your background-color : caption 
Line : 110 Level : 1 You have no background-color with your color : .quiet 
Line : 111 Level : 1 You have no background-color with your color : .loud 
Line : 112 Level : 1 You have no color with your background-color : .highlight 

TESTING MAIN FILE : ../blueprint/print.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/print
.css 
Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
print.css
Line : 15 Level : 1 You have no background-color with your color : body 
Line : 29 Level : 1 Same colors for background-color and color : hr 
Line : 38 Level : 1 Same colors for background-color and color : hr.space 
Line : 62 Level : 1 You have no background-color with your color : .quiet 

TESTING CORE FILE : ../blueprint/lib/reset.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/r
eset.css 
Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/reset.css
Line : 29 Level : 1 You have no color with your background-color : body 

TESTING CORE FILE : ../blueprint/lib/typography.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/t
ypography.css

Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/typography.css
Line : 22 Level : 1 You have no background-color with your color : body 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 30 Level : 1 You have no background-color with your color : h6 
Line : 54 Level : 1 You have no background-color with your color : a:hover 
Line : 54 Level : 1 You have no background-color with your color : a:hover 
Line : 55 Level : 1 You have no background-color with your color : a 
Line : 57 Level : 1 You have no background-color with your color : blockquote 
Line : 59 Level : 1 You have no color with your background-color : dfn 
Line : 59 Level : 1 You have no color with your background-color : dfn 
Line : 66 Level : 1 You have no background-color with your color : del 
Line : 92 Level : 1 You have no color with your background-color : th 
Line : 95 Level : 1 You have no color with your background-color : tr.even td 
Line : 97 Level : 1 You have no color with your background-color : caption 
Line : 110 Level : 1 You have no background-color with your color : .quiet 
Line : 111 Level : 1 You have no background-color with your color : .loud 
Line : 112 Level : 1 You have no color with your background-color : .highlight 

TESTING CORE FILE : ../blueprint/lib/grid.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/g
rid.css 

URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/grid.css
 Line : 208 Context : .clear, .container in property : display
        inline-block is not a display value : inline-block

Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/grid.css
Line : 185 Level : 1 You have no color with your background-color : .box 
Line : 190 Level : 1 Same colors for background-color and color : hr 
Line : 200 Level : 1 Same colors for background-color and color : hr.space 

TESTING CORE FILE : ../blueprint/lib/forms.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/f
orms.css 
Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/forms.css
Line : 47 Level : 1 You have no color with your background-color : .success 
Line : 49 Level : 1 You have no background-color with your color : .error a 
Line : 50 Level : 1 You have no background-color with your color : .notice a 
Line : 51 Level : 1 You have no background-color with your color : .success a 

TESTING CORE FILE : ../blueprint/lib/ie.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/lib/i
e.css 

URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
lib/ie.css
 Line : 19 Context : * html .column in property : overflow-x
        Property overflow-x doesn't exist : hidden

TESTING COMPRESSED FILE : ../blueprint/compressed/screen.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/compr
essed/screen.css

URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
compressed/screen.css
 Line : 6 Context : blockquote, q in property : quotes
        Unrecognized  - :

Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
compressed/screen.css
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 8 Level : 1 You have no background-color with your color : h6 
Line : 18 Level : 1 You have no background-color with your color : a 
Line : 19 Level : 1 You have no background-color with your color : blockquote 
Line : 20 Level : 1 You have no color with your background-color : dfn 
Line : 20 Level : 1 You have no color with your background-color : dfn 
Line : 32 Level : 1 You have no color with your background-color : th 
Line : 35 Level : 1 You have no color with your background-color : tr.even td 
Line : 37 Level : 1 You have no color with your background-color : caption 
Line : 42 Level : 1 You have no color with your background-color : .highlight 
Line : 144 Level : 1 You have no color with your background-color : .box 
Line : 145 Level : 1 Same colors for background-color and color : hr 
Line : 146 Level : 1 Same colors for background-color and color : hr.space 
Line : 161 Level : 1 You have no color with your background-color : .success 
Line : 162 Level : 1 You have no background-color with your color : .error a 
Line : 163 Level : 1 You have no background-color with your color : .notice a 
Line : 164 Level : 1 You have no background-color with your color : .success a 
Line : 166 Level : 1 You have no background-color with your color : .loud 
Line : 166 Level : 1 You have no background-color with your color : .loud 
Line : 166 Level : 1 You have no background-color with your color : .loud 
Line : 168 Level : 1 You have no background-color with your color : .quiet 
Line : 168 Level : 1 You have no background-color with your color : .quiet 

TESTING COMPRESSED FILE : ../blueprint/compressed/print.css
-------------------------------------------------------

file :
/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/compr
essed/print.css

Warnings :

 URI :
file:/Users/glenn/src/git-svn/blueprintcss/blueprint/trunk/scripts/../blueprint/
compressed/print.css
Line : 1 Level : 1 You have no background-color with your color : body 
Line : 3 Level : 1 Same colors for background-color and color : hr 
Line : 4 Level : 1 Same colors for background-color and color : hr.space 
Line : 13 Level : 1 You have no background-color with your color : .quiet 

-------------------------------------------------------
-------------------------------------------------------
DONE TESTING!
[glenn@mac-mini scripts (master)]$

Original comment by glenn.re...@gmail.com on 16 Oct 2007 at 7:06

GoogleCodeExporter commented 8 years ago 
PS - I am not the owner of this bug. I am the reporter.  Status marked as new.

Original comment by glenn.re...@gmail.com on 16 Oct 2007 at 7:07

GoogleCodeExporter commented 8 years ago 
I posted in the group on this a while ago. The fact of the matter is that the
validator is WRONG (for the current spec). The W3C states that the validator 
contains
possible bugs and errata and that the Spec should be regarded as the true 
answer. The
CSS 2.1 spec offers inline-block as a property and while not all browsers 
render it
correctly it is still valid. Many apps that use the jigsaw engine have not 
updated to
the 2.1 spec and are using 2.0 which will throw the error. 

Here is my response from the thread, " error parsing value for property 
'display'"

<blockquote>The CSS Validator at W3C will throw an error for "inline_block" but
they also acknowledge that there are bugs and errata and that the Spec
should be assumed the correct way if there is question to validity.
Inline-Block is a completely valid value for the display property (CSS
2.1). Don't ever just assume that the validator for CSS is right. If
you are good at writing CSS and you get the odd error that has you
scratching your head you should first check the spec and then ask for
help if you are still uncertain. On poking around you will find that
the Jigsaw Validator is only validating to CSS 2 and doesn't seem to
be revised for 2.1 which is the current recommendation (as of July
2007). </blockquote>

It does seem as though the W3C has enabled (or I missed it in the first place) 
the
ability to select different versions of the CSS Spec. 

In this case the clearfix used withing the grid.css file is not a bug and 
should not
be one. BUT if there is room for improvement for crossbrowser compatibility 
then it
should be tested and live use be checked and corrected to remain within the 
grid.css.

All the best,

Jay

Original comment by smashing...@gmail.com on 16 Oct 2007 at 8:04

GoogleCodeExporter commented 8 years ago 
If the validator is incorrect and you have verified that its ok per the css 
spec then
I am happy to close the bug.  Just trying to make sure grid.css stays clean and
sticks to the specs.  :-)

I'll mark it as WontFix unless someone can demonstrate an actual issue in a 
specific
browser with the code as-is.

Cheers.

Original comment by glenn.re...@gmail.com on 16 Oct 2007 at 8:12

GoogleCodeExporter commented 8 years ago 
Hello guys, you could use different methods to clear floats without markup but 
it
really depends on the type of float you need to clear.

For example, you could simple use overflow:hidden to clear a simple 2-col float.

Most of the techniques have pros and cons, one just have to use what is needed.
http://www.robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-mark
up-different-techniques-explained/

Original comment by d.ne...@gmail.com on 17 Oct 2007 at 4:25

GoogleCodeExporter commented 8 years ago 
@glenn.rempe 
There may be cases where the designer will have to omit the use of the clearfix
becasue of their site requiring legacy browser support. It is known that 
inline-block
is not 100% compatible as older browsers have limited CSS2.1 support. The 
clearfix as
it stands is imperfect regardless of its validity and should only be used by 
those
who know what they are doing and who will do browser testing. 

@d.neojp The idea for the clearfix is only to grow the container to the same 
size as
the largest (longest) box/column inside. You are right that there are lots of 
methods
to clear or expand verticality including the overflow:hidden and extreme 
heights.

Original comment by smashing...@gmail.com on 17 Oct 2007 at 11:55