Skip to content

Commit

Permalink
overflow hidden, new block formatting context
Browse files Browse the repository at this point in the history
  • Loading branch information
@stubbornella
stubbornella committed Aug 5, 2011
1 parent d4c6914 commit 9bb82e8
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 13 deletions.
5 changes: 2 additions & 3 deletions core/grid/grids.css
View file
@@ -1,5 +1,4 @@
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.line{*zoom:1;}
.line,.lastUnit{overflow:hidden; *overflow:visible;*zoom:1;}

This comment has been minimized.

Sign in to view

Copy link
@chrisjaure

chrisjaure May 2, 2012

Can I ask why you changed the new block formatting context technique to overflow:hidden? Was there something wrong with the old technique?

This comment has been minimized.

Sign in to view

Copy link
@AlessMascherpa

AlessMascherpa Jun 15, 2012

This change is wrong due to accessibility concerns. Avoid overflow hidden. I recommend you to revert this change.
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
Expand All @@ -11,4 +10,4 @@
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
.lastUnit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}
6 changes: 1 addition & 5 deletions core/media/media.css
View file
@@ -1,9 +1,5 @@
/* ====== media (requires mod.css) ====== */
.media{margin: 10px;}
.media:after, .bd:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.media .bd{display:table-cell; zoom:1;}
.media .bd > :first-child{margin-top:0;}
.media .bd > :last-child{margin-bottom:0;}
.media{overflow:hidden;*overflow:visible;zoom:1;}
.media .img{float:left;/*margin-right: 10px;*/}
.media .img img{display:block;}
.media .imgExt{float:right; /*margin-left: 10px;*/}
3 changes: 2 additions & 1 deletion core/media/media.html
View file
Expand Up @@ -18,7 +18,7 @@ <h1>Media Block</h1>
</div>


<div class="media attribution">
<div class="media">
<a href="http://twitter.com/stubbornella" class="img"><img src="http://placehold.it/32x32" alt="img" height="32" width="32" /></a>
<div class="bd">
<p class="ptn"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></p>
Expand Down Expand Up @@ -58,6 +58,7 @@ <h1>Media Block</h1>
<div class="bd">
<p>Last week I went to Yahoo! to give a talk about design performance for YUI theater.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious-is-a-really-long-word.</p>
</div>
</div>

Expand Down
4 changes: 1 addition & 3 deletions core/module/mod.css
View file
Expand Up @@ -7,9 +7,7 @@ version: 0.2
/* mod */
.mod{margin:10px;}
.mod .inner{/*background: url(skin/transparent.png) repeat left top;*/}
.bd,.ft, .hd{display: inline-block; width:100%; *display:block; *width:auto; zoom:1;}
.inner:after,.hd:after,.bd:after,.ft:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.inner{position:relative;}
.bd,.ft, .hd{overflow:hidden; *overflow:visible; zoom:1;}
b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
.tl{background-position: left top;}
Expand Down
6 changes: 6 additions & 0 deletions core/module/mod_doc.html
View file
Expand Up @@ -4,6 +4,11 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Standard Module Format</title>
<link rel="stylesheet" type="text/css" media="all" href="../../all.css" />
<!--<link rel="stylesheet" type="text/css" media="all" href="mod_debug.css" />-->
<style type="text/css">
.posAbsolute{position:absolute;background-color:red;}
.posAbsolute strong{margin-top: -15px;display:block; background-color:green; height:20px; width:20px;}
</style>
</head>
<body>
<div class="page">
Expand Down Expand Up @@ -88,6 +93,7 @@ <h3>grab</h3>
</div>
<div class="bd">
<p>Body</p>
<p class="posAbsolute">Absolute positioned element <strong>neg margins</strong></p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
Expand Down
1 change: 0 additions & 1 deletion core/module/mod_skins.css
View file
Expand Up @@ -104,7 +104,6 @@
background-image:-moz-linear-gradient(0% 8% 270deg, #E2E2E2, #FFFFFF, #FFFFFF 77%);}
.bam{background: #00477a url(skin/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
.gonz{background:url(skin/gc_header.png) no-repeat left top;}/* messed up */
.online{background: #9a9400 url(skin/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;}
.online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;}
.help{background: #b20029 url(skin/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
Expand Down

0 comments on commit 9bb82e8

Please sign in to comment.