CSS question

[Joshua Russo]

I know this is a bit off topic but I know this place is full of very helpful intelligent people. :o)

Ok so I have an html block (div, p, doesn't matter what kind), and I fill it with a label and an input text field. The input is always larger than the label (rightly so), but the label is always aligned to the top of the block. I want to center the label in the block but for the life of me, I can't figure out how.

Any ideas on how to fix it or where to go to get an answer?

[Micky Hulse]

Hello,

[ot]

One way to do it...

You could make all of your elements (label/input) inside of your block
container display "inline" and then use something like this:

#someContainer * {
...
vertical-align: middle !important;
...
}

The "!important" (what I call "not important") is optional, depending
on your setup.

You might also play around with line-height and font-size (i.e. apply
the same sizes to labels and input fields) in order to tame things
down.

line-height: 1;

Remember that you should omit the unit for line-height property values.
Here's one reference for that:

<http://www.456bereastreet.com/archive/200603/css_lineheight_does_not_need_a_unit/>

I also use a reset/base/fonts css (I prefer YUI) in order to
reset/normalize my global styles... That might also help you.

Hope that helps.

[/ot]

Cheers,
Micky

> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/django-users/-/-6G_bvvoyM0J.
> To post to this group, send email to django...@googlegroups.com.
> To unsubscribe from this group, send email to
> django-users...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/django-users?hl=en.
>

--
Micky Hulse
Web Content Editor
The Register-Guard
3500 Chad Drive
Eugene, OR 97408
Phone: (541) 338-2621
Fax: (541) 683-7631
Web: <http://www.registerguard.com>

[Micky Hulse]

P.S.

There's a great CSS listserv here:

<http://www.css-discuss.org/>

[Joshua Russo]

Thanks for the help, CSS is always my gremlin 

[Cal Leeming]

OP - let me know if you resolved your issue. If not, ill show you the standard way of doing it.

For the record - vertical align in some usages isnt going to work very nicely cross browser/versions.

[Cal Leeming [Simplicity Media Ltd]]

[Axel Bock]

Hah! I can answer something on a Django-list - oh joy :) .

Yes, indeed I have an idea. *inline-block* may be the css thing for you. 

A very nice example for that is here: http://www.brunildo.org/test/inline-block.html

Go to http://www.brunildo.org/ to have an overview over a lot of other stuff, quite helpful.

Greetings, 

Axel.

p.s.: does that mean I'm intelligent? ;)

[Cal Leeming [Simplicity Media Ltd]]

Sorry to be a party pooper, but inline-block is yet again another one of those big no-nos when it comes to cross browser/version.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[Micky Hulse]

Hi Cal,

On Mon, Aug 22, 2011 at 12:49 AM, Cal Leeming [Simplicity Media Ltd]
<cal.l...@simplicitymedialtd.co.uk> wrote:
> OP - let me know if you resolved your issue. If not, ill show you the
> standard way of doing it.

I have always considered vertical-align pretty standard. ;)

> For the record - vertical align in some usages isnt going to work very
> nicely cross browser/versions.

I get pretty good results for the major browsers plus IE going back to
version 6.

Demo:

<http://sandbox.hulse.me/vertical-align-test.html>

CSS/HTML tested via:

MAC:
Firefox 5.0.1, Safari 5.1, Opera 11.50, Chrome 13.0.x

PC:
Firefox 6.0, Firefox 5.0, Firefox 3.6.18, Safari 5.1, Opera 11.50,
Chrome 13.0.x,
IE 9.0.x, IE 8.0.x, IE 7.0.x, IE 6.0.x

Of course, that's just OS X and Vista/XP... I don't have an easy way
to quickly/directly test other platforms.

Cheers,
Micky

[Axel Bock]

well. inline-block is around since … at least 2007ish, and according to this table it _really_ should be no problem for a somewhat new browser. 

and I honestly think IE6&7 support is … not an option, given that ie8 is around since 2006!

*if* you have the written requirement … bad. if not, well, I'd go for it. 

of course the table might be wrong. that'd be bad, too :)

greets, 

axel.

[Cal Leeming [Simplicity Media Ltd]]

Really would advice against using inline-block - for same reasons as before.

Like anything though, CSS is another one of those things you have to sometimes learn the hard way... But the trick is, CSS/HTML shouldn't be hard, it should be one of those things that just rolls off the finger tips. 

Again, others may disagree.