There's a mysterious whitespace along the right of my site in firefox (on both PC and Mac, latest versions) and I can't for the life of me figure out what's causing it.
This is what it looks like -
I've been searching the CSS for ages now trying to figure out if it's some margin or padding issue but I can't find anything.
Also, if I remove the div ID 'slider3' the issue seems to disappear, yet I can't figure out how this div is causing the whitespace, since it has no CSS applied to it - it's simply a container.
Here's my site http://www.simplerweb.co.uk
Here's some relevant code so the answer is useful for people later on.
<div class="fullw">
<div class="sliderleft"></div>
<div class="sliderright"></div>
<div id="slider3">
<div class="quote">
<div class="centmid">
<h1 class="fronth">Hello</h1>
<h2 class="frontp">Welcome to Simpler Web</h2>
<h2 class="frontp2">We're an Edinburgh based Web<br> Design Agency</h2>
</div><!-- end div centmid -->
</div> <!-- end div quotes1 -->
<div class="quote2">
<div class="centmid">
<h2 class="frontb">We make wonderful, cross platform <br> accessible Websites </h2>
</div> <!-- end div centmid -->
</div> <!-- end div quotes2 -->
<div class="quote3">
<div class="centmid">
<h2 class="frontc">We can translate your ideas into reality </h2>
</div> <!-- end div centmid -->
</div><!-- end div quotes3 -->
</div> <!-- #slider3 -->
</div>
CSS
/* The following styles are essential to the slider's functionality */
.plusslider {
overflow: hidden;
position: relative;
padding-top: 140px; /* The height / width of the slider should never be set via the CSS. The padding increases the slider box-model while keeping it dynamic */
}
.plusslider-container { position: relative; }
/* Slides must have a set width - even though they may be dynamic. If no width is set on <img> slides, the default image size will be assumed */
div.child { width: 480px; }
.plusslider .child { float: left; }
/* PlusFader Specific (not needed with plustype:slider */
.plustype-fader .child { display: none; position: absolute; left: 0; top: 0; }
.plustype-fader .current { z-index: 5; }
/* End PlusFader Specific */
/* No-javascript fallback -- change "#slider" and "#slider2" identifiers as needed for your html */
#slider > * { display: none; }
#slider > *:first-child, #slider2 > *:first-child { display: block; }
/* End no-javascript fallback */
/* End essential styles*/
/* The following styles are not essential for slider functionality. They are specific to the example content.
It is important to note that the fading effect does not work correctly with non-image content unless that
content area has a solid background (either a background image or a background-color, but not transparent).
Slides to not have to be the same width or height, but if you'd like a consistent width and/or height, make sure to set that within the CSS! */
#slider .slide1 { padding-left: 40px; padding-right: 40px; margin-left: 0; margin-right: 0; }
#slider .slide1 { height: 210px; padding-top: 20px; padding-bottom: 20px; margin-top: 0; margin-bottom: 0; }
.slide1 { height: 500px; padding: 20px 40px; }
.slide1 h2 { color: #fff; font-size: 20px; margin: 0 0 20px 0; text-align: left; }
.slide1 p { border-left: 3px solid #fff; color: #fff; padding: 0 0 0 10px; }
.quote, .quote2, .quote3 { height:400px; padding: 20px 0; width: 980px; width: 100%; position: relative; }
.quote { background-image: url(../images/weare.png); background-position: center; background-repeat: no-repeat; }
.quote2 { background-image: url(../images/headlogosandroid.png); background-position: center; background-repeat: no-repeat; }
.quote3 { background-image: url(../images/ideafront.png); background-position: center; background-repeat: no-repeat; }
.plusslider a img { border: none; } /* Prevent blue borders in IE (not only does it look ugly, but it messes up spacing which breaks the "slider" type */
.plusslider-pagination { position: absolute; left: 0; bottom: 0; }
.plusslider-pagination li { float: left; list-style: none; margin-left: 5px; }
#slider3 {margin: 0; padding: 0;}
You have (in FF) exactly 17px extra width that is exactly the width of the browser scrollbar.
Your starting (initial) loading black screen (that animates) leaves a glitch of 17px:
cause it's animation maintains the DOM width that equals the screen width without the right scrollbar (100% screen width).
After the page is fully loaded and the scrollbar is added to the page, it actually adds the extra 17px (to the 100%) width that were maintained by the Loading animation.
Hope I put you in the right direction.
By the way, try to add:
html {
overflow-y: scroll;
}
and - if still needed - adjust the loading element width as I mentioned before.
Add this:
body{
overflow-x: hidden;
}
Problem solved. (temporarily)
So where is the problem?
It is at your <div> with the classes plusslider slider3 plustype-slider. You are constantly setting an incorrect width to it. You have to subtract the scrollbar width.
You can also try to do this: Padding: 0px(or whatever) 17px; and margin: 0px(or whatever) -17px; now your whitespace at the sides are gone.
Related
I want to place an element to its parent bottom. I can't set its position: absolute and bottom: 0 because my parent div may be scrolled(overview-y) by zooming or in smaller displays. I want the element to be stuck at the bottom of the parent if the parent other elements do not exceed the widow height, otherwise this child be the last in scrolling.
how is that possible? should I use js or is there anyway to do it by css?
tnx
You can use a child content container with min-height set to match the parent's height. Put enough padding on the bottom of the content element for your footer and use position:absolute to attach your footer to the bottom.
See the snippet below.
$('.toggle').on('click', function() {
$('.grey').toggleClass('big');
});
.parent {
border: 1px solid black;
overflow: auto;
height: 400px;
}
.content .grey {
height: 40px;
margin-bottom: 5px;
background: grey;
}
.content .grey.big {
height: 80px;
margin-bottom: 5px;
background: grey;
}
.content footer {
height: 40px;
background: orange;
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
}
.content {
position: relative;
min-height: 100%;
box-sizing: border-box;
padding: 5px 5px 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button class="toggle">Toggle</button>
</p>
<div class="parent">
<div class="content">
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<div class="grey"></div>
<footer></footer>
</div>
</div>
hope this will help
/**
* Demo Styles
*/
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
min-height:1000px;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
A simplified version of my problem is that I want to center a 'text' div over an 'image' div on screen mode, but position them underneath each other on mobile.
HTML
<div class="wrapper">
<article> </article>
<div class="text-cell">
<h2>Title</h2>
<h3>Category</h3>
</div>
</div>
css
.wrapper {
position: relative;
margin: 0;
padding: 0;
}
article {
height: 350px;
width: 100%;
border-top: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
}
.text-cell {
position: absolute;
z-index: 10;
width: 100%;
margin: 0;
bottom: 0;
}
#media screen and (max-width: 768px) {
.text-cell {
position: relative;
border-top: solid 1px #000;
background-color: rgba(250, 250, 250, 1);
}
}
This is the closest I got. It puts the 'text-cell' overtop of article at screen size and underneath on mobile size.
I want it to be vertically centred over the 'article' on screen size, as it resizes. 'text-cell' doesn't have a defined size, and Ideally I'd like article to be a percentage or a more responsive size, but that isn't as important.
EDIT - this html is part of a Wordpress loop, meaning it is generated a certain amount of times, and each one is stacked under the other. (for ex. 3 copies of < div class="wrapper" > stacked)
What I am going for
The first thing i'd recommend doing is placing that .text-cell div above the article, that way, on mobile, it's statically where you want it to be placed, following the document natural hierarchy. This is what i've done in the code snippet (i've also changed its position to static inside the media query.)
Having said that, i would personally consider changing the structure of the HTML to have more semantic meaning (for example, placing the h2 & h3 tags inside a header tag and place that inside your article tag.)
If you want help doing that, explain what you're trying to achieve inside the article, and i'm happy to help you achieve what you're looking for.
.wrapper {
position: relative;
margin: 0;
padding: 0;
}
article {
height: 350px;
width: 100%;
border-top: 1px solid #000;
background-size: cover;
background-repeat: no-repeat;
}
.text-cell {
position: absolute;
z-index: 10;
width: 100%;
margin: 0;
bottom: 0;
}
#media screen and (max-width: 768px) {
.text-cell {
position: static;
border-top: solid 1px #000;
background-color: rgba(250, 250, 250, 1);
}
}
<div class="wrapper">
<div class="text-cell">
<h2>The title</h2>
<h3>The category</h3>
</div>
<article style="background-image:url('http://placehold.it/300x300');">
</article>
</div>
In place of something like a horizontal rule or div border, I'd like to do something like this:
My Title
/*----------------------*/
My content
Notice how the divider between the Title and content is literally a slash, asterix, dashes, and then an asterix and slash to end (it's supposed to look like code).
I'm curious how I could achieve this effect on a fluid layout, with the divider stretching to fill the whole width of the div. Also, I'd like to not use any art for this. Just using ascii would be perfect.
Summary: How can I create a dynamically resizing custom ascii divider? I'm pressuming this will probably have to be done mostly in Javascript and then polling the width of the div everytime the window is resized, and then calculating the length of characters (it's a monospace font) required to fill that space. Is this on the right track?
What a great question, had a lot fun messing around making this CSS only solution.
(This needs to be tweaked for each new font family due differences in kerning but it should hold up reasonably well at different font sizes of the same family.)
hr {
/* reset */
display: inline-block;
border: none;
/* sizing */
box-sizing: border-box;
width: 100%;
height: 0.1em;
/* dashes */
background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 80%, transparent 80%); /* space */
background-size: 0.4em 0.4em; /* dash */
/* spacing between start/end */
padding: 0 0.7em;
background-clip: content-box;
/* anchor ::before/::after */
position: relative;
}
/* start/end */
hr::before,
hr::after {
position: absolute;
top: -0.5em;
}
hr::before {
content: '/*';
left: -0.1em;
}
hr::after {
content: '*/';
right: -0.1em;
}
<hr>
Editable demo: http://jsbin.com/tefuli/2
This is possible without using JavaScript with the white-space CSS property:
#container {
width: 300px;
position: relative;
border: 1px dotted black;
}
#dashes {
white-space: nowrap;
width: 100%;
overflow: hidden;
}
#opencomment, #dashes, #closecomment {
position: absolute;
}
#opencomment, #closecomment {
background-color: #FFFFFF;
z-index: 10;
}
#closecomment {
right: 0px;
}
<div id='container'>
<h1>Title</h1>
<div id='opencomment'>/*</div>
<div id='dashes'>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id='closecomment'>*/</div>
<!-- position:absolute elements don't affect the DOM, so we need to
"clear a line" -->
<div> </div>
<p>Content</p>
</div>
I just used an absurd amount of dashes in order to fill up wide screens. You can change the width of #container in order to make it wider or narrower, or you could remove the #container element entirely.
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
Seen as someone asked for the script:
function resizeWindow(){var a=getWindowHeight();document.getElementById("content").style.height=(a-0)+"px";document.getElementById("nav").style.height=(a-0)+"px";document.getElementById("contentPanel").style.height=(a-10)+"px"}function getWindowHeight(){var a=0;if(typeof(window.innerHeight)=="number"){a=window.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){a=document.documentElement.clientHeight}else{if(document.body&&document.body.clientHeight){a=document.body.clientHeight}}}return a};
Changed the script to refer to min-height works perfectly in FireFox. But not IE or Chrome.
CSS:
body {
margin: 0px;
text-align: left;
font-family: Verdana;
font-size: 11px;
background-color: #FFFFFF;
min-width: 980px;
min-height: 10px;
background-image: url('../Images/watermark.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
.nav {
width: 19%;
margin: 0px 0px 0px 0px;
background-color: #E0EFFF;
float: left;
vertical-align: bottom;
position: relative;
}
some minor changes to my script / using min height seems to work. And after running a CCLEAN IE sort of does what I wanted.
Instead of setting the "height", set the "min-height".
short solution is give height auto to both divs