For the past few days, I've been struggling with some odd spacing on a website I'm building. Originally, I thought it was a display issue with Chrome, but I've been able to duplicate the problem in IE8, IE9, Firefox and Safari. I'm using old school HTML/CSS for backwards compatibility, so I can say it's not IE handling of HTML5 or some other bleeding edge update.
While some of the solutions on line have led me to try different things including floating the hedad, nothing's been successful & I always have padding on one of the long sides.
I have stripped this down to the BAREST of essentials to reproduce the problem, and have included a screen shot of the padding I can see on my end. I would certianly appreciate another set or seven of eyes showing me what I missed.
EDIT: line height turned out to the the culprit on this one, but vertically aligning the image to top per suggestion left the text at the top of the div. My sense would be that the header tag would preserve the default value, but that the and the img tag within the header would override that. Or can I only have one vertical align per div?
Second, is there a way to collapse line-height with CSS?
HTML CODE
<html>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="test.css">
</head>
<body>
<div id="header">
<img src="bluespacer.gif" height=125 width=400>
TEST
</div>
</body>
</html>
CSS CODE
#header {
font: serif;
color: blue;
background-color: gray;
}
My output looks like below
and here's the bluespacer.gif; 1px x 1px. Look close, it's like a dust speck!
( ) <---
You're looking at the wrong spot. It's not padding but line-height, that generates that white space.
Try to vertically align the image:
#header img {
vertical-align: bottom;
}
Explanation: In the default style, the image is placed on the baseline of text. That is, the lower edge aligns roughly with the lower edge of, say, the letter 'x'. But because text has descenders (like 'g' or 'j'), the surrounding box is drawn higher, which leads to the extra space below the image.
It's a weird issue. You can do this.
#header img { line-height: 0; }
#header img {
display: block;
}
Related
let me show the code for this webpage first and try to explain what I am asking.
h1 {
border: solid;
padding-top: 0px;
margin-top: 0px;
}
body {
padding: 0px;
margin: 0;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Practice1</title>
</head>
<body>
<h1>Sample H1 Header</h1>
</body>
</html>
What I am trying to accomplish is to have the H1 header just barely touch the top and bottom borders that surround it.
Now, I am aware that the issue is line-height. Since I have a descending character (the "p" in "Sample H1 Header"), the bottom half is just right. However, the top half isn't.
I don't even understand why the default line-height has that extra space on top? I understand the bottom for descending characters like "p" and "q", but what characters require the extra space on the top? So understanding this, I guess, is my first question.
The second question is how to change the top half in my example so that the "Sample H1 Header" just barely touches the border I defined. I can change the h1 css to line-height: .7; and that will give me what I am looking for....expect then my poor "p" is sticking outside. So I want to keep the line-height on the bottom half at the default, but change it just on the top. In other words, how can I control the top and bottom half portion of line-height independent of each other?
I did find one solution. That's using the following in combination with the H1 header.
line-height: .7;
padding-bottom: 7px;
That gives me the look I am accomplishing. The problem with that solution, though, is I need to seem to adjust it manually if I decide to later change font-families and sizes. I would like something more automatic that I can simply apply whenever I need it without having to measure and modify for each case. Any ideas?
Or is there a way I can just turn "off" the top half of line height or have it adjust automatically to the tallest capital letter of the font and size I am using?
Thanks!
as we know every font has their own vertical space. So if you want only vertical space of font inside the border then you have to make line-height same as the font-size.
h1 {
line-height: 36px;
font-size: 36px;
}
Some font have more vertical space at top so you have to manage that space using padding as required.
Every font has their own vertical space which is exactly define the line height so the solution which you have is the best for the case .
I have a problem using the vertical-align:top; property on a cell-tab css content.
Here the picture : http://img4.hostingpics.net/pics/157625Capture.png
My HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_test.css" />
<title>Test</title>
</head>
<body>
<div class='tableau'>
AAAA<img class='img1' src='images/drapeau_anglais.gif' />
<img class='img2' src='images/drapeau_anglais.gif' />
<span>BBBB</span>
<!-- This text lose the vertical-align:top; propertie because it is in the <span> => WHY ??? -->
<p>CCCC<img src='images/drapeau_anglais.gif' />DDDD</p>
<!-- As in the span, everything in my <p> loose it s vertical align propertie -->
</div>
</body>
</html>
My CSS code :
.tableau
{
display:table-cell;
border:1px solid black;
vertical-align:top;
}
.tableau p
{
display:inline-block;
}
.img1
{
/* I dont say anything here. img1 SHOULD be on top because of the ".tableau" class but it doesnt... why???*/
}
.img2
{
/* I force the vertical align on my image (but I shouldnt have to do that normally ?) But with this "trick" it works */
vertical-align:top;
}
Thanks a lot for your help !
I commend you for wanting to understand. The problem with vertical-align is that it doesn't take much HTML and CSS for there to be quite a lot going on. What we can do it to build the layout up piece by piece.
AAAA
This text is placed in a anonymous inline box. This goes in a line box, preceded by a zero-width inline box that's the height of the container element's font, called the strut. The strut and the AAAA text are vertically aligned with each other with respect to each others baseline. So already, we have
<img class='img1' src='...' />
The vertical-align of the .img1 element is the default which is baseline, and images are replaced inline elements, so the baseline of the image is its bottom margin edge. .img1 has no margins, border or padding, so that makes it the bottom edge of the image itself, so now, if we assume that the image is taller than the font, we have
Note that the line box is now taller than previously to accommodate the image. In fact the line box is taller than any of its component parts.
<img class='img2' src='...' /> part one
We'll skip the second image for the moment and come back to it later. We'll just leave a placeholder for now.
<span>BBBB</span>
Exactly as AAAA, except that here the inline box is formed from a real element rather than being anonymous. This gives us
CCCC<img src='...' />DDDD
This is exactly like AAAA<img src='...' />BBBB`. Nothing new to add here.
<p>CC...DD</p>
The p element is set to inline-block, which means that its line-height contribution to the line it is in is its margin box. It has default margins from the user agent stylesheet of (typically) 1em top and bottom. It too is aligned to the other elements on the line using its baseline. So now we have
Again the line box grows in height, this time to accommodate the p element's margin box.
<img class='img2' src='...' /> part two
Now we can fill in the placeholder we left earlier for .img2. This image is vertical align:top, so it doesn't align with the other elements, but with the top of the line box. So that gives us
.tableau { display:table-cell; vertical-align:top; }
Then the whole thing is wrapped up as one and positioned at the top of the table-cell.
Wrap up
Finally, we need to account for why "AAAA" appears at the top in your picture and not aligned to the other text as depicted in my answer above. This seems to be because you captured the picture from Chrome, and was therefore subjected to Chrome's screwy vertical-align implementation. Firefox and IE display the layout correctly.
With your vertial-align: top You mean about effect like here: http://jsfiddle.net/bdoq99a2/1/
I've simply changed this:
.tableau *{
display: inline;
}
Image: http://take.ms/BxlzD
The problem comes from the browser stylesheet, in this case the default margin for paragraphs. No need to fuss around with display: table-cell and vertical-align: top. Just check the fiddle: http://jsfiddle.net/bdoq99a2/2/
.tableau {
border:1px solid black;
}
.tableau p {
display: inline-block;
margin: 0;
}
<div class='tableau'>
AAAA<img class='img1' src='http://lorempixel.com/400/200/' />
<img class='img3' src='http://lorempixel.com/300/200/' />
<span>BBBB</span>
<p>CCCC<img src='http://lorempixel.com/300/200/' />DDDD</p>
</div>
I have this annoying space under my picture for no reason.
I'm using www.getskeleton.com as the framework.
HTML code
<div class="four columns bottom">
<div class="box">
<img src="images/picture.png" title="" alt="">
</div>
</div>
CSS code
.box{
border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}
Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).
The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.
The fix:
img {
vertical-align: top;
}
I hope that helps someone who may have run into this problem.
Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.
However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.
I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.
Try this:
.box img {
display: block;
padding: 0px;
margin: 0px;
}
Try this: .box { font-size: 0; }
Your image need to be floated. Try this:
#yourimage{
float: left;}
As mentioned, more information would help a lot but i have no doubt that it is padding that is causing the border to go out of the image, reason put very simply being
margin pushes outside the element
padding pushes inside the element
as it were.
Fix then:
.box {
padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
margin-bottom: 0px;
}
It's an age old quirk - the whitespace from your line formatting is causing the gap. Add
<br /> after the image.
Try this
.box{
display:flex
}
I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p
I am trying to create a liquid 3 column area within a list item. To achieve this, I use the standard method of having 3 elements, of which the first two are the sides, floated left and right, and the 3rd is the content, which should sit between the two. The following HTML works fine in Firefox, but doesn't render correctly in IE7 - the content is rendered below the two floated elements. Any ideas what the problem is?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*
{
margin: 0;
padding: 0;
border: 0;
}
span
{
display:block;
}
.corner
{
width: 12px;
height: 12px;
}
.tl
{
float: left;
}
.tr
{
float: right;
}
.fill
{
margin: 0px 12px;
}
</style>
</head>
<body>
<ul>
<li>
<span class="tl corner">a</span>
<span class="tr corner">b</span>
<span class="fill">text text text</span>
</li>
</ul>
</body>
</html>
Note that replacing the spans with divs results in the same effect. I've also tried various DocTypes with no luck. And it works fine outside of the list, hence the problem appears to be intrinsic to using the list.
The way IE sees it, you're trying to jam in the lines one after the other, but the first two have already taken up their space, FLOATing away, which leaves the last SPAN in the LI to fight for the next level, which in IE looks like the next level below.
Since the last SPAN is not floated, that's also why it gets knocked to the next level.
Also, SPANs are inline styles, not block level elements. You should replace SPAN with DIV is you still want to try and style this in a LI element.
You should also use a full DOCTYPE so the browsers will know how to render the page. Otherwise they will default to quirks mode, ugly and all over the place.
But the better tactic is to create this float of 3 columns outside of the LI and in a DIV setting.
Have a read of CSSplay or Max Design on creating 3 column layouts.
It's a bit difficult to say anything without seeing the markup, but why don't you just put the two elements which should float inside the content element? You would have to adjust with some padding on the content element, but that should do the job. Then again, not quite sure what you mean. If you supply us with a bit more markup, it would be easier to tell.
The center block should have margins to either side allowing room for the floated blocks.
The answer is to wrap the spans in a block level element (say, a div), with overflow set to hidden. Example came from a more in depth look at the 2nd CSSplay example.