Checkbox with label in the middle - css

I need to figure out how to to put label text next to checkbox button. I need the text in the middle of the checkbox button. I always got the checkbox a little above the text or little below it. Hard to get it exactly in the middle. When I fix in to the middle in one browser, in other browser it doesn't exactly in the middle. There is always a pixel or two that ruins it.
Here's the fiddle
http://jsfiddle.net/JhPHm/
<style>
.field input
{
margin: 0;
padding: 0;
vertical-align: top;
}
.field label
{
margin: 0;
padding: 0;
vertical-align: top;
font: normal 12px/14px arial;
}
</style>
<div style="padding: 30px;">
<div class="field">
<label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label>
</div>
</div>
Please help me get the text in the middle in all browsers. Here a picture with the differences:
http://img708.imageshack.us/img708/5410/checkbox.png

Instead of vertical-align:top, try vertical-align:middle. It may help a bit, but input elements are notorious for being uneven across browsers.

Aligning input elements is tough, and sometimes nearly impossible.
If the problem is that it's misbehaving in old browsers, consider that people browsing the web with these browsers will stumble upon misaligned checkboxes on more places than just yours. They are browsing the web while it's crumbling around them so to speak. They won't care because they either know they're using an old browser or they don't notice because all sites show these tiny glitches.
If you're going to have to add all sorts of tweaks and fixes for various browsers to get to an acceptable end result, also consider that all these tweaks add to the size of your CSS and to the complexity making it tougher to maintain in the future.
In the end for me, this stuff depends on the audience, the budget and obviously the amount of checkboxes. ;-)

The way I've hacked around this is to use relative positioning, like this:
input[type="radio"], input[type="checkbox"] {
cursor: pointer;
line-height: normal;
margin: 0px;
position: relative;
top: -3px;
}
For example, if you want to shift them up 3 pixels. Like you've pointed out above, you might get different results in different browsers.
In this situation, Firebug or Chrome Developer Tools is going to help you a lot. There may be some garbage you're inheriting from elsewhere. Like in the example above, I set the margin back to 0px because something higher up (and unavoidable) in the CSS structure was setting a margin of 4px on all input and screwing me.
Good luck!

Related

How do I use CSS to reposition this image?

In this image you see two versions of the same elements. The top one is what I am getting, the bottom is what I want to end up with. Of course the bottom of the image is lined up with the text in the label and the text in the textbox, but I need it lined up with the textbox's box. I'm somewhat newbie at CSS, and the things I've tried so far do not get me even off the plate.
The controls are coded as follows:
<asp:Label ID="TimeTextRequiredLabel" runat="server" Text="*"></asp:Label>
<asp:Label ID="TimeTextLabel" runat="server" Text="Time: "></asp:Label>
<asp:TextBox ID="TimeTextBox" runat="server" ReadOnly="false" Width="100"></asp:TextBox>
<asp:Image ID="TimePickerImageButton" runat="server" BorderWidth="0"
Width="34" Height="21" CssClass="TimePickerImage"
ImageUrl="~/UserControls/Images/ClockPicker.gif"
ToolTip="Pick a time." />
What should be in my CSS, in the class "TimePickerImage" to scootch it leftwise and down the few pixels necessary?
Edited to Add:
Ultimately went with #JuanMendes solution, and this class:
<style type="text/css">
.TimePickerImage {
position: relative;
top: .2em;
right: .3em;
}
</style>
This snugs it in right exactly where I needed it. Thanks! Next task is to get serious with learning CSS. Thus far I've been playing script-kiddie with it.
Edited Further to Add:
I've tried all the other variations proposed by both #MarcAudet and #JuanMendes and the above code works best. I guess I don't care so much about comforming to some theoretical "ideal" as making the thing result in what I need.
You need to add or adjust the vertical-align: bottom declaration in #TimePickerImageButton
From your screenshots, it appears that the image is aligned with the baseline of the text line, the default behavior for an inline image.
vertical-align will take care of the vertical positioning.
To move the element to the left, try adjusting margin-left. However, check the margin on the input field since it may have a margin, and also look for some white space between the input field and the image.
Demo
If you have the following HTML:
<div class="parent ex2">
<label for="the-time">Time:</label>
<input id="the-time" type="text">
<img src="http://placehold.it/30x25">
</div>
and apply the following CSS:
.ex2 img {
vertical-align: bottom;
}
You will see the positioning that you want.
Fiddle: http://jsfiddle.net/audetwebdesign/2PkUF/
If you have tall lines...
If you apply a larger value for line-height: 4.0, aligning elements to the bottom of the line box may look goofy.
You can also try vertical-align: text-bottom which should work.
See Example 3 in the demo.
You can always cheat and position the image yourself fudging values until it lines up(if you can't find a nicer way) http://jsfiddle.net/vTCHW/
Tested in FF, IE 8/9 and Chrome
img {
position: relative;
top: .3em;
}
You mentioned that Marc's answer is almost good enough. I think that is a better solution. You can make all three line up correctly by removing padding/margin from the input. http://jsfiddle.net/vTCHW/1/ Note that many people use a CSS reset system that would have taken care of the margins/paddings for you
img {
    vertical-align: bottom;
}
input {
padding: 0;
margin: 0;
}

Aligning the bottom of an inline block with the bottom of text (excluding descenders)

How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}​
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}

Impossible to collapse <br> in webkit?

As illustrated in this jsfiddle: http://jsfiddle.net/qrbhb/
If you take this markup:
<div>There should be no gap between us</div>
<br />
<div>There should be no gap between us</div>
and this css:
div {
background: #999;
}
br {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
All webkit based browsers will display a gap equal to the line height of the parent element, while firefox and IEs will not display a gap. I don't know who is following the spec here, but I can't for the life of me get this to display the same in all browsers and it's driving me crazy. Any ideas?
EDIT: Sorry folks, I was looking at a rather complicated layout and mistakenly thought some elements were floating that weren't. Floated elements behave as expected.
Odd. I can see some logic to what's going on. It seems to be using the line-height from the preceding element as the height. If you add this, for example, just before the <br /> as shown:
<div class="weird" /><br />
...and then set its line-height:
div.weird {
line-height: 0;
}
(jsFiddle here)
...then the <br /> loses its height.
So, I'd guess that the line-break "inherits" -- although that's rather the wrong word -- the height of the preceding bit of text. I'm not certain that's really what's going on, but it makes the most sense of the explanations I can think of.
Really, though, I'm with everyone else -- if you don't want a break between lines, don't use a line-break. If you're going to go a bit non-semantic for clearing stuff anyway, I'd just live with it and use a <div>; the practical elements of the web community will understand and forgive you :)
use display:none;
http://jsfiddle.net/qrbhb/13/

How to fix some issues with printing very basic HTML

I have some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart

Surrounding all content in div with span - why?

In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.

Resources