I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
Related
I am using the following code to style blockquotes on my site:
blockquote {
border-left: 7px solid #b83131;
background: #ebebeb;
margin: 1.5em 25px;
padding: 1px 10px;
quotes:"\201C""\201D""\2018""\2019";
}
The line that begins with padding: controls the padding on the top and bottom of the block quote. For some reason, it doesn't work as it should. Instead of padding by only 1px, it is always way more than that. It's as if, no matter what I set as the padding, it is always at least a few pixels high.
For example, with the padding set as you see in the code above, this is the result:
As you can see, the padding on the top and bottom is way more than 1px. Why is that? I want the padding to be a true 1px, but it seems that no matter how I alter the code, it's either no padding at all, or way more than 1px.
Any help here?
If you take a look at the following jsfiddle, you will see that with only the code you posted, one cannot reproduce the problem.
I for myself believe that there is a <p> tag inside your blockquote.
Just remove it by setting its margin to 0.
p {
margin: 0;
}
Try adjusting the line height of the text within the blockquote. It might be that the 1px top and bottom padding is enough to for the text to kick down to the next full line making it looks like it's over padded.
I had the a similar problem: I was trying to minimize the space above the block quotation, so I set
BLOCKQUOTE {margin-top: 0}
This seemed to work sometimes, but not always.
Here's what I discovered: When it didn't work, there was an unclosed paragraph <P> tag somewhere above the quotation. The opening <BLOCKQUOTE> tag effectively closes that paragraph, so the unwanted whitespace was coming, not from the top margin of the quotation, but from the bottom margin of the paragraph above it. This fixed it:
BLOCKQUOTE {margin-top: 0}
P {margin-bottom: 0}
Of course, if you don't want every paragraph to have zero bottom margin, you can define a special class.
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested <meta ... viewport .../> tag, did not make a difference (it is present in the test page right now.)
Background color stretches accross entire width of ul
<div>s are already block elements
WebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to display: inline-block; but this did not appear to change anything
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.
HTML:
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)
I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scroll or auto.
The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.
Also make sure you set min-width:100% for body and html.
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
Try this,
.success { background-color: #ccffcc; float:left;}
or try this,
.success { background-color: #ccffcc; overflow:auto;}
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.
Have a look at this page. The images on the right should be centered within their divs. But if you look closely, there's a small border of around 3 pixels at the top. And if you disable the overflow: hidden (through firebug or the IE8 equivalent), it sticks out the bottom.
The HTML is this:
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And the CSS, this:
div.small
{
width:100px;
height:100px;
line-height:100px;
text-align:center;
overflow:hidden;
margin:5px;
background-color: #C0C0C0;
float:left;
}
div.small img
{
vertical-align: middle;
max-width:100px;
max-height:100px;
display: inline;
}
What is causing this mysterious gap? I've checked margins and padding, and they don't seem to be the problem.
NB: I'm not completely sure this explanation is correct, but it seems reasonable to me.
First, let's see what the spec has to say on leading and half-leading:
Since the value of 'line-height' may be different from the height of the content area there may be space above and below rendered glyphs. The difference between the content height and the used value of 'line-height' is called the leading. Half the leading is called the half-leading.
User agents center glyphs vertically in an inline box, adding half-leading on the top and bottom. For example, if a piece of text is '12px' high and the 'line-height' value is '14px', 2pxs of extra space should be added: 1px above and 1px below the letters. (This applies to empty boxes as well, as if the empty box contained an infinitely narrow letter.)
So far, so good. So any line boxes within a div.small that have a height less than the div.small's line-height will be vertically centered with the div.small. Now let's look at the vertical-align property, specifically the middle value:
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
Note that this is not necessarily the center of the line box! The exact position will change with your choice of font face and size. You can verify this by zooming the text larger and smaller: the size of the gap changes.
As you found, setting font-size: 0 removes the gap entirely. As the font now has no height, the line box gets a leading and half-leading of 50px, with the baseline centered vertically. To render the vertical-align: middle image, the browser sets its midpoint at that baseline, plus the x-height of the font, which is now zero. This gives a vertically-centered image.
Turns out, setting font-size:0; on the div fixes the problem. However, it still doesn't explain the gap. Anyone know what causes the gap?
I cant explain entirely what is happening but after dealing with same problem, it appears it had something to do with the way I was declaring font property in css, e.g.
font:11px/1.35em Verdana, Arial, Helvetica, sans-serif;
= bad for tables apparently. -- I removed that declaration and instead used font-size:11px, line-height:px, font-family, etc, and it fixed the gap!