I’m what seems to be an extremely silly issue with css.
I’ve created a child template within the striking theme with the sole purpose of showing the full screen revolution slider. I don’t think it has anything to do with the image size given the output source.
Template Document:
<?php wp_head(); ?>
<body style =" margin-bottom:-40;">
<div style = "margin-top: -40; ">
<?php if ( have_posts() ) : while( have_posts() ) : the_post();
the_content();
endwhile; endif;?>
</div>
</body>
Within this code i was able to remove the top margin (margin-top:-40;) however i’ve tried margin, padding and placing this in div’s and the body (as you can see above)…. When i inspect it within Google Chrome the slider dimensions are within it’s own div, and the full body is showing the margin at the bottom outwith the slider div.
I’m aware this must be a very simple fix, it’s just got me baffled….
here is the output from the page source (the margin edits are mine, the top works, bottom doesn’t in div or body):
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » Feed" href="http://yrock.co.uk/3dsign/feed/" />
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » Comments Feed" href="http://yrock.co.uk/3dsign/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » hippy Comments Feed" href="http://yrock.co.uk/3dsign/hippy/feed/" />
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://yrock.co.uk/3dsign/wp-includes/css/dashicons.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://yrock.co.uk/3dsign/wp-includes/css/admin-bar.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='rs-plugin-settings-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/css/settings.css?rev=4.3.5&ver=3.9' type='text/css' media='all' />
<style type='text/css'>
.tp-caption.medium_grey {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
padding:2px 4px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#888;
white-space:nowrap;
}
.tp-caption.small_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:14px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.medium_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:40px;
line-height:40px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.very_large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
letter-spacing:-2px;
}
.tp-caption.very_big_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#000;
}
.tp-caption.very_big_black {
position:absolute;
color:#000;
text-shadow:none;
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#fff;
}
.tp-caption.modern_medium_fat {
position:absolute;
color:#000;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_fat_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_light {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_big_bluebg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#4e5b6c;
letter-spacing:0;
}
.tp-caption.modern_big_redbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
padding-top:1px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#de543e;
letter-spacing:0;
}
.tp-caption.modern_small_text_dark {
position:absolute;
color:#555;
text-shadow:none;
font-size:14px;
line-height:22px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.boxshadow {
-moz-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
}
.tp-caption.black {
color:#000;
text-shadow:none;
}
.tp-caption.noshadow {
text-shadow:none;
}
.tp-caption.thinheadline_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:30px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.thintext_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:16px;
line-height:26px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.largeblackbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#000;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largepinkbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#db4360;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largewhitebg {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#fff;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largegreenbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#67ae73;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.excerpt {
font-size:36px;
line-height:36px;
font-weight:700;
font-family:Arial;
color:#ffffff;
text-decoration:none;
background-color:rgba(0, 0, 0, 1);
text-shadow:none;
margin:0px;
letter-spacing:-1.5px;
padding:1px 4px 0px 4px;
width:150px;
white-space:normal !important;
height:auto;
border-width:0px;
border-color:rgb(255, 255, 255);
border-style:none;
}
.tp-caption.large_bold_grey {
font-size:60px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
text-shadow:none;
margin:0px;
padding:1px 4px 0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_thin_grey {
font-size:34px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_thin_grey {
font-size:18px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(117, 117, 117);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.lightgrey_divider {
text-decoration:none;
background-color:rgba(235, 235, 235, 1);
width:370px;
height:3px;
background-position:initial initial;
background-repeat:initial initial;
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bold_darkblue {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_darkblue {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(52, 73, 94);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_red {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_red {
font-size:21px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_red {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(227, 58, 12);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_orange {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(243, 156, 18);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_orange {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(243, 156, 18);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.grassfloor {
text-decoration:none;
background-color:rgba(160, 179, 151, 1);
width:4000px;
height:150px;
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bold_white {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_white {
font-size:30px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_white {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_white_center {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:#ffffff;
text-decoration:none;
background-color:transparent;
padding:0px 0px 0px 0px;
text-align:center;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_asbestos {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(127, 140, 141);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_black {
font-size:30px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.large_bold_black {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_darkblue {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_light_white {
font-size:17px;
line-height:28px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.roundedimage {
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bg_black {
font-size:40px;
line-height:40px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(0, 0, 0);
padding:10px 20px 15px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumwhitebg {
font-size:30px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:rgb(255, 255, 255);
padding:5px 15px 10px;
text-shadow:none;
border-width:0px;
border-color:rgb(0, 0, 0);
border-style:none;
}
.tp-caption a {
color:#ff7302;
text-shadow:none;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
}
.tp-caption a:hover {
color:#ffa902;
}
</style>
<link rel='stylesheet' id='theme-style-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/css/screen.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-icons-awesome-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/icons/awesome/css/font-awesome.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-responsive-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/css/responsive.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-skin-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/cache/skin.css?ver=1399289595' type='text/css' media='all' />
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/js/jquery.themepunch.plugins.min.js?rev=4.3.5&ver=3.9'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=4.3.5&ver=3.9'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/js/jquery.fancybox.min.js?ver=2.1.3'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/js/custom.combine.js?ver=3.9'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://yrock.co.uk/3dsign/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://yrock.co.uk/3dsign/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='hello' href='http://yrock.co.uk/3dsign/hello/' />
<meta name="generator" content="WordPress 3.9" />
<link rel='canonical' href='http://yrock.co.uk/3dsign/hippy/' />
<link rel='shortlink' href='http://yrock.co.uk/3dsign/?p=34' />
<script type="text/javascript">
var image_url='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/images';
var theme_url='http://yrock.co.uk/3dsign/wp-content/themes/striking_r';
var fancybox_options = {
skin : 'theme',
title_type : 'float',
width : 800,
height : 600,
autoSize: true,
autoWidth: false,
autoHeight: false,
fitToView : true,
aspectRatio: false,
arrows: true,
closeBtn: true,
closeClick: false,
nextClick: false,
autoPlay: false,
playSpeed: 3000,
preload: 3,
loop: true,
thumbnail : true,
thumbnail_width : 50,
thumbnail_height : 50,
thumbnail_position: 'bottom'
};
var pie_progress_bar_color = "#3cabce",
pie_progress_track_color = "#e5e5e5";
var nav2select_indentString = "–";
var nav2select_defaultText = "Navigate to...";
</script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
<body style =" margin-bottom:-40;">
<div style = "margin-top: -40; ">
<!-- START REVOLUTION SLIDER fullscreen mode -->
<div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container" style="background-color:#E9E9E9;padding:0px;">
<div id="rev_slider_3_1" class="rev_slider fullscreenbanner" style="display:none;">
<ul> <!-- SLIDE -->
<li data-transition="random" data-slotamount="7" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/SOLLEDS-LOGO.png" alt="SOLLEDS-LOGO" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="random" data-slotamount="7" data-masterspeed="300" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/ARENA-XL.png" alt="ARENA-XL" data-bgposition="center top" data-bgfit="100% 100%" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="random" data-slotamount="7" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/Samsung-Ultra-bright.png" alt="Samsung-Ultra-bright" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
</ul>
<div class="tp-bannertimer"></div> </div>
</div>
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
var revapi3;
tpj(document).ready(function() {
if(tpj('#rev_slider_3_1').revolution == undefined)
revslider_showDoubleJqueryError('#rev_slider_3_1');
else
revapi3 = tpj('#rev_slider_3_1').show().revolution(
{
dottedOverlay:"none",
delay:9000,
startwidth:960,
startheight:350,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigationType:"bullet",
navigationArrows:"solo",
navigationStyle:"round",
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
keyboardNavigation:"off",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"on",
fullScreenAlignForce:"on",
minFullScreenHeight:"",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500, hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
videoJsPath:"http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/videojs/",
fullScreenOffsetContainer: ""
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</div>
</body>
Thank you in advance!
I actually had this problem for a different reason…
When the slider was added to the page through the page editor, the slider short code was wrapped in a span element. The pages that didn’t have a gap above the slider did not have any additional HTML tags wrapped around the short code. Removing the extra tag, removed the extra gap.
Generally, in PHP programming (and many C style languages), whitespace is ignored. However, in WordPress’ page and post WYSIWYG content editor, both Visual and Text modes, may render line breaks in unexpected locations?