I can't seem to get rid of the strip of empty space at the very bottom of this site. I'm using Firebug and don't see any padding/margins anywhere. Anyone have a clue?
It is the beige strip in the image below:
The extra space is being caused by the line-height property of the xg_foot div
You need to change your #xg_foot css to this:
#xg_foot {
box-shadow: none !important;
font-family: 'bitter',serif;
height: 23px; /* Adjust to your liking */
line-height: 0;
padding: 13px 0 0; /* Adjust to your liking */
width: 100% !important;
}
Related
How can I decrease the space between boxes in Shiny dashboard?
I have tried the following:
.box-body{
margin: 0 !important;
padding: 0 !important;}
But that seems to add a margin towards the inside of the box. What I want is to reduce the space between boxes such that these boxes are basically touching each other.
Use only this CSS:
[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
padding-right:0 !important;
padding-left:0 !important;
}
Here are the css properties that cause your boxes to be separated the way the are. The col classes are found in bootstrap.css and .box can be found in AdminLTE.min.css.
.box { margin-bottom: 0; }
[class*="col-lg-"],[class*="col-md-"],
[class*="col-sm-"],[class*="col-xs-"]{
padding-right:0 !important;
padding-left:0 !important;
}
I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.
The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade
you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.
I've a Button with the following super simple css:
button {
background: #005eb8;
border: 0;
padding: 0;
color: white;
line-height: 50px;
}
"line-hight" is set to 50px. But the button is (in Firefox) 52px - I expected it to be 50. Is there any reason for that? In chrome the height is 50 as expected...
Code at JSBIN:
http://jsbin.com/jagiviyima/9?html,output
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Add such css rule.
You ask - is there some reason for that - I believe it is. I don't have Firefox at hand now, but you are using button html element and buttons typically have some default css rules applied to them across the browsers (these are obviously browser specific). My guess is FF is adding some default padding, margin, border or something of that kind to your own defined style. Try setting these to 0 explicitly.
A bit of googling yielded this SO answer which exlains the issue in a more detail, proposed resolution is:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
Digging through Style.css theme, I coulnd find how to change 2 kinds of margins:
Margin between browser border and site page
Margin between site page border and site content.
I did it for my website http://raigle.net. See Margin 1 and Margin 2 on the picture:
I'm not a pro in Wordpress styling and would be glad to any advice!
When looking for styling, you can use Chrome's Inspector.
Right click an element > Inspect element. It looks like you have an element that acts as an overlay. Just delete (select in elements panel then hit delete) the node and try again.
It's pretty nifty.
http://i.imgur.com/EfCARba.png
about margin1:
it is not margin, it is padding:
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 15px; /* change here */
}
about margin2:
it is not margin too, it is padding:
.site {
padding: 0 24px; /* change here */
padding: 0 1.714285714rem; /* change here */
background-color: #FFF;
}
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css - line 12 - change padding style for .ui-content {
in http://raigle.net/wp-content/themes/twentytwelve-child/style.css,wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.6.pack.css
you have to change padding for div.site. You probably need to add !important clausule for this one, as this style is overwritten in couple other files
The problem is that on my website http://dev.gratefulhearttherapy.org/, at least 2 css properties are not showing up as expected:
html {
background: #fff url('images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
One background image is missing, and pictures don't have the grey border they're supposed to have.
Yesterday night I was messing with 3 things in my code:
the css file typography-new2.css,
the PHP files elements meta.php, header.php, footer.php, and
the Google Analytics code.
I must have broken something but I can't find what. I tried to pass the website and the css through the W3C validators, I scrutinized the code with Chrome inspector, looking for unclosed tags and such, but didn't find anything.
When using the Chrome inspector, to look at the html element and the img's, the missing css seems absent - not only overridden, but absent.
Any help would be appreciated! With much gratitude.
The issues are in your stylesheet: typography-new2.css
Background not showing:
At the very top you have referenced img before html only separated by comments. So the html rule is actually being interpreted as img html {:
img /* REMOVE THIS LINE*/
/* #import url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/tabs.css'); */
/* All CSS files above will be loaded from this single document. */
html {
margin: 0;
padding: 0;
/* background: #fff; #f9dc91 url(http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/background-sandish-tile.jpg) !important; */ /* #F9D984; */ /* customize_background_color */
background: #fff url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
Pictures missing grey border:
You have a line full of *s outside of the closing comment / right before the rule #bd img which is probably why the rule is not being applied.
/********************************
*********************************
* $$ GENERAL TYPES
********************************/
******************************** /* REMOVE THIS LINE */
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
If you remove the two lines, I think all of your issues should be solved.
Your images are not a direct descendent of #bd, I think that is your problem the CSS code is fine. See #150poundsofdonamites response for the other issue.
If this still doesn't produce the desired result try changing html to body.