I've made a site using with a CSS made from scratch.
The Page The CSS
Randomly there are unwanted white spaces in two places:
Above the main content area (below
the menu bar).
Below the main content area and
sidebar and above the footer.
I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.
What could I do to get rid of these white areas?
The extra white space comes from the browser's default stylesheet. Add these rules:
h2 {
margin: 0;
}
h4 {
margin: 0;
}
To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.
You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.
Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.
Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0
Have you checked out your css in IE?
.maincontent {
background: #0F3;
height: 300px;
width: 580px;
float: left;
}
basically, you need to add float:left; to your maincontent css
1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space.
2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.
try adding the following to the top of your stylesheet:
body, h1, h2, h3, p
{
margin:0;padding:0;
}
This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.
Related
I am unable to remove padding gap at the top of my page just below the navbar in a Wordpress theme (divi). I think I've identified the possible culprit as being the page-container div, which has a top padding of 78px. http://i.imgur.com/WruF7Aa.jpg
50px seems to remove it when tinkering within the browser preview, but it won't carry over when I make the change and reload the page. http://i.imgur.com/UerrgHL.jpg
I've tried about 10 different CSS overrides within the theme, but nothing seems to remove it. Does anyone have a possible suggestion? I'm out of ideas.
The padding-top: 78px style has been added inline which is why it overwrites the padding-top which you add inside your stylesheet. You will need to use !important here. You can add this CSS at the bottom of your stylesheet and this should work:
.et_fixed_nav #page-container {
padding-top: 0px !important;
}
I've been trying to figure out why there's a thin (maybe 1px) line at the bottom of my layout and finally pinpointed the body {line-height: 1;} in Eric Meyer's reset file. For some reason, this setting is causing the html element to extend just past my footer.
I tried this out on a super simple page with just a main div with a background color of gray, setting the html background to red so I can see the line at the bottom of the window. Playing around with height settings on the main div, p tag, or an img, the line only disappears when the main div has a height setting. (I tried to use that information to fix my actual project, but it doesn't seem to work there...)
I made a simple jsfiddle if you want to see what I'm talking about - http://jsfiddle.net/DFDj8/ - changing the #main img {height: 800px;} to just #main {height: 800px;} gets rid of the red line at the bottom. Commenting out the line-height setting in the reset does the same.
Any thoughts on what's happening? If there's another post that explains this, feel free to link to it - I couldn't find anything similar.
Thanks!
*Updated jsfiddle with block-level footer as last element - http://jsfiddle.net/DFDj8/6/
The code in jsfiddle contains Eric Meyer's reset plus the following:
html, body {
background: red;}
#main {
background: gray;}
#main img {
height: 800px;
display: block;}
<body>
<div id="main">
<p>paragraph paragraph</p>
<img src="http://auntdracula.com/wp-content/uploads/2013/05/Delicious_Steaz_Soda.jpg" />
</div>
<footer>
<p>© 2013</p>
</footer>
</body>
First off, I made a simplified fiddle with all the unnecessary stuff, like the reset codes, removed. I don't like reset codes, as they can just get in the way when doing research.
Anyway, I noticed that when you decrease the line-height even further, the number of red pixels increases. So it has to do with the room for the descender below the image.
That means if you add display:block to the style for the img, the problem will disappear. See newer fiddle.
Then you won't have to worry about other, seemingly unrelated properties any more.
Edit: it also goes wrong if there's a line of text as the last element in the body. Apparently, the font's descender is too large for that line height, and it overflows out of the line. And therefore, out of the body. So the solution is to hide the overflow of that element.
body :last-child {overflow-y:hidden}
See more updated fiddle.
Or, in this case, a solution would be to keep the line-height at 1.2, but then you might have the same problem with more esotericly shaped fonts...
The last element is display: inline by default and the line-height is acting on it as it should. Set the image to display:block; and you won't have that issue.
I have been impementing a web page in HTML and I have came across a weird problem.
http://jsfiddle.net/SntpD/3/
#menuh
{
width:100%;
padding-top:10px;
padding-bottom:10px;
float:left;
font-family:arial, tahoma;
text-align:left;
padding-left:12%;
background:#c1188d;
}
I can't see anything here which should introduce the white margin on the left side.
The magenta belt for drop-down menu is supposed to be aligned strictly to left (in my opinion) but it is not. (left side should be like it's right side is to right edge.)
Could somebody tell me what is the distance between edge of browser and magenta div (#menuh) ?
There are default styles imposed by many browsers. In my case (Chrome/Mac), the body element has a margin imposed on it of 8px. You can use the following rule (put it at the top of your css) to remove all margin/padding on elements by default:
* { margin: 0; padding: 0 }
Or you can just remove the margin/padding on the body element. I prefer the wildcard method, since it keeps the same issue from coming up later with other browser defaults.
JSFiddle (and most browsers) give the <body> tag a default padding, which is the white space you're seeing. Set
body {
padding: 0;
}
and your problem goes away. The padding in your JSFiddle (for me on Chrome/Win8 at least) is 8px.
To catch all situations (browsers have different default styles), apply a 0 padding and margin to both <body> and <html>:
html, body {
padding: 0;
margin: 0;
}
Default padding is the issue. Most all browsers have it, so even outside of jsfiddle, you may encounter it.
Best thing to do is use a CSS reset stylesheet. Creates proper padding and margin reset for most of the elements you will use in your web page. Here are some examples:
http://yuilibrary.com/yui/docs/cssreset/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/
http://html5reset.org/
http://necolas.github.io/normalize.css/
I'm trying to create a div header that extends the entire length of the page, but I keep getting a small white outer border on all divs so that the entire page has a thin white border around the outside. I'd like for the divs to extend to the very edge.
I've tried a few different css options but none seemed to have worked. E.G (Not all at once)
div
{
padding:0;
margin:0;
border:0;
margin: 0px auto 0px auto;
}
That sounds like the default margin/padding on the body. Some browsers uses margin, some (Opera) uses padding, so set both:
body { margin: 0; padding: 0; }
In general, you should be using some form of css reset or normalization. I'd check out this one, because it's by the master genius of css resets himself, Paul Irish.
In compatibility mode for ie7, I am noticing a weird spacing issue for internet explorer 7. I have a joomla news feed arranged as links within a series of vertical list items. For some reason, the white space height between each line of text seems to be variable. Here is the url of the page in question, www.galloplaw.com. What could I do or set to fix this issue?
Even if you don't give any padding or margin to ul, li in every browser it takes some default margin and padding.
And the amount is different in different browsers.
So you need to do one thing, i.e reset the margin and padding.
Either use
*
{
margin: 0;
padding: 0;
}
to reset the margin of every element in the page or use
ul, li
{
margin: 0;
padding: 0;
}
to reset the margin of ul and li element only.
After resetting it you can give your custom margin and padding.
Hope this will help you.
I'd highly recommend using a true CSS reset like Eric Meyer's reset or Normalize CSS, but it maybe a little bit late in your project for that.
The problem here may be that, on your news li tags, you have top and bottom margins. In recent browsers, the bottom margin of one li will merge with the top margin of the following li. Not in IE7. You could remove the top margin from your li by deleting the following on line 475 of your css :
.latestnews li {
margin-top: 10px;
}