up/down control with CSS?

Hi

I'm fairly new to CSS, so be gentle with me!

I'm trying to have an input box with a + and - image/button next to it
(can you imagine what I want to do with these buttons? . I want to
have the '+' button sitting directly above the '-' button. I've been
trying to play around with in-line divs, floated etc, with no luck.

Is this possible with CSS? I don't want to use a table unless all
hope with CSS is lost.

I'm developing on IE 6, but I want to target Firefox as well.

Regards,
Mark

MarkMc schreef:

Hi

I'm fairly new to CSS, so be gentle with me!

That's no fun

I'm trying to have an input box with a + and - image/button next to it
(can you imagine what I want to do with these buttons? .

Actually: no.

I want to
have the '+' button sitting directly above the '-' button. I've been
trying to play around with in-line divs, floated etc, with no luck.

Is this possible with CSS? I don't want to use a table unless all
hope with CSS is lost.

I'm developing on IE 6, but I want to target Firefox as well.

Maybe you'd better not develop for a specific browser(s)
but use a doctype, stick to the standards
and only when it's absolutely necessary use the occasional hack.

Regards,
Mark

Good luck

--
Rob

I'm trying to have an input box with a + and - image/button next to it
(can you imagine what I want to do with these buttons? .

Actually: no.

I basically want to make a numeric "control" that will increment its
value when clicking the '+', and decrement when the '-' is clicked.

Web standards: absolutely I'll strive to do it with web standards, but
so far in my (limited) experience with CSS (read a few 'practical'
books and played a bit on my personal web site), you pretty quickly
have to get in to browser hacks.

Any suggestions on how to get the buttons sitting on top of each
other, next to the text input?

Cheers,
Mark

MarkMc wrote:

Hi

I'm fairly new to CSS, so be gentle with me!

I'm trying to have an input box with a + and - image/button next to it
(can you imagine what I want to do with these buttons? . I want to
have the '+' button sitting directly above the '-' button. I've been
trying to play around with in-line divs, floated etc, with no luck.

Is this possible with CSS? I don't want to use a table unless all
hope with CSS is lost.

You could just use a single image depicting both buttons, and use a

client-side image map that divides it into two regions. If you have more
than one of these buttons on the page, they can share the same MAP element.

As an update for anybody else that's interested. I've found a way to
achieve what I want using CSS/web standards. The problem I had with
the image map is that it doesn't really cater very well for a user
changing the font size on his/her browser and such like, i.e. it's a
very static solution.

Anyway, here's the basic solution I've come up with - obviously, the
text "up" and "down" would be replaced with images. Have only tested
it with IE 6 so far though...

div.updown
{
display: inline;
width: 1.25em;
border: solid 1px black;
}
....
<div>
A value: <input type="text" id="upDown1" value="123.4" /><div
class="updown" id="d1"><div>up</div><div>dn</div></div>
</div>

Cheers,
Mark

MarkMc wrote:

As an update for anybody else that's interested. I've found a way to
achieve what I want using CSS/web standards. The problem I had with
the image map is that it doesn't really cater very well for a user
changing the font size on his/her browser

Even if you give it height: 1em?

and such like, i.e. it's a
very static solution.

Anyway, here's the basic solution I've come up with - obviously, the
text "up" and "down" would be replaced with images. Have only tested
it with IE 6 so far though...

div.updown
{
display: inline;
width: 1.25em;
border: solid 1px black;
}
...
div
A value: <input type="text" id="upDown1" value="123.4" /><div
class="updown" id="d1"><div>up</div><div>dn</div></div
/div

Cheers,
Mark