SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    vertical centering

    I've tried various techniques to get vertical centering to work in this situation, but have been unsuccessful.

    I whipped up a silder/rotator/carousel for content. It has the option of display just text, just a thumbnail image, or both.

    What I'm trying to get vertically centered is the image when both the text and thumbnail image are displayed (the example is inside element ID "post-87").

    The image height can vary between 1px and 200px.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
    <style type="text/css">
    /* start reset */
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100.01%;
    	color: black;
    	background-color: #f9f9f9;
    }
    p { margin: .2em 0 .8em 0; }
    ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
    ul, ol { margin-top: .2em; margin-bottom: .8em; }
    
    
    a img { border: none; }
    
    
    
    
    /* --clearfix hack-- */
    .clearfix:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { display:inline-block; }
    
    
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    /* --end clearfix hack-- */
    
    
    /* end reset */
    
    
    
    
    #content {
    	width: 960px;
    	margin: 20px auto;
    }
    
    
    
    
    /* start carousel */
    #content #featured-carousel {
    	position:relative;
    	width:100%;
    	border:1px solid #CAD6E8;
    	-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    	margin-bottom:2em;
    }
    #content #featured-carousel ul {
    	position:relative;
    	margin:0;
    	float:left;
    	width:100%;
    }	
    #content #featured-carousel ul li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	clear:both;
    	position:absolute;
    	width:100%;
    	/*border:1px solid black;*/ /* outline for troubleshooting */
    	overflow:hidden;
    	height: auto !important;
    	min-height:100%;
    	height:100%;
    }
    #content #featured-carousel ul li div.carousel-content-left {
    	float:left;
    	width:50%;
    	/*border:1px solid blue;*/ /* outline for troubleshooting */
    }
    #content #featured-carousel ul li div.carousel-content-left-inner {
    	padding:.4em .4em .4em .8em;
    }
    #content #featured-carousel ul li div.carousel-content-right {
    	float:right;
    	width:49%;
    	text-align:center;
    	/*border:1px solid blue;*/ /* outline for troubleshooting */
    }
    /*#content #featured-carousel ul li div.carousel-content-right:before {
    	content: '';
    	display: inline-block;
    	height: 100%; 
    	vertical-align: middle;  
    }*/
    #content #featured-carousel ul li div.carousel-content-right-inner {
    	padding:.4em .8em .4em .4em;
    	/*border:1px solid black;*/ /* outline for troubleshooting */
    }
    #content #featured-carousel ul li div.carousel-content-right-inner a {
    
    
    }
    
    
    
    
    
    
    #content #featured-carousel ul li.nocontent div.carousel-content-left,#content #featured-carousel ul li.nothumb div.carousel-content-left {
    	clear:both;
    	display:block;
    	width:100%;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-right {
    	clear:both;
    	display:block;
    	width:100%;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-right-inner img {
    	margin-top:0;
    }
    
    
    
    
    #content #featured-carousel ul li.nothumb div.carousel-content-right {
    	clear:both;
    	display:none;
    	width:0;
    	float:left;
    }
    #content #featured-carousel ul li.nothumb div.carousel-content-right-inner img {
    	margin-top:0;
    }
    
    
    
    
    #content #featured-carousel #carousel-nav{
    	position:relative;
    	text-align:center;
    	padding: .5em 0 .3em 0;
    	clear:both;
    	border-top:1px solid #CAD6E8;
    	zoom:1;
    }
    
    
    #content #featured-carousel #carousel-nav-pages a{
    	display:inline-block;
    	background:#CCCCCC;
    	width:15px;
    	height:15px;
    	margin:0px 4px 2px 4px;
    	
    }
    #content #featured-carousel #carousel-nav-pages a:hover{
    	background:#00a0e4;
    }
    #content #featured-carousel #carousel-nav-pages a.activeSlide {
    	background:#00a0e4;
    }
    
    
    #content #featured-carousel a#carousel-next-link,#content #featured-carousel a#carousel-prev-link{
    	display:inline-block;
    	width:20px;
    	height:20px;
    }
    #content #featured-carousel a#carousel-next-link{
    	background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-next-link:hover{
    	background:#00a0e4;
    }
    #content #featured-carousel a#carousel-prev-link{
    	background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-prev-link:hover{
    	background:#00a0e4;
    }
    
    
    
    
    </style>
    
    
    
    
    </head>
    <body>
    
    
    <div id="content">
    	<div id="content-inner">
    
    
    		<!-- begin content -->
    
    
    				
    																	
    			<div id="featured-carousel">
    				<ul id="carousel-items">
    					<li class="nocontent" id="post-228">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">More Plans</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on September 7, 2012</span></div>
    								<div class="carousel-summary"></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
    							</div>
    						</div>
    					</li>
    
    
    					<li class="" id="post-87">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">Some Announcements</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on August 24, 2012</span></div>
    								<div class="carousel-summary"><p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;&raquo;</a></p></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
    							</div>
    						</div>
    					</li>
    
    
    					<li class="nothumb" id="post-90">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">Small Plans</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on August 22, 2012</span></div>
    								<div class="carousel-summary"><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... <a href="">Read More&nbsp;&raquo;</a></p></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img src="http://www.placehold.it/125x97"></a>
    							</div>
    						</div>
    					</li>
    
    
    				</ul>
    				
    				<div id="carousel-nav">
    					<a title="Previous" id="carousel-prev-link" href=""></a>
    					<span id="carousel-nav-pages"></span>
    					<a title="Next" id="carousel-next-link" href=""></a>							
    				</div>
    				
    				<script type="text/javascript">
    					$('#featured-carousel ul').cycle({
    						fx:'fade',
    					speed:800,
    						timeout:5000,
    						prev: '#carousel-prev-link',
    						next: '#carousel-next-link',
    						pager: '#carousel-nav-pages',
    						pause: 1,
    						pagerAnchorBuilder: function(idx, slide) {
    							var index = idx+1;
    							return '<a href="#" title="'+index+'"></a>';
    						}
    					});
    				</script>
    		</div>
    					
    					
    					
    
    
    	<!--end content -->			
    					
    	</div>
    </div>
    			
    </body>
    </html>
    Attached is an image that shows the carousel. The carousel on the top shows how things are displayed now. The carousel on the bottom is what I'm trying to get it to look like.

    carousel.jpg
    Last edited by Force Flow; Sep 12, 2012 at 07:17. Reason: minor code update
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'll take a better look in a minute but I think display: table should allow you to have two columns of equal height and vertical-align: middle the image on the right.

    That will work in ie8+ which I think is fine given it's just a slight presentation change.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I'll take a better look in a minute but I think display: table should allow you to have two columns of equal height and vertical-align: middle the image on the right.
    The catch is that the container is absolutely positioned so that the "slides" can lay on top of each other. I wasn't able to get the standard display:table technique working here.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Ah, right.
    In that case wouldn't another wrapper with display:table inside the absolute element do the trick? e.g.

    HTML Code:
    <li class="nothumb" id="post-90">
      <div class="carousel-content">
        <div class="carousel-content-left">
          <div class="carousel-content-left-inner">
            <h2 class="carousel-title"><a href="">Small Plans</a></h2>
            <div class="entry-meta"><span class="post-date">Published on August 22, 2012</span></div>
            <div class="carousel-summary"><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... <a href="">Read More&nbsp;&raquo;</a></p></div>
          </div>
        </div>
        <div class="carousel-content-right">
          <div class="carousel-content-right-inner">
            <a href=""><img src="http://www.placehold.it/125x97"></a>
          </div>
        </div>
      </div>
    </li>
    Code css:
    .carousel-content {
      display: table
    }
    .carousel-content-left, .carousel-content-right {
      display: table-cell
    }
    .carousel-content-right {
      vertical-align: middle
    }

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is way over my head, but I'm tinkering, anyway.

    How is the height of the carousel determined before the animation starts running? If it is a value that is determined by jQuery, can jQuery return it in a variable? If it can be applied to the css, I think we might be close to a solution.

    Ron

  6. #6
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Ah, right.
    In that case wouldn't another wrapper with display:table inside the absolute element do the trick? e.g.
    Unfortunately, no. It doesn't appear to have any effect.

    There's also a secondary problem with putting in another wrapper. I have to apply 100% height to the li element so that all the li elements fill the ul element. I haven't been able to nest 100% height elements inside each other, so the wrapper doesn't have 100% height applied to it. I was using this technique:
    Code:
        height: auto !important;
        min-height:100%;
        height:100%;
    Quote Originally Posted by ronpat View Post
    How is the height of the carousel determined before the animation starts running? If it is a value that is determined by jQuery, can jQuery return it in a variable? If it can be applied to the css, I think we might be close to a solution.
    The ul and li elements are assigned height by the jquery cycle script. It would take some serious time to tear it apart and make those variables accessible. All other nested elements are untouched by the script.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Force Flow View Post
    Unfortunately, no. It doesn't appear to have any effect.
    Worked for me, take a look at the second slide which has a lot of content to show the effect.
    The nocontent class is removing the formatting on the first slide.

    All I did was give the left and right columns display: table-cell; and vertical-align: middle;
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <style>
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 100.01%;
      color: black;
      background-color: #f9f9f9;
    }
    p { margin: .2em 0 .8em 0; }
    ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
    ul, ol { margin-top: .2em; margin-bottom: .8em; }
    a img { border: none; }
    .clearfix:after {
      content:" ";
      display:block;
      height:0;
      clear:both;
      visibility:hidden;
    }
    .clearfix { display:inline-block; }
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    
    #content {
      width: 960px;
      margin: 20px auto;
    }
    #content #featured-carousel {
      position:relative;
      width:100%;
      border:1px solid #CAD6E8;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      margin-bottom:2em;
    }
    #content #featured-carousel ul {
      position:relative;
      margin:0;
      float:left;
      width:100%;
    }    
    #content #featured-carousel ul li {
      margin:0;
      padding:0;
      list-style:none;
      clear:both;
      position:absolute;
      width:100%;
      overflow:hidden;
      height: auto !important;
      min-height:100%;
      height:100%;
    }
    #content #featured-carousel ul li div.carousel-content-left-inner,
    #content #featured-carousel ul li div.carousel-content-right-inner {
      padding:.4em .4em .4em .8em;
    }
    #content #featured-carousel ul li div.carousel-content-left, 
    #content #featured-carousel ul li div.carousel-content-right {
      display: table-cell;
      width:50%;
    }
    #content #featured-carousel ul li div.carousel-content-right {
      vertical-align: middle;
      text-align: center;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-left,#content #featured-carousel ul li.nothumb div.carousel-content-left {
      clear:both;
      display:block;
      width:100%;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-right {
      clear:both;
      display:block;
      width:100%;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-right-inner img {
      margin-top:0;
    }
    #content #featured-carousel ul li.nothumb div.carousel-content-right {
      clear:both;
      display:none;
      width:0;
    }
    #content #featured-carousel ul li.nothumb div.carousel-content-right-inner img {
      margin-top:0;
    }
    #content #featured-carousel #carousel-nav{
      position:relative;
      text-align:center;
      padding: .4em 0 .3em 0;
      clear:both;
      border-top:1px solid #CAD6E8;
    }
    #content #featured-carousel #carousel-nav-pages a{
      display:inline-block;
      background:#CCCCCC;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      width:15px;
      height:15px;
      margin:0px 4px 2px 4px;
    }
    #content #featured-carousel #carousel-nav-pages a:hover{
      background:#00a0e4;
    }
    #content #featured-carousel #carousel-nav-pages a.activeSlide {
      background:#00a0e4;
    }
    #content #featured-carousel a#carousel-next-link,#content #featured-carousel a#carousel-prev-link{
      display:inline-block;
      width:20px;
      height:20px;
    }
    #content #featured-carousel a#carousel-next-link{
      background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-next-link:hover{
      background:#00a0e4;
    }
    #content #featured-carousel a#carousel-prev-link{
      background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-prev-link:hover{
      background:#00a0e4;
    }
    </style>
    <title></title>
    </head>
    <body>
    <div id="content">
      <div id="content-inner">
        <!-- begin content -->
        <div id="featured-carousel">
          <ul id="carousel-items">
            <li class="nocontent" id="post-228">
              <div class="carousel-content-left">
                <div class="carousel-content-left-inner">
                  <h2 class="carousel-title">
                    <a href="">More Plans</a>
                  </h2>
                  <div class="entry-meta">
                    <span class="post-date">Published on September 7, 2012</span>
                  </div>
                  <div class="carousel-summary"></div>
                </div>
              </div>
              <div class="carousel-content-right">
                <div class="carousel-content-right-inner">
                  <a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
                </div>
              </div>
            </li>
            <li class="" id="post-87">
              <div class="carousel-content-left">
                <div class="carousel-content-left-inner">
                  <h2 class="carousel-title">
                    <a href="">Some Announcements</a>
                  </h2>
                  <div class="entry-meta">
                    <span class="post-date">Published on August 24, 2012</span>
                  </div>
                  <div class="carousel-summary">
                    <p>
                      Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;</a>
                    </p>
                     <p>
                        Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;</a>
                      </p>
                  </div>
                </div>
              </div>
              <div class="carousel-content-right">
                <div class="carousel-content-right-inner">
                  <a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
                </div>
              </div>
            </li>
            <li class="nothumb" id="post-90">
              <div class="carousel-content-left">
                <div class="carousel-content-left-inner">
                  <h2 class="carousel-title">
                    <a href="">Small Plans</a>
                  </h2>
                  <div class="entry-meta">
                    <span class="post-date">Published on August 22, 2012</span>
                  </div>
                  <div class="carousel-summary">
                    <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... <a href="">Read More&nbsp;</a>
                    </p>
                  </div>
                </div>
              </div>
              <div class="carousel-content-right">
                <div class="carousel-content-right-inner">
                  <a href=""><img src="http://www.placehold.it/125x97"></a>
                </div>
              </div>
            </li>
          </ul>
          <div id="carousel-nav">
            <a title="Previous" id="carousel-prev-link" href="" name="carousel-prev-link"></a> <span id="carousel-nav-pages"></span> <a title="Next" id="carousel-next-link" href="" name="carousel-next-link"></a>
          </div><script type="text/javascript">
    $('#featured-carousel ul').cycle({
          fx:'fade',
          speed:800,
          timeout:5000,
          prev: '#carousel-prev-link',
          next: '#carousel-next-link',
          pager: '#carousel-nav-pages',
          pause: 1,
          pagerAnchorBuilder: function(idx, slide) {
            var index = idx+1;
            return '<a href="#" title="'+index+'"><\/a>';
          }
          });
          </script>
        </div>
      </div>
    </div>
    </body>
    </html>

  8. #8
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Worked for me, take a look at the second slide which has a lot of content to show the effect.
    The nocontent class is removing the formatting on the first slide.

    All I did was give the left and right columns display: table-cell; and vertical-align: middle;
    On the second slide, you added a second paragraph to extend the height. There's only ever going to be one paragraph. I can't rely on that to determine the height for vertical centering.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Without the second paragraph it is still centered vertically you just can't see it because the image is bigger than than the content on the left.
    I must be missing something..

  10. #10
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Here's a simplified test case using display:table which has height: 100%; of the absolute element.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    .carousel-item {
      position: absolute;
      height: 300px;
    }
    .carousel-content {
      display: table;
      height: 100%;
    }
    .carousel-content-left, .carousel-content-right {
      display: table-cell;
      height: 100%;
    }
    .carousel-content-right {
      vertical-align: middle;
    }
    </style>
    <title></title>
    </head>
    <body>
    <div class="carousel-item">
      <div class="carousel-content">
        <div class="carousel-content-left">
          <p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;</a></p>
        </div>
        <div class="carousel-content-right">
          <a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
        </div>
      </div>
    </div>
    </body>
    </html>

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, markbrown4,

    The table doesn't know how tall it should be because that number is calculated by jQuery. jQuery apparently compares the height of the three slides and assigns the height of the slide with the tallest contents to all 3. The table doesn't "inherit" that value.

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Whether the heights are set dynamically shouldn't make a difference for the table inheriting the height.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    #carousel-item {
      position: absolute;
      background: #E8FFE2;
    }
    .carousel-content {
      display: table;
      height: 100%;
    }
    .carousel-content-left, .carousel-content-right {
      display: table-cell;
      height: 100%;
    }
    .carousel-content-right {
      vertical-align: middle;
    }
    </style>
    <title></title>
    </head>
    <body>
    
    <div id="carousel-item">
      <div class="carousel-content">
        <div class="carousel-content-left">
          <p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;</a></p>
        </div>
        <div class="carousel-content-right">
          <a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
    $('#carousel-item').css({
      height: '400px'
    })
    </script>
    </body>
    </html>

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    A question for anyone, please......

    What is the purpose of applying

    #content #featured-carousel ul li {
    height:auto !important;
    min-height:100%;
    height:100%;

    particularly, the min-height.

    It looks like super-kill, but I have a funny feeling there are solid reasons.

  14. #14
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That looked wrong to me as well. I believe it will do the same thing as height: 100%;

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    There ARE differences, but I don't understand them. Using all 3 seems like an attempt to "cover all bases" or browser versions, but that's just an impression... a guess. Am trying to learn as I go along, so I ask questions. Your "proof of concept" is dynamite. There's gotta be a solution!

    And, yes, there IS something funny going on with the "height"s.

    So the "what is the purpose" question still stands... What would the different versions of "height" serve in this example? Hopefully FF can shed some light.

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I rebuilt the page element by element in a minimalist fashion without floats. The image in the table-cell centered vertically. As soon as JavaScript was started, the table-cells were reduced to the height of the image and positioned at the top of the slide. Ultimately, I think jQuery is the culprit. Interestingly, the li {display:table} appeared to remain the full height of the slide. I used outlines to judge these sizes.

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    For what it's worth... on a copy of FF's original code, I added the class "both" to the unclassed "li"
    HTML Code:
    <li class="both" id="post-87">
    Then added these lines in css
    Code:
    #content #featured-carousel ul {
        background-color:lightyellow;     /* FOR TEST PURPOSES */
    }
    #content #featured-carousel ul li div.carousel-content-right {
        outline:1px dotted magenta;       /* FOR TEST PURPOSES */
    }
    #content #featured-carousel ul li div.carousel-content-left {
        outline:1px dotted magenta;       /* FOR TEST PURPOSES */
    }
    #content #featured-carousel ul li.both div.carousel-content-right {
        position:relative;
        top:30px;
    }
    It demonstrates that the box containing the image can be repositioned. For what it's worth.

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Flies but don't float (so to speak)

    "This is Houston, we have a procedure for you."

    FF, if the floats are important to your design, you'll have to reinsert them

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!-- COMMENTS
        All floats and clears have been removed to simplify the code for problem solving.
        
      * jQuery Cycle Plugin (with Transition Definitions)
      * Examples and documentation at: http://jquery.malsup.com/cycle/
    -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <style type="text/css">
    
    /* start reset */
    
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td {
        margin:0px;
        padding:0px;
    }
    body {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:100.01%;
        color:black;
        background-color:#f9f9f9;
    }
    p {margin:.2em 0 .8em 0;}
    ul, ol, li {margin:0 0 0 1.4em; padding:0px;}
    ul, ol {margin-top:.2em; margin-bottom:.8em;}
    
    a img {border:none;}
    
    /* end reset */
    
    #content {
        width:960px;
        margin:20px auto;
    }
    
    /* start carousel */
    
    #content #featured-carousel {
        position:relative;
        width:100%;
        border:1px solid #cad6e8;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        border-radius:6px;
        margin-bottom:2em;
    }
    
    #content #featured-carousel ul {      /* ul#carousel-items */
        background-color:lightyellow;     /* ADDED FOR TEST PURPOSES */
        position:relative;
        width:100%;
        margin:0;
    }
    
    #content #featured-carousel ul li {
        list-style:none;
        position:absolute;                /* COMMENTED OUT FOR TEST PURPOSES */
        width:100%;
    /*  overflow:hidden; */               /* COMMENTED OUT FOR TEST PURPOSES */
        height:auto !important;
        min-height:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    
    
    #content #featured-carousel ul li div.carousel-content-left {}
    #content #featured-carousel ul li div.carousel-content-left-inner {
        padding:.4em .4em .4em .8em;
    }
    #content #featured-carousel ul li div.carousel-content-right {
        text-align:center;
    }
    #content #featured-carousel ul li div.carousel-content-right-inner {
        padding:.4em .8em .4em .4em;
    }
    #content #featured-carousel ul li div.carousel-content-right-inner a {}
    
    
    
    #content #featured-carousel ul li.both {
        outline:1px dotted magenta;   /* ADDED FOR TEST PURPOSES */
        display:table !important;     /* !important is REQUIRED here */
        height:100% !important;       /* !important is REQUIRED here */
    }
    #content #featured-carousel ul li.both div.carousel-content-left,
    #content #featured-carousel ul li.both div.carousel-content-right {
        outline:1px dotted cyan;      /* ADDED FOR TEST PURPOSES */
        display:table-cell;
        width:50%;
        vertical-align:top;
    }
    #content #featured-carousel ul li.both div.carousel-content-right {
        vertical-align:middle;
    }
    #content #featured-carousel ul li.both div.carousel-content-right-inner {
        padding:.4em .4em .4em .4em;
    }
    
    
    
    #content #featured-carousel ul li.nocontent div.carousel-content-left,
    #content #featured-carousel ul li.nocontent div.carousel-content-right,
    #content #featured-carousel ul li.nothumb   div.carousel-content-left {
        display:block;
        width:100%;
    }
    #content #featured-carousel ul li.nocontent div.carousel-content-right-inner img,
    #content #featured-carousel ul li.nothumb   div.carousel-content-right-inner img {
        margin-top:0;
    }
    #content #featured-carousel ul li.nothumb   div.carousel-content-right {
        display:none;
        width:0;
    }
    
    
    #content #featured-carousel  #carousel-nav {
        position:relative;
        text-align:center;
        padding:.4em 0 .3em 0;
        border-top:1px solid #cad6e8;
    }
    #content #featured-carousel  #carousel-nav-pages a {
        display:inline-block;
        background:#ccc;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        width:15px;
        height:15px;
        margin:0px 4px 2px 4px;
    }
    #content #featured-carousel  #carousel-nav-pages a:hover,
    #content #featured-carousel  #carousel-nav-pages a.activeSlide {
        background:#00a0e4;
    }
    
    
    #content #featured-carousel a#carousel-next-link,
    #content #featured-carousel a#carousel-prev-link {
        display:inline-block;
        width:20px;
        height:20px;
    }
    #content #featured-carousel a#carousel-prev-link,
    #content #featured-carousel a#carousel-next-link {
        background:#ccc;
    }
    #content #featured-carousel a#carousel-prev-link:hover,
    #content #featured-carousel a#carousel-next-link:hover {
        background:#00a0e4;
    }
    
    </style>
    <title></title>
    </head>
    <body>
    
    <div id="content">
        <div id="content-inner">
    
        <!-- begin content -->
    
            <div id="featured-carousel">
    
                <ul id="carousel-items">
    
                    <li class="nocontent" id="post-228">
                        <div class="carousel-content-left">
                            <div class="carousel-content-left-inner">
                                <h2 class="carousel-title"><a href="#">More Plans</a></h2>
                                <div class="entry-meta"><span class="post-date">Published on September 7, 2012</span></div>
                                <div class="carousel-summary"></div>
                            </div>
                        </div>
                        <div class="carousel-content-right">
                            <div class="carousel-content-right-inner">
                                <a href="#"><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
                            </div>
                        </div>
                    </li>
    
                    <li class="both" id="post-87">
                        <div class="carousel-content-left">
                            <div class="carousel-content-left-inner">
                                <h2 class="carousel-title"><a href="#">Some Announcements</a></h2>
                                <div class="entry-meta"><span class="post-date">Published on August 24, 2012</span></div>
                                <div class="carousel-summary"><p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="#">Read More&nbsp;&raquo;</a></p></div>
                            </div>
                        </div>
                        <div class="carousel-content-right">
                            <div class="carousel-content-right-inner">
                                <a href="#"><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
                            </div>
                        </div>
                    </li>
    
                    <li class="nothumb" id="post-90">
                        <div class="carousel-content-left">
                            <div class="carousel-content-left-inner">
                                <h2 class="carousel-title"><a href="#">Small Plans</a></h2>
                                <div class="entry-meta"><span class="post-date">Published on August 22, 2012</span></div>
                                <div class="carousel-summary"><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... <a href="#">Read More&nbsp;&raquo;</a></p></div>
                            </div>
                        </div>
                        <div class="carousel-content-right">
                            <div class="carousel-content-right-inner">
                                <a href="#"><img src="http://www.placehold.it/125x97" alt=""></a>
                            </div>
                        </div>
                    </li>
    
                </ul>
    
                <div id="carousel-nav">
                    <a title="Previous" id="carousel-prev-link" href="#"></a>
                    <span id="carousel-nav-pages"></span>
                    <a title="Next" id="carousel-next-link" href="#"></a>
                </div>
    
                <script type="text/javascript">
                    $('#featured-carousel ul').cycle({
                        fx:'fade',
                        speed:600,
                        timeout:1000,
                        prev: '#carousel-prev-link',
                        next: '#carousel-next-link',
                        pager: '#carousel-nav-pages',
                        pause: 1,
                        pagerAnchorBuilder: function(idx, slide) {
                            var index = idx+1;
                            return '<a href="#" title="'+index+'"><\/a>';
                        }
                    });
                </script>
    
            </div>
    
        <!--end content -->
    
        </div>
    </div>
    
    </body>
    </html>

  19. #19
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    ronpat, it looks like you nailed it. Having both floats and CSS tables at the same time seemed to be the problem. Thanks!

    I'll just have to use the float method I started out with for IE7 (since CSS tables aren't supported in IE7), so I'll put those on a separate stylesheet.

    Here's the code (slightly different from yours, ronpat. I took out the .both class, and some extraneous and empty classes that I didn't need any more).

    Code:
    <!DOCTYPE html><html lang="en">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>test</title>
    <script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
    <script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
    <style type="text/css">
    /* start reset */
    body, div, span, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, p, blockquote, table, th, td { margin:0px; padding:0px; }
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100.01%;
    	color: black;
    	background-color: #f9f9f9;
    }
    p { margin: .2em 0 .8em 0; }
    ul, ol, li { margin: 0 0 0 1.4em; padding: 0px; }
    ul, ol { margin-top: .2em; margin-bottom: .8em; }
    
    
    a img { border: none; }
    
    
    
    
    /* --clearfix hack-- */
    .clearfix:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix { display:inline-block; }
    
    
    
    
    /* mac hide \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide */
    /* --end clearfix hack-- */
    
    
    
    
    /* end reset */
    
    
    
    
    
    
    
    
    #content {
    	width: 960px;
    	margin: 20px auto;
    }
    
    
    /* start carousel */
    
    
    #content #featured-carousel {
    	position:relative;
    	width:100%;
    	border:1px solid #CAD6E8;
    	-webkit-border-radius: 6px;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    	margin-bottom:2em;
    }
    
    
    #content #featured-carousel ul {
    	background-color:lightyellow;     /* ADDED FOR TEST PURPOSES */
    	position:relative;
    	margin:0;
    	width:100%;
    }	
    
    
    #content #featured-carousel ul li {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:absolute;
    	width:100%;
    	/*overflow:hidden;*/
    	height: auto !important;
    	min-height:100%;
    	height:100%;
    }
    
    
    #content #featured-carousel ul li div.carousel-content-left-inner {
    	padding:.4em .4em .4em .8em;
    }
    #content #featured-carousel ul li div.carousel-content-right {
    	text-align:center;
    }
    #content #featured-carousel ul li div.carousel-content-right-inner {
    	padding:.4em .8em .4em .4em;
    }
    
    
    
    
    
    
    
    
    #content #featured-carousel ul li {
    	outline:1px dotted magenta; /* FOR TESTING */
    	display:table !important;
    	height:100% !important; 
    }
    #content #featured-carousel ul li div.carousel-content-left,
    #content #featured-carousel ul li div.carousel-content-right {
        outline:1px dotted cyan; /* FOR TESTING */
    	display:table-cell;
        width:50%;
        vertical-align:top;
    }
    #content #featured-carousel ul li div.carousel-content-right {
        vertical-align:middle;
    }
    
    
    
    
    
    
    #content #featured-carousel ul li.nocontent div.carousel-content-left,
    #content #featured-carousel ul li.nocontent div.carousel-content-right,
    #content #featured-carousel ul li.nothumb   div.carousel-content-left {
        display:block;
        width:100%;
    }
    #content #featured-carousel ul li.nothumb   div.carousel-content-right {
        display:none;
        width:0;
    }
    
    
    
    
    #content #featured-carousel #carousel-nav{
    	position:relative;
    	text-align:center;
    	padding: .5em 0 .3em 0;
    	border-top:1px solid #CAD6E8;
    	zoom:1;
    }
    
    
    
    
    #content #featured-carousel #carousel-nav-pages a{
    	display:inline-block;
    	background:#CCCCCC;
    	width:15px;
    	height:15px;
    	margin:0px 4px 2px 4px;
    	
    }
    #content #featured-carousel #carousel-nav-pages a:hover{
    	background:#00a0e4;
    }
    #content #featured-carousel #carousel-nav-pages a.activeSlide {
    	background:#00a0e4;
    }
    
    
    
    
    #content #featured-carousel a#carousel-next-link,#content #featured-carousel a#carousel-prev-link{
    	display:inline-block;
    	width:20px;
    	height:20px;
    }
    #content #featured-carousel a#carousel-next-link{
    	background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-next-link:hover{
    	background:#00a0e4;
    }
    #content #featured-carousel a#carousel-prev-link{
    	background:#CCCCCC;
    }
    #content #featured-carousel a#carousel-prev-link:hover{
    	background:#00a0e4;
    }
    
    
    
    
    
    
    
    
    </style>
    
    
    
    
    
    
    
    
    </head>
    <body>
    
    
    
    
    <div id="content">
    	<div id="content-inner">
    
    
    
    
    		<!-- begin content -->
    
    
    
    
    				
    																	
    			<div id="featured-carousel">
    				<ul id="carousel-items">
    					<li class="nocontent" id="post-228">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">More Plans</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on September 7, 2012</span></div>
    								<div class="carousel-summary"></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
    							</div>
    						</div>
    					</li>
    
    
    
    
    					<li class="" id="post-87">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">Some Announcements</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on August 24, 2012</span></div>
    								<div class="carousel-summary"><p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis 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...<a href="">Read More&nbsp;&raquo;</a></p></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img width="320" height="200" alt="" class="attachment-carousel-thumb wp-post-image" src="http://www.placehold.it/320x200"></a>
    							</div>
    						</div>
    					</li>
    
    
    
    
    					<li class="nothumb" id="post-90">
    						<div class="carousel-content-left">
    							<div class="carousel-content-left-inner">
    								<h2 class="carousel-title"><a href="">Small Plans</a></h2>
    								<div class="entry-meta"><span class="post-date">Published on August 22, 2012</span></div>
    								<div class="carousel-summary"><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... <a href="">Read More&nbsp;&raquo;</a></p></div>
    							</div>
    						</div>
    						<div class="carousel-content-right">
    							<div class="carousel-content-right-inner">
    								<a href=""><img src="http://www.placehold.it/125x97" alt=""></a>
    							</div>
    						</div>
    					</li>
    
    
    
    
    				</ul>
    				
    				<div id="carousel-nav">
    					<a title="Previous" id="carousel-prev-link" href=""></a>
    					<span id="carousel-nav-pages"></span>
    					<a title="Next" id="carousel-next-link" href=""></a>							
    				</div>
    				
    				<script type="text/javascript">
    					$('#featured-carousel ul').cycle({
    						fx:'fade',
    					speed:800,
    						timeout:5000,
    						prev: '#carousel-prev-link',
    						next: '#carousel-next-link',
    						pager: '#carousel-nav-pages',
    						pause: 1,
    						pagerAnchorBuilder: function(idx, slide) {
    							var index = idx+1;
    							return '<a href="#" title="'+index+'"></a>';
    						}
    					});
    				</script>
    		</div>
    					
    					
    					
    
    
    
    
    	<!--end content -->			
    					
    	</div>
    </div>
    			
    </body>
    </html>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Groovy! Thanks for the feedback!

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    A question for anyone, please......

    What is the purpose of applying

    #content #featured-carousel ul li {
    height:auto !important;
    min-height:100%;
    height:100%;

    particularly, the min-height.

    It looks like super-kill, but I have a funny feeling there are solid reasons.
    It's the old ie6 min-height hack as IE6 doesn't understand min-height so it given height:100% which it always treats as a minimum anyway. The important hack method is used to separate ie6 from the mix as it will only ever action the last rule in a block when they have the same properties - i.e. it ignores the height:auto rule and applies height:100% whereas other browsers remember the important rule and don't let the 100% win out. It's an ugly hack and causes issues in ie7 and 8 in some circumstances so its best avoided. Just use the star selector hack to target IE6 as it is safer and less code (see the css faq on 100% height (and the sticky footer) for more info).

    It looks like its redundant anyway as in the scenario above height should not be allowed to exceed 100% so height:100% would have sufficed for all.

    For IE7 you could have used this method instead of the display:table methods or a mixture of both as shown in that old article. This example shows how to align both text and image in dynamic variable height container using a similar method. However I'm not sure if its worth the effort these days to support IE7 and under to that depth so the display:table method is adequate with ie7 just getting floats and no vertical alignment.

  22. #22
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's the old ie6 min-height hack as IE6 doesn't understand min-height so it given height:100% which it always treats as a minimum anyway. The important hack method is used to separate ie6 from the mix as it will only ever action the last rule in a block when they have the same properties - i.e. it ignores the height:auto rule and applies height:100% whereas other browsers remember the important rule and don't let the 100% win out. It's an ugly hack and causes issues in ie7 and 8 in some circumstances so its best avoided. Just use the star selector hack to target IE6 as it is safer and less code (see the css faq on 100% height (and the sticky footer) for more info).

    It looks like its redundant anyway as in the scenario above height should not be allowed to exceed 100% so height:100% would have sufficed for all.

    For IE7 you could have used this method instead of the display:table methods or a mixture of both as shown in that old article. This example shows how to align both text and image in dynamic variable height container using a similar method. However I'm not sure if its worth the effort these days to support IE7 and under to that depth so the display:table method is adequate with ie7 just getting floats and no vertical alignment.
    Thanks Paul.

    I've been using that block of code since the IE6 days. Since it never seemed to break anything, I kept using it on the rare occasion when I needed 100% height on something and long since forgot why/how it worked.

    I'm not too concerned about IE7 being pixel perfect, so I'll just use the table method for most browsers and the float method for IE7.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •