Closed GoogleCodeExporter closed 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
Can't find a better solution, marked as fixed for now.
Original comment by ola...@gmail.com
on 8 Sep 2007 at 4:31
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
Any updates on this issue? TIA
Original comment by stech...@gmail.com
on 15 Oct 2007 at 7:43
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
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
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
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
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
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
@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
Original issue reported on code.google.com by
glenn.re...@gmail.com
on 4 Sep 2007 at 6:09