This is the website I am developing right now: in-nabavi.com. There is nothing in it but a few blocks. As you see there is an extra white space at the end of the document that I really have no idea why it is in there.
This is the firebug result
As you see the area with red line around it is not included in the HTML area.
I also tried the following
body, html{
margin:0;
height: 100%;
}
but it didn't work again.
Thanks.
You have used content: "." inside clearfix class for setting layout.
Use content: ""; only.
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
There is a .clearfix:aftercss class in which there is a content:"."
Remove that.
Or override it, so that it does not hamper anything else.
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: close-quote;
}
You can try this....
.panels-flexible-1 .panels-flexible-row-last{position: absolute;}
Related
I am trying to put a responsive css made square before the tag. Something like this
I've been trying to do it like this, but I can't seem to get the square to appear. Could you please help me out with this one.
h1::before {
position: relative;
width: 25%;
padding-bottom: 25%;
overflow: hidden;
background: red;
}
Thank you for your answers!
In order to see a pseudoelement you need to always define its content property, e.g. content: "" : anyway in your example you should also define a display property.
Example : http://codepen.io/anon/pen/bNNQrj
h1:before {
content: "";
display: inline-block;
vertical-align: middle;
...
}
A final note about the syntax: the :: CSS3 version is correct, but if you need to make it work also with IE8 just use the CSS2 syntax with a single colon (:)
Further info available on MDN
You need content and display set.
http://jsfiddle.net/37s1mtmk/
h1 { font-size:2em;}
h1::before {
width: 1em;
height:1em;
background: red;
display:inline-block;
content: "";
margin-right: 10px;
}
I made a web page. When I zoom it, there is no scroll bar on the bottom of browser. I tried many times but I can't.
Please any body help me.
Here is my dropbox link
Hi now remove to your .fix in css overflow:hidden; and add this css in your stylesheet
as like this
Remove this css
.fix {
overflow: hidden;
}
Add this css
.fix{
*zoom: 1;
}
.fix:after, .fix:before {
content: "";
display: table;
line-height: 0;
}
.fix:after {
clear: both;
}
Your Css Path is
css/main.css ---> Line No is 111
Just curious.. I was going through the code bootstrap.css and saw the following..
.container {
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
It seems that a portion of the code is repeating and does the same thing... even if you take it out of the css code specifically the following:
.container:before,
.container:after {
display: table;
content: " ";
}
.container:after {
clear: both;
}
it seems that all works fine and dandy.
Is it an error or oversight?
It was a bug, but was fixed a month ago. There is some debate on whether it was a Bootstrap bug, or a bug in their CSS compiler, LESS. Discussion on bugtrackers for LESS, Bootstrap.
Details
Bootstrap CSS is compiled from Less, and this particular section of the code comes from grid.less, using mixins from mixins.less.
Figuring out why it's duplicating requires going down a couple layers. The relevant Less code is here:
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
#media (min-width: #screen-sm) {
width: #container-sm;
}
#media (min-width: #screen-md) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
Which uses the mixin .container-fixed():
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (#grid-gutter-width / 2);
padding-right: (#grid-gutter-width / 2);
.clearfix();
}
Which in turn uses the mixin .clearfix():
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
EDIT: After some further digging, the bug was that they had inadvertently defined the .clearfix() macro twice - once in mixins.less and then again in utilities.less. You can see it in action at less2css.org with this LESS code:
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.container {
.clearfix();
}
.clearfix {
.clearfix();
}
I don't know enough LESS to say for sure, but it seems that the second .clearfix is being treated as some sort of mixin, and is looping. If you switch the LESS version ("Options" button at less2css.org) to 1.3.1 or earlier, you get a recursion error - it seems LESS added some code to stop the infinite recursion, but some duplicates still get generated.
Further notes: this bug affected everything that had a .clearfix() mixin - I say that in past tense, because they recently fixed this bug, namely by switching to a different way of using the mixins.
TL;DR: Yes, it was a bug, but they fixed it a month ago. There is some discussion of whether it was a LESS bug or a Bootstrap bug on LESS's bugtracker and back over on Bootstrap.
I've created this simple html :
there are 2 SPANs here.
one should be beneath the other by clearing the float.
The bbb element has float:left
And I used (on the aaa element ) , Facebook's "clearfix" CSS which is :
.clearfix:before { content: ""; display: table; }
.clearfix:after { content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix { zoom: 1; }
This is a valid way ( as facebook do) and as described here
However it works in FireFox : (look at the above picture)
But in chrome (v 24) it doesn't .
What am I missing ?
Your jsbin example has TWO typos/syntax errors and the clearfix code is NOT correct.
<span class=" clearfix"> you have a space before clearfix
<span class='fll'>bbbbb </span> you have single quotes instead of double quotes.
Change your html to:
<div class="clearfix">aaa </div>
<div class="fll">bbbbb </div>
and your CSS to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
and it works (all browsers,IE6-7 included) http://jsbin.com/ukaxav/19/
.clearfix { display: block; }
Isn't it a "bit" more clean?
add display:inline-block; property to the parent div.
Code:
<div style="height: 100%; border: 1px solid blue;display: inline-block;">
<span class=" clearfix" style="">aaa </span>
<span class="fll">bbbbb </span>
</div>
Clearfix is intended to clear floats. meaning, on an element that contains float.
Not for clearing previous floats.So in your question, you are not putting the clearfix on the correct place, or misunderstand the principle.
Add a width: 100%; in your fll
so,
.clearfix:before {
content: "";
display: table; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.clearfix { zoom: 1; }
.fll
{
float:left;
width: 100%;
}
As a part of learning CSS (& practically applying it — by creating simple themes), today I wanted to know some proper ways of clearing floats in CSS.
I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
&
.container {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.container:before, .container:after {
display: table;
content: "";
}
.container:after {
clear: both;
}
I immediately tried it out, and that specific part of my code looked like so:
<p class="sample-preview">
<span class="sample-preview">PREVIEW</span>
<em>This is italicized aka emphasized</em>, and so is <em>this</em>.<br />
<strong>This is bold aka strong emphasis</strong>, and so is <strong>this</strong>.<br />
Use <strong><em>italics and bold together</em></strong> if you <strong><em>have to</em></strong>.
</p>
+
p.sample-preview {
border: 1px solid #FFCCC9;
background: #FFEBE9;
outline: 2px solid #FFEBE9;
padding: 10px;
}
span.sample-preview {
display: inline-block;
float: right;
margin:0;
font-weight: bold;
font-size: 12px;
background: #FFCCC9;
padding: 2px 5px;
}
.sample-preview {
margin-left: auto;
margin-right: auto;
*zoom: 1;
}
.sample-preview:before, .sample-preview:after {
display: table;
content: "";
}
.sample-preview:after {
clear: both;
}
Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed display: table; from the code using Firebug.
You can take a look at the page here and the bug is — the first pink box is taller than the content. What am I doing wrong?
The issue is that you're also clearing the floated menu to the right.
There's two solutions for that:
the usual is to float your content area itself to the left. This means that everything inside it is in a different float context. Your clear will only affect the elements inside of it.
another trick that works is specifying overflow: hidden on your sample-preview paragraph. This is probably easier to do. Specifying the overflow property on an element (but not set to visible) causes it to behave like a float container.
Cfr: http://www.brunildo.org/test/clear.html, http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
I should also note that with this overflow trick, you don't need the clearfix at all.