Comments on: Ah Ha Moments – Handcrafted CSS

By: Anonymous

Anonymous — Thu, 27 Oct 2011 20:34:00 +0000

This was an ah-hah moment for me, too, when I learned about this. That was maybe 2-3 years ago and I still use it all the time.

By: Ashic Mahtab

Ashic Mahtab — Wed, 19 Oct 2011 13:30:00 +0000

Awesome awesome tutorial that’s all a bunch of aha moments:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

By: Anonymous

Anonymous — Wed, 19 Oct 2011 13:01:00 +0000

Haha spoiler alert, that’s going to be another blog post actually.

By: Joey Vano

Joey Vano — Wed, 19 Oct 2011 03:22:00 +0000

Positioning can get complex once you start nesting … I try to go the float right for what I want to do first. If I can’t do it cleanly enough, then I go the positioning route.

Another reason is only modern browsers can handle nested positioning well enough (looking at you IE7).

By: Ryan Rauh

Ryan Rauh — Tue, 18 Oct 2011 13:50:00 +0000

True… You will need to use absolute positioning if you want the image to be clickable, which is the desired behavior for a date picker.

By: Ryan Rauh

Ryan Rauh — Tue, 18 Oct 2011 13:49:00 +0000

interesting… I will have to experiment more with this. I am far from a CSS cowboy but I’m learning. Thanks for sharing!

By: Craig A Rodway

Craig A Rodway — Tue, 18 Oct 2011 12:24:00 +0000

If all you want is an image in a text box, you could just set it as the CSS background, like in this version of the fiddle: http://jsfiddle.net/GgnCk/21/

By: david alpert

david alpert — Tue, 18 Oct 2011 05:27:00 +0000

IIRC absolute positioning is not relative to the closest parent with {position:relative}; rather it is absolutely positioned relative to the closest *positioned* parent. As such, {position:absolute} should also work to create a “positioning context” for any of it’s children, though you’d have to try it to double check my memory.

The reason that {position:relative} is used in examples is that {position:relative} without a top, left, right, or bottom value is treated essentially as {position:relative;top:0;left:0;} which means “take this element’s box, position it as per the normal flow of the document, then move it relatively 0 pixels down and 0 pixels to the right. a.k.a. don’t move it at all, which is why you can use {position:relative} to create a “positioning context” for an element’s children without impacting the positioning of the parent element.

By: Anonymous

Anonymous — Mon, 17 Oct 2011 17:53:00 +0000

Thanks! I will fix my examples. I like the padding right fix… Didn’t notice that the text would go behind the icon.

By: Jesse Williamson

Jesse Williamson — Mon, 17 Oct 2011 16:53:00 +0000

If I may offer suggestion. Rather than specify width on .date-picker, set it to display: inline-block and specify the width on the input. That way .date-picker is actually the same width as the input. With the current CSS, the input actually exceeds the width of its container because of the margin/padding.

Also, I know it’s a date-picker example, but you can technically enter text that gets “hidden” behind the icon. If you specify additional padding on the input, you can avoid this, but it changes your “right” style for the icon. I threw this all together here (looks good in FireFox and Chrome): http://jsfiddle.net/GgnCk/