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.
Related
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;
}
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.
Here is my CSS and a link to my website:
.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}
I confirm the bug and like randy I think this is a problem with chrome and not your code.
It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.
After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:
.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
Can you test on your side to see if it resolves the issue?
I see your problem, but it look like a chrome bug though, not a code bug. two out of four elements have correct hover backgrounds, so its a bit strange. You can try to set the width of the element again in the hover, or make the element 1px wider and set background-repeat:none; to display the extra pixel. Bad solution though..
I have the following css class:
.CtractLabel
{
font-weight:bold;
padding: 2px;
text-align:left;
/* width:120px; */
width:150px;
float:left;
border-bottom:solid 1px #aaaaaa;
border-right:solid 1px #aaaaaa;
background: white url('../Images/GridHeaderBg.gif') repeat-x bottom;
}
On my page, I have a a div with text that is less than 150px. However, the div does not expand to 150px, but contracts around the text.
Is there a way to force the div to be precisely 150px regardless of the length of the text in the div?
The default value for the width of a div element is auto, which causes it to take up all available space horisontally.
If you don't get this behaviour, there are some possible causes:
You have made it a floating element.
You have specified a width for it somehow, perhaps indirectly.
You have some other element taking up space.
To see exactly what CSS applies to an element, and exactly where elements are, you can use the FireBug plugin in Firefox.
First of all here the work in progress website link http://jacobnlsn.com/wordpress/. I want the bars to be the same height. Here is what i have in CSS for both:
#bodybinblog {
width:546px;
float:left;
background:#400000;
border-left:solid 9px #cdba70;
border-right:solid 9px #cdba70;
margin:0 15px 0 30px;
padding:0;
}
#sidebarbinblog {
width:229px;
height:inherit;
float:left;
background:#400000;
border-left:solid 10px #cdba70;
border-right:solid 10px #cdba70;
margin:0 0 0 11px;
padding:0;
}
Any idea how to fix this?
I think one of the tricks designers use in webdesigns is the laying of background images. In this case, you want the sidebarbinblog to assume the same height as the bodybinblog because you want the background to fit nicely. If the sidebar's height is higher than the body, same problem will occur but this time on the body side.
The solution is to create a background image of maybe 1px horizontally capturing both for the body and the sidebar. Apply that background on the container div of both the body and the sidebar Repeat-y it so it spans the full height.
You want to use "faux columns". Here is a useful link - http://dustinbrewer.com/tutorials/fauxcolumns/
It should work like magic.