0

I have set up my slider like they show on a previous topic here with three wrappers to center my caption vertically and horizontally. Although the table div is not 100% wide on all screen resolutions.

When I resize my screen it sort of jump between being 100% wide and (100% -1px) wide. Why is that and is there anything I can do to prevent it?

Editable JSFiddle / Fullscreen JSFiddle 

.caption {
 position: absolute;
 height: 100%;
 top:0;
 display: block;
 width: 100%;
 z-index: 100;
}
.caption-inner {
 display:table;
 text-align: center;
 height: 100%;
 width: 100%;
}
.caption-inner-cell {
 display: table-cell;
 text-align: center;
 background-color: rgba(0,0,0,.0);
 vertical-align: middle;
 }
.caption-text {
  z-index: 0;
  position:relative;
  display:block;
  padding: 35px 0;
  margin:0;
  font-size: 28px;
  font-weight: bold;
  background: url(img/extra/transparent-22-percent.png);
  background-repeat: repeat;
 }

with the html: 

<div class="caption">
    <div class="caption-inner">
        <div class="caption-inner-cell">
            <span class="caption-text">
                <h2 class="caption-title pink-text">
                    <?php the_title(); ?>
                </h2>
                <div class="caption-sub-title">
                    <?php the_content(); ?> 
                </div>
            </span>
        </div>
    </div>
</div>

I use Google Chrome but I've also seen the problem on Ipad Safari

Community
  • 1
  • 1
HannesH
  • 95
  • 2
  • 9
  • 3
    can you post the code what you tried? – G.L.P Jul 29 '15 at 11:42
  • If i open the fiddle [link](http://jsfiddle.net/timshutes/5pAA3/1/) and add a display: table to the outer div, it works as expected, can you make a fiddle with your code, do all major browser have the problem you describe? – Brett Jul 29 '15 at 11:57
  • I have added the code I am using! @Brett – HannesH Jul 29 '15 at 12:20
  • Have you tried assigning `table-layout: fixed;` to your table? – connexo Jul 29 '15 at 13:06
  • Tried it right now and it is not working either.. @connexo – HannesH Jul 29 '15 at 13:18
  • On screen width 800px and larger it is 100% wide every third pixel. On the other it is a pixel short...@connexo – HannesH Jul 29 '15 at 13:34
  • I do not see something wrong with that fullscreen fiddle, appart from 2 slidebars, the vertical is from the lack of a marging:0 on the body and the horizontal is introduced by the fiddle topbar. If it is still a problem pls add a print screen because I dont see a problem. – Brett Jul 31 '15 at 12:02

0 Answers0