I have two buttons, one implemented as an input, the other as a span. They are put side by side with:
{ display:inline-block; }
The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.
But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?
Now I need them to be of the same height and aligned horizontally.
Update:
Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.
http://jsfiddle.net/gBeCP/
Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.
I think I have it done.
Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>
My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.
The reason it's different is because each browser has its own default styles so they will vary... just like javascript varies dramatically.
Have you ever thought about actually setting some height on the elements that you want to be the same height?
maybe
span, input[type="button"] {
height: 25px;
}
Or more specifically if you like.
The easiest solution is the following two lines (vendor-prefixes removed for brevity):
.tranCoreButton {
/* I couldn't be bothered to read through the rest of the CSS, or the
in-line CSS; seriously: *minimal* reproductive demo, please... */
display: inline-block;
box-sizing: border-box;
}
JS Fiddle demo.
Related
I have a simple structure
<nav>
<span>
A
B
C
<span>
<nav>
and I go Godzilla on the css, e.g.
margin:0px; padding:0px; vertical-align:bottom; box-sizing:border-box;
But no matter what I try there is always this really cool 1px gap at the bottom of the element. Why is it there and how would you make it go away if you were me?
fiddle
One possible solution would be to make the <span> element inline-block. This will remove the gap
EXAMPLE HERE
nav > span {
display: inline-block;
}
Alternatively, a display of block works too. The point is that it is no longer a pure inline element.
I see what you mean, it does appear (on Firefox) without zooming in closely. I believe the problem is the default line-height given to text in browsers, which results in a bit of extra space between text lines.
With some experimentation, I found that adding these styles works:
nav {
font-size:16px; /* Default font size in Firefox, but specify just in case */
line-height:18px;
}
Here's an updated JSFiddle to demonstrate it. Seems to work properly in Firefox and Chrome. Let me know if you have any problems, though. Hope this helps!
Is it possible to prevent non-clickable area between lines in a multi-line html anchor tag? Here in this example I use line height 1.5 and you can't click between lines.
I know in html5 we can put block-level tags in anchor like <a><div>Link</div></a> but the problem is this part of content can be edited by users and I can't ask them to write their anchor links like this. Is it possible to fix this issue with css only?
CSS:
a {
line-height:1.5em;
}
HTML:
This is a <br> multiline anchor
<br><br><br>
This is a very long anchor displayed as a multiline anchor without BR
DEMO:
http://jsfiddle.net/ergec/F52uY/2/
You can set display: inline-block; or display: block to a, and then it will be clickable.
Example: http://jsfiddle.net/RMXfc/
Or you can increase padding and set negative margin at the same time. This will reduce gap.
Example: http://jsfiddle.net/693z4/
If you give your anchor tags a display: block; you will have a solid clickable area.
a {
line-height:1.5em;
display: block;
}
JSFIDDLE
One problem with display: block; is without a specified width, then entire 100% width is clickable.
The only way to approximate it without messing with the rest of the layout of your text (including the surrounding text of the link) is to add some top/bottom paddings to these links..
So adding padding:3px 0; to your code would fix the issue.
(it will require adjusting, though, in relation to your font-size and line-height)
Demo at http://jsfiddle.net/F52uY/7/
Newbie question here. I have a navigation bar with padding in all of my li's, and I want to be able to target the ahref when you click in the padding. Would this be done with onclick/javascript for each li? or is there a simple CSS method?
Also I have a search bar, that I want to focus by clicking on it's padding as well. I assume this would require a similar method.
First, you must set display:inline-block as a property for your links. Then, remove the padding from your list-item and apply it to the links.
Your CSS should reflect the following:
li a {
display: inline-block;
padding: 10px;
}
Here's a fiddle for a working example.
maybe you could specify:
li.someclass a {
display: inline-block; //or display:block;
width: 100%;
height: 100%;
}
(remember to specify width/height of parent container aswell)
not sure if i got you right though
Set the padding to the anchor instead of to the li.
See http://jsfiddle.net/FBsKH/ and compare.
About the search bar, can you post some code?
If I add padding to a <input type="text" /> and I click it on it's padding, it gets focus (tested on Firefox and Chrome). See it here: http://jsfiddle.net/fnsRu/
Edit:
Ah, now I understand what you want with the search bar.
The problem is that AFAIK with CSS you can't set focus to an element.
Then, you can:
Remove paddings: http://jsfiddle.net/fnsRu/3/
Use JavaScript: http://jsfiddle.net/fnsRu/4/
I have a page like http://ratingscorner.com/mobiles
if u see the left hand side there is a + image displayed. it does not appear in IE 7. i tried all possible things ..but could not solve it. so seeking help here.. any help on this.
You need to explicitly state the width and height in your css declaration for .plus
span.plus {
width:12px;
height:12px;
}
It is a span, inline element.
Add display: block; and specify the height and width.
Also it behaves the same in IE8.
Your image has a height and width of 0, so it won't show up in IE7 at all. I did some quick debugging and found that if you set the height to 15px and display to block, then it shows up just fine. Adding a left float helped move it to the left of the button name.
So to your .Syb .plus CSS definition, add:
height:15px;
display:block;
float:left;
Then you should be fine.
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.