I would like to center the text in a button, however, it seems to sit too far down, at least in Chrome. Any tricks? I've tried setting line-height.
http://jsfiddle.net/BCKYp/
<button>go</button>
button{
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:23px;
}
When using line-height, you need to set it equal to the font-size.
Also add vertical-align: top
button {
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:13px;
font-size: 13px;
vertical-align: top;
}
http://jsfiddle.net/BCKYp/8/
Setting line-height equal to element's height is working properly if your text written in uppercase. Line-height is expected to be used as a property for styling paragraphs and using it for centering element in a div or a button you'll have to adjust it's value for every specific case.
In your case you can either adjust the line-height visually or use padding-top and padding-bottom for sizing the element.
I used padding-bottom and it works fine.
http://jsfiddle.net/BCKYp/22/
This is a case by case question, personally I would remove the height and line-height and set top and bottom padding. It also looks slightly skewed due to the nature of the character 'g' taking up more space below.
My preference would be:
button{
background:yellow;
width:28px;
padding:5px 0;
margin:0;
border:solid black 1px;
}
Here's an updated fiddle, you can adjust the padding to suit your needs. I've also added another button to show with more centred characters. Y.
I would just set a smaller line-height, but really I would use a reset css file to make sure this will have similar effects on all browsers.
line-height: 21px;
As the above will look different on the other browsers but will fix the problem for Chrome. Its an ugly solution in otherwords.
Add one more property in your css class. Add following property to your class
text-align: center;
It doesn't appear centered because g and o only extend halfway up the baseline.
http://jsfiddle.net/ExplosionPIlls/BCKYp/1/
However, you can reduce the line-height (to 11px for example) to give the illusion of moving the lower-cased letters upwards:
http://jsfiddle.net/ExplosionPIlls/BCKYp/4/
try this
don't give width and height,
http://jsfiddle.net/BCKYp/12/
button{
background:yellow;
padding:2px;
margin:0;
border:solid black 1px;
}
Related
How to make input fields (text) end where the divs end? Now they go pass the grey box. See jsfiddle.
http://jsfiddle.net/FNZD6/
input[type="text"].normal100{
display:block;
font-size: 1.6em;
width:100%;
margin:0px;
padding: 0px;
}
I'm not quite sure why this happens, but here is a fix.
*{
box-sizing: border-box;
}
You'll need to prefix that too. I always set the box-sizing on everything but you can set it on specific elements if you wish.
Demo
The input field is slightly bigger than the divs in your example because of the left and right borders. Easiest way to fix that is to explicitly set those to 0:
input[type="text"].normal100{
display:block;
font-size: 1.6em;
width:100%;
margin:0;
padding:0;
border-left:0;
border-right:0;
}
You'll probably want to add a border to your div.
Currently my menu is working with div's as links. Needless to say this isn't good practice. Now I'm changing it to working with link tags but I've stumped upon a problem.
When a link is 'active', eg you're on that page, a background image is applied. This background image is centered to the right, one pixel further than the div so it overlaps a border of the div. Here's the css for the div:
background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;
Now, applying this method to a link tag doesn't seem to work. I have got the image to move 1 pixel to the right, but even with a z-index set, the image is under the border. Here's the css for the link:
background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;
Any thoughts about how come this doesn't work? I've also tried with margin-right:-1px; but this doesn't change anything.
I just noticed that when I set eg -5px in the background css, the rest of the image that should stick out of the border doesn't stick out, it just dissapears.
EDIT: Here's a jsfiddle: http://jsfiddle.net/UkYmJ/
The image isn't transparant but white, so the border should be 'gone' inside the triangle.
As far as I know, there's no such thing as "... center right "AND" -1px;" to the background properties. You either use "right" or a number value. What you can do that could work is using a percentage value higher than 100%, but that would be non precise in some cases, and I think it would not solve your problem.
If you're using, an anchor tag with a background and you want this background to overlap a border to the right, this border needs to be on a parent container and you'll shift your anchor tag (not its background) a -1px to the right (right: -1px; if you're using position: absolute on "a" tag an position: relative; on the parent).
Edit: using this css on your Fiddle, it works for me:
#menu{
width:149px;
border:1px solid red;
}
#menu a{
display:block;
padding:10px;
width:109px;
text-decoration:none;
font-family:Comic Sans MS;
font-size:large;
color:black;
}
#menu a:hover, #menu a.active{
color:#99182c;
}
#menu a.active{
background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
position: relative;
right: -21px;
}
​Will still try to improve it because it's a bit messy...
I don't think that background: someColor url(something) no-repeat center right -1px; is a valid syntax. background: someColor url(something) center right no-repeat; is.
why do you need to use z-index?
try making your links display as blocks while still on a single line with a {display: inline-block}
edit: you could use calc(100%-1px) but this is only supported by IE9+ Saf6+ and still not Opera: http://caniuse.com/#search=calc (and needs a vendor prefix for some browsers).
Though you can achieve what you want to do with plain CSS2.1 ;)
I believe I have read your question properly.
I think what the problem here is that backgrounds will be clipped at the edge of the element for which it is declared. It won't shift beyond the boundaries of the A element.
You could try to add padding to your A:active to give you a little breathing room.
Your new CSS would be like so:
A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}
Let me know if that works for you.
Can background image extend beyond div's borders? Does overflow: visible apply to this?
No, a background can't go beyond the edge of an element.
The overflow style controls how the element reacts when the content is larger than the specified size of the element.
However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.
Following up on kijin's advice, I'd like to share my solution for image offsets:
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div> to position my logo with a -50px vertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
not possible to set a background image 'outside' it's element,
BUT YOU CAN DO what you want with using 'PSEUDO' element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
here is the code
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using padding and some clever tweaking of negative margins & position.
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
I tried using negative values for background-position but it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
After a little bit of research: No and No :)
I have a CSS Question I want this div to automatically expand vertically as more and more content fills it. I thought that omitting it's height setting in the style would do so but it hasn't seemed to fix it. My CSS
.box{
-moz-border-radius: 15px 15px 15px 15px;
background-color:#433B39;
background-image:none;
color:white;
display:block;
margin-top:20px;
padding-left:16px;
padding-right:16px;
width:925px;
}
Are you floating the content inside of that div? If so, then it won't expand to fit them, you need to put a clearing div after the floating content for this.
use auto:height .You may also mention min-height to some value to maintain a minimum height
ex :
.box{
width:925px;
min-height:10px;
height:auto;
}
Did you try with setting float:left for the external container?
I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:
.dropdowndiv
{
font-size:10pt;
margin-bottom:2px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
Try this:
.dropdowndiv
{
font-size:10pt;
padding-bottom:4px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
I changed the margin-bottom setting of 2px to a padding-bottom of 4px.
UPDATE:
Looked fine on mine, but you can add padding to any side to get it the way you wish.
Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:
http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/
Adding a line height of 26px should align your text to the middle.