?

Log in

No account? Create an account
CSS question! - I know it's wonky and I don't care [entries|archive|friends|userinfo]
Kake

[ website | My Website ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| Randomness Guide to London | Open Guide to Cambridge | Snake Soup | KakeFlickr ]

CSS question! [Apr. 2nd, 2007|04:15 pm]
Kake
[Tags|, ]

I have this page: Editing form. I want the boxes at the very bottom, for username/comment/edit-type, to line up with each other regardless of how big the text is. Screenshot of the problem. Mockup of a simplified form showing the same problem, and its stylesheet.

Can anyone help?Solved thanks to babysimon!

(Nothing on the morerandomness site is live data; feel free to mess with it.)
LinkReply

Comments:
[User Picture]From: babysimon
2007-04-02 03:56 pm (UTC)
I think it's hard. The trouble is you need equal-height columns which is notoriously hard in CSS - this page suggests a technique, but then providesa more caveats than I could be bothered to read.

I would grit my teeth and use a table.
(Reply) (Thread)
[User Picture]From: nou
2007-04-02 04:09 pm (UTC)
Thanks, reading those now.

Unfortunately I can't use a table because the HTML needs to cater for people who don't want to have those fields all on one line, as well.
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-04-02 04:57 pm (UTC)
Ooh, but linked in the comments on that article: display: table.

Certainly looks better than the original in Firefox. I haven't got IE to see how badly that breaks though.
(Reply) (Parent) (Thread)
[User Picture]From: babysimon
2007-04-02 05:11 pm (UTC)
Completely, AFAIK.

Sorry.
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-04-02 05:14 pm (UTC)
OK, but there's "completely" and then there's "completely". I don't care if it doesn't look exactly the same; I do care if it makes the page seven million pixels high, or if it makes things overlap other things annoyingly. If it places the divs one after each other, and it's still usable, then that's OK.
(Reply) (Parent) (Thread)
[User Picture]From: babysimon
2007-04-02 06:35 pm (UTC)
According to the wacky world of IE6-on-Debian it ignores the CSS completely and just flows the divs one after the other.
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-04-02 07:33 pm (UTC)
I think I can live with that. mirrorshard made me a screenshot, which doesn't look too obviously vile.

Thanks for the pointer!
(Reply) (Parent) (Thread)
From: rik
2007-04-02 04:53 pm (UTC)
I would make a table analogy with divs, then get frustrated with CSS and make a table with no borders. I'm fairly sure it can be done with just divs though.
(Reply) (Thread)
[User Picture]From: nou
2007-04-02 04:58 pm (UTC)
I really can't do it with a table because the purpose of the exercise is to create something that can be CSSed into many different layouts.

I think I found a reasonable-ish solution; see comment to Simon.
(Reply) (Parent) (Thread)
[User Picture]From: 2shortplanks
2007-04-03 12:59 pm (UTC)
Since you're a mac user I will recommend CSSEdit at you. It's a CSS editor that has a live 'based on safari' preview pane so you can be editing CSS on a live site on the web (the local CSS overrides the original CSS you download over the web) and see right there and then if you've screwed it up. It also has an inspector type thing that can be used to set all the supported CSS stuff by clicking buttons so you can click wildly until you get the effect you want.

It's shareware, but doesn't seem to expire.
(Reply) (Thread)
[User Picture]From: nou
2007-04-05 04:09 pm (UTC)
Thanks for this. I've been playing with it a bit. I think it might take some getting used to, but I'll persist.

The thing I'm finding hardest with all this CSS stuff at the moment is working out which colours to use. I can tell when the overall colour scheme isn't going together quite right, but I can't figure out how to improve it.
(Reply) (Parent) (Thread)
[User Picture]From: 2shortplanks
2007-04-06 09:40 am (UTC)
There are numerous tools on the web that can create colour schemes. A few are in my bookmarks
(Reply) (Parent) (Thread)
[User Picture]From: nou
2007-04-25 05:56 pm (UTC)
I forgot to say thanks for this. I had no idea such things existed!

I could still do with being able to figure out subtle problems, like "this is too overwhelming, so reduce the saturation", that sort of thing. I think that might require the acquisition of some level of skill, however.
(Reply) (Parent) (Thread)