I came across an interesting HTML button tag behavior while trying to style a button that has no text inside, only a font icon -- the button without text causes all subsequent buttons which do have text to be pushed down. The issue only appears when the buttons have a height attribute specified.
JSFiddle
<header>
<button><!-- No text here --></button>
<button>This button is pushed down</button>
</header>
button { height: 40px; }
At first I was sure it was due to the font icon inside the first button that did some weird baseline magic, but as you can see from the minimal working example, the behavior is maintained when there is no content at all inside the button.
I can fix this by adding content to the first button, but because my only content is a <span class="icon user"></span>, which is a font icon, it does in fact interfere with the font baseline, and positions the button off just a few pixels. This is why I have decided to position the icon inside absolutely, which fixes the original slight positioning issue, but introduces this new one, as the button now acts as if it were empty.
So, the question remains -- how do I avoid positioning issues with empty buttons?
Note: it seems that the above only happens on webkit browsers; Firefox positions buttons with text correctly, but pushes the empty ones up.
It is because the button is an inline element, which is aligned to baseline by default.
From W3C :
Align the baseline of the box with the baseline of the parent box. If
the box does not have a baseline, align the bottom margin edge with
the parent's baseline.
Inorder to align them correctly, use vertical-align: top; (Or middle, bottom as a value)
button {
height: 40px;
margin-left: 5px;
vertical-align: top;
}
Demo
On the other hand you can also use zero width space entity - Demo
This behavior is common with inline and inline-block elements, if you want to avoid everything above, you can use float here, than you won't need the vertical-align property as float will force the button to be inline as well as block level
Demo (Using float: left;)
Note: If you are going with float, just make sure you clear them, if you aren't sure what clear means, than refer my answer
here which will explain in detail.
add text to the button and indent the text off the screen. This will solve your problem as well as helping with your SEO as robots indexing your site can register text but not the content of the image.
button{
width:;
height:;
display:block;
text-indent:-9999px;
}
Related
In this page:
http://getbootstrap.com/components/#input-groups-buttons
If you change the Go! button to a label (with the Chrome inspector) you'll notice that the Go! button is not longer on top of the input field:
(Instead of the borders to be one on top of the other they are side by side.)
Why is this and how to make the two elements to be one on top of another?
Bootstrap applies max-width:100% to a label. That shrinks its border box (box-sizing:border-box is applied throughout) such that that fits inside its containing block (its parent span element), whose width is reduced by one pixel because that is determined by the fact that it must contain the margin box of the Go! button/label which has margin-right:-1px applied. The span is the button/label's containing block because its input-group-btn class makes it display:table-cell
So to get the same effect with a label, just set label { max-width:none; } In practice, you will probably want a more specific selector.
Putting a label on top of an input isn't the best idea, it would be better to split them up and have them float next to each other. This question answered here may help. This could also be adjusted using the z-index in the style portion of each div. As to answer you title in why this happens, i'm not entirely sure...
I'm trying to remove all the padding/margin around the images in the bottom table of this PBWorks wiki page:
http://ja2v113.pbworks.com/w/page/29061905/Map%20Database%20Project%3A%20Azazel#view=page
However, there remains always a little bit of white space at the bottom of each image. At least in Chrome.
How do I get rid of this? If you look at the page "source" you can see I tried using CSS and HTML but haven't been successful.
Make block elements of the images:
img {
display: block;
}
Add vertical-align: bottom or display-block to the images. Those are two very different solutions for the same problem.
The problem is that they are inline blocks now and aligned on the baseline of the text. The white space you see is the space between the baseline and the bottom line of the font.
You can solve this by adding vertical-align: bottom to align the image at the bottom of the font, eliminating the white space.
Or you can display the images as block elements. By doing that there is no text line at all inside the link, but only the block image, so baseline doesn't matter anymore.
In your case I don't think the issue has to do with inline vs block-level elements, nor vertical-align.
Try setting line-height to 0 on your <td>s.
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
I have a div, which contains an image and a span. I would like the text in the span to be middle-aligned with the image. Naturally, I made a fiddle for your convenience.
Here is the HTML:
<div id="legend">
<img src="http://fate.holmes-cj.com/plus.png"/>
<span> * 5</span>
</div>
Here are some of the things I've tried:
span {vertical-align:middle;} seems to do nothing.
span {vertical-align:top;} aligns the text to the top of the image. You would think that if top works, so would middle.
span {vertical-align:20px;} gives me what I want, but it depends upon (and interacts with) the div height, the image height, and the font size.
adding display:table-cell has been suggested elsewhere on SO, but seems to do nothing in Chrome.
You can see the problem in context at my Fate Dice Roller. Click on "roll" a few times, and then mouse over the histogram. You get some neat stats on your dice rolls, but the text portion is misaligned.
Am I just out of luck here, or is vertical alignment really supposed to be this messy? I would love a solution that doesn't have to be tweaked when I change the font size.
Here you go: http://jsfiddle.net/nYbwf/3/
Just vertical-align: middle on the image element, that way it will align vertically right in the middle instead of baseline.
I have an input box, and I want some nice light grey text right below it (1 line instruction).
As of now the text is sitting a lower than I want in relation to the textbox (which is above it).
I am doing a clear:both, and if I remove it the next is all the way to the right of the input box.
What is wrong here?
Your HTML tags (for the text input and for the paragraph of text below it) all have default margin and padding. Probably the issue can be resolved by reducing the margin-bottom attribute on the text input as well as the margin-top on the paragraph. Here's some example code.
CSS:
.text_input_style {margin-bottom:0;}
.help_text_style {margin-top:0;clear:both;}
HTML:
<input type="text" value="default value" name="text_input" class="text_input_style" />
<p class="help_text_style">Help text here.</p>
Obviously, you don't have to use classes (you could just attach to the HTML element and/or IDs), but this is the idea.
Bottom line: adjust margin-bottom on the input and margin-top on the help text.
Well it all depends on what HTML tags your placing the text within.
Each element has a default behaviour.
A DIV element will display as a block. As such it will display on the following line in the natural flow of the HTML in the page. It will also cause all the HTML that comes after it to be displayed below it.
A SPAN element will not be displayed as a block. In fact it provides no visual change by itself with no CSS applied to it. A SPAN element is simply displayed inline and everything just flows around it like normal.
You can use CSS styles to modify the layout behaviour of HTML elements.
For example, you can specify that a DIV element be displayed left or right of the HTML content by using float:left or float:right. You could then use the CSS clear:both to specify that an element should be displayed below all floating content.
So, in your case, if you remove the clear:both style, then the element will no longer be displayed below floating elements and this will cause your elements to be rearranged.
-Frinny
You can make it higher by applying this:
.class { position: relative; top: -5px; }
or you can reduce the line height:
.class { line-height: 10px; }
You have to have the clear: both in order to make it go to the next line, but because it is a new line, the line-height property applies. Reducing the line height should make it higher, and if it isn't close enough, try positioning it relatively.
You probably have padding on the "instruction". Relevant html and css maybe?