'Line-height: 1' in CSS reset causes HTML background to extend - html

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.

Related

CSS HTML figure padding

I am trying to use CSS and HTML to insert an image into a webpage.
I have the following on CSS:
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
padding-top:475px;
}
and in my HTML, I have:
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP"></div>
Although this works, I have a big white space on the top and bottom of the images, which I do not want. I tried adjusting the padding values, but that does not seem to really help.
Could anyone please point me in the right direction to get rid of these white spaces?
I would remove the padding top. That should eliminate the problem. I'm not sure why you would need such a high amount of padding between them.
EDIT - Just read that you say the padding hasn't helped you. Any chance of a link to the url? Or a live example somewhere to see the issue in more detail?
Make sure that the line-height of the figure or surrounding element is set to line-height:1;
The only size that you have specified is the padding. The size of a background image doesn't affect the size of the element. You should remove the padding, and specify width and height for the element so that it's the same size as the image.
Unfortenately there is no way to do that in HTML/CSS. Only way of doing this is inserting the values on your server or client-side by javascript. You should really do it with <img> tags inside your <div> element like so.
Make sure you point to the right location of the image you want to show relevent to folder where it is being called.
http://jsfiddle.net/gKFAT/
Here you try to show an image as a background for a div. Is there really strong reason not to use html like above?
<div id="maintext">
<p> my page </p>
</div>
<div id="eDTP">
<img src="eDTP.png">
</div>
If so, you need to specify the dimentions of your di, 'cause it doesn't auto fit the background size (no surprise here, I think).
Try
#eDTP {
background-image: url(eDTP.png);
background-repeat: no-repeat;
background-position: center;
width: 120px; //background image width here
height: 150px; // and height here
}
Your biggest problem is width and height. Also, how do you want this image displayed? Do you want it below the text, on the side of the text, etc? In modern browsers, a div is fully collapsed, and its height is equal to 0. Its width, by default, is 100%. IE7 and older does not work this way for the height.
You need to specify, not padding, but width and height for your div container, eDTP, that is, if you wish to have the background image added via CSS. If you wish to have an image populate eDTP using the img tag, then you do not have to specify the height.
By the way, the reason you see your image with the padding is based on something called the box model. Padding extends the visible region of background color, a background image, and others. The padding you have is functioning like you have a height assigned to its container. But as I said before, this is a very bad way to do this. Add this to your eDTP declaration:
#eDTP {
background: url(eDTP.png) no-repeat center;
width:500px; /* Change this value to the width of your image */
height:475px;/* I assume this is the height of your image */
}

Unwanted white areas on HTML page

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.

Unknown black area on my homepage

There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}

How come there is 4px of extra padding appearing under my <a> element?

H3LLO,
For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.
Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.
To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.
Any ideas on how to get rid of a element's extra bottom padding?
Thanks
Adam
add vertical-align:bottom; to your img css properties.
a {display: inline-block}
img {display: block}
Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.
The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.
<div style="width:64px; height:64px">
<img src ='image.png' style="width:64px; height:64px" />
</div>
I'm not positive why it occurs, but you could try YUI Reset to fix it.

Centering entire page with CSS

I am attempting to center my entire page using only CSS and it is proving more complicated than i first expected. Currently my code works in IE but not in Firefox which makes a change. The page can be seen here. Below is the code portion involved:
#wrap {
width: 960px;
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
}
The structure of my HTML is:
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
It seems that in Firefox everything following the wrap div is be created outside of it. This is problem is resolved if i add a 'float: left' to the wrap div but then obviously everything floats left rather than center.
Any help would be greatly appreciated.
Change your markup to
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
EDIT: Looking at the link, you've already done that. You'll want to either add overflow:auto; to #wrap or add a clearing div at the end just before the closing tag on the wrap div.
Also, on your example page, the wrap div is missing its closing tag.
Use this CSS:
body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}
Then, let's examine this statement from your question:
everything following the wrap div is be created outside of it
That's kind of the way it works. Don't put anything outside of your wrap div. Think of it as a surrogate body.
If you know the width of your page - and it's fixed, you can use the following methodology.
Contain your page content with a div (which will act as a wrapper)
Give this 'wrapper' div a width of 'W'
Position the wrapper div using 'left: 50%;'
now, utilising the fact that it's possible to have a negative margin...
Pull back the positioning of the wrapper div using 'margin-left: -(W/2);'