form button margin

[moocow]

Hi.

I am using a background image in a form button. The problem I am
having is that there is a 1 pixel margin inside the button on all
sides.

I would like my background image to fill the inside of the button from
button border to button border, and not stop 1 pixel shy of that.

I have tried:
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;

This does nothing.

Also:
margin-top:-1; margin-left:-1; margin-right:-1; margin-bottom:-1;

This does get rid of the margin, but it also gets rid of the button
border.

This is what I'm using and it mostly works...the only problem is the 1
pixel buffer inside the button:

..fbutton1 {
text-align:middle; vertical-align:top;
font-family:Arial,Verdana; font-size:11px; font-weight:bold;
color:#000000;
background-image: url(../images/button_fill1.jpg);
border-top:#EFF4F9; border-bottom:#62707D; border-left:#EFF4F9;
border-right:#62707D;
border-top-width:1px; border-left-width:1px; border-right-width:1px;
border-bottom-width:1px;
border-style:solid;
padding-top:0px; padding-left:0px; padding-right:0px;
padding-bottom:0px;
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
}

Thanks.

[Brian]

moocow wrote:

I am using a background image in a form button. The problem I am
having is that there is a 1 pixel margin inside the button on all
sides.
If the space is inside the border, then it's padding you're seeing.
I would like my background image to fill the inside of the button from
button border to button border, and not stop 1 pixel shy of that.
..fbutton1 {
padding: 0;
}

should work. It may be a browser issue. In any case, _as always_, we
need a url to help you.
This is what I'm using
Whoa! You got a whole lotta code there. Are you sure you want to
change the appearance of a form widget that much? Might be bad for
usability. If you do, at least consider simplifying a bit, and correct
the mistakes in design that you should have known about if you lurked
in ciwas for some time.
font-family:Arial,Verdana; font-size:11px;
No! Don't set font-size in px!
font-weight:bold;
color:#000000;
If you set a color, then set a background color, too.
border-top:#EFF4F9; border-bottom:#62707D; border-left:#EFF4F9;
border-right:#62707D;
border-top-color: #EFF4FF9; /* etc. */
border-top-width:1px; border-left-width:1px; border-right-width:1px;
border-bottom-width:1px;
/* simplify */
border-width: 1px;
padding-top:0px; padding-left:0px; padding-right:0px;
padding-bottom:0px;
/* simplify */
padding: 0;
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;

/* simplify */
margin: 0;

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[moocow]

On Wed, 07 Jul 2004 18:00:45 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:

.fbutton1 {
padding: 0;
}
Yes, it's padding that doesn't seem to want to go away. I have tried
your suggesstion and also form {padding:0} with no luck.
should work. It may be a browser issue. In any case, _as always_, we
need a url to help you.
The browser is the latest 6.x IE. I can't post the URL, but if you
think you can help, I can email you the one HTML and CSS file.
Are you sure you want to change the appearance of a form widget
that much?
Yes, I am absolutely positive. I am trying to get the forrm buttons to
look like all the other non-form buttons on the site. With out
resorting to images

If you do, at least consider simplifying a bit, and correct

the mistakes in design that you should have known about if you lurked
in ciwas for some time.

I've only just arrived!
Whoa!
The "proper syntax" changes you suggested I should do.

Things like specifying the left, right, top and bottom margins
individually instead of just margin:0 was done intentionally
because this is a "skin", and I am making it easier for users
to customize the settings.
No! Don't set font-size in px!

Why not?!? Ok, pt instead...

Thanks for your input! I'll make those syntax correction. Now
if I can just get rid of the padding.

-me-

[moocow]

Hmm. I found the answer.

Oddly enough, using this:

background:url(../images/button_fill1.jpg);

instead of this:

background-image: url(../images/button_fill1.jpg);

Eliminates the 1 pixel padding on the inside of the button. I'm
not sure why that is.

-me-

[moocow]

Actually, it didn't work, it just pretended to. :(
On Wed, 07 Jul 2004 19:35:50 -0400, moocow <no****@nospam.net> wrote:

Hmm. I found the answer.

Oddly enough, using this:

background:url(../images/button_fill1.jpg);

instead of this:

background-image: url(../images/button_fill1.jpg);

Eliminates the 1 pixel padding on the inside of the button. I'm
not sure why that is.

-me-

[moocow]

I have noticed that this 1 pixel padding on the inside of the
form button does not show up in Mozilla Firefox .8.

[Brian]

moocow wrote:

Brian wrote:

In any case, _as always_, we need a url to help you.
I can't post the URL, but if you think you can help,

I don't know if I'll have the answer or not. I'd have to see a test
case first.
I can email you the one HTML and CSS file.
No thanks. I don't have the time to download and test such things. We
need a url, since we have to see it in its natural habitat. An
isolated file may hide other issues.
I am trying to get the forrm buttons to look like all the other
non-form buttons on the site.
Won't that just confuse visitors? Wouldn't they want to be able to
distinguish between a form control and, uh, hang on, what do you mean,
"non-form buttons"? What do those buttons do?

correct the mistakes in design that you should have known about
if you lurked in ciwas for some time.

I've only just arrived!

That was sort of my point. You might have learned about the problem
with pixel sized fonts or color without background color if you had
read the group for a bit. Instead, I'm generating more noise
explaining it to you.
Things like specifying the left, right, top and bottom margins
individually instead of just margin:0 was done intentionally
because this is a "skin", and I am making it easier for users to
customize the settings.
Is this, finally, a www.authoring question? Or something else?

No! Don't set font-size in px!

Why not?!?

Your preferred font-size is not the same as my preferred size, or the
preferred size of someone else. If you set it in px, MSIE/Win users
will be unable to resize the text to something they find more
comfortable, unless they disable your stylesheet completely. I imagine
that's not what you want. Mozilla and Opera are better: they let one
resize text even when it's set in px. But why should they have to?
Leave the font size for main body text unset, and users get what's
configured in their browser.
Ok, pt instead...

That's at least as bad.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[moocow]

Won't that just confuse visitors? Wouldn't they want to be able to
distinguish between a form control and, uh, hang on, what do you mean,
"non-form buttons"? What do those buttons do?
No, they don't need to distinguish.

In this case, "non-form" buttons are just linked button images.
That was sort of my point. You might have learned about the problem
with pixel sized fonts or color without background color if you had
read the group for a bit. Instead, I'm generating more noise
explaining it to you.
I think that was a choice of your own free will.
Is this, finally, a www.authoring question? Or something else?
No, I have no www.authoring related questions.
Your preferred font-size is not the same as my preferred size, or the

Yes, but sometimes fonts need to be set and stay set...

[Brian]

moocow wrote:

No, I have no www.authoring related questions.

I guess it's safe to ignore you, then. Thanks for being honest.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Thu, 08 Jul 2004 00:59:37 -0400, moocow <no****@nospam.net> wrote:

Your preferred font-size is not the same as my preferred size, or the

Yes, but sometimes fonts need to be set and stay set...

On the web they never will whatever you do. Different screen resolutions,
etc. cause the font to be different no matter what.

Might as well work with that. Use % to indicate font size. 100% is what
the user prefers to read, if the user set anything. If not, it's what the
user is accustomed to. So don't go too far below that.

px, whether it's legible or not to the user is anyone's guess. I thought
you wanted people to read your content?

[moocow]

>On the web they never will whatever you do. Different screen resolutions,

etc. cause the font to be different no matter what.

I agree with all that. But...

This is not a public site, it's an internal web app with known
browsers, users and pre-existing standards.

[Neal]

On Thu, 08 Jul 2004 04:10:57 -0400, moocow <no****@nospam.net> wrote:

On the web they never will whatever you do. Different screen
resolutions,
etc. cause the font to be different no matter what.

I agree with all that. But...

This is not a public site, it's an internal web app with known
browsers, users and pre-existing standards.

Right. This isn't an intranet newsgroup either, though.

[moocow]

On Thu, 08 Jul 2004 05:18:45 -0400, Neal <ne*****@yahoo.com> wrote:

Right. This isn't an intranet newsgroup either, though.

I appreciate your input on fonts, but how I might remove a stubborn 1
pixel of padding in a form button in IE using CSS when the standard
ways are not working...was the posted query.

I was not really interested in talking in circles or posturing.

If this is not the place to find out how I might remove a stubborn 1
pixel of padding in a form button in IE using CSS when the standard
ways are not working...then I have made an error.

[Els]

moocow wrote:

On Thu, 08 Jul 2004 05:18:45 -0400, Neal
<ne*****@yahoo.com> wrote:

Right. This isn't an intranet newsgroup either, though.

I appreciate your input on fonts, but how I might remove a
stubborn 1 pixel of padding in a form button in IE using
CSS when the standard ways are not working...was the posted
query.

I was not really interested in talking in circles or
posturing.

If this is not the place to find out how I might remove a
stubborn 1 pixel of padding in a form button in IE using
CSS when the standard ways are not working...then I have
made an error.

Without a url it is very difficult for people to see where 1
pixel comes from. I for one, usually copy the complete code of
a page locally, and fiddle with the CSS to see where something
went wrong. Without a url, I can't do this.

Only thing I can imagine from what I read of your posts,
because you're saying Firefox doesn't have the problem, is
that it is the difference between calculating widths of
elements with or without including borders/margins.
Some browsers include it, others don't.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[moocow]

On 8 Jul 2004 09:52:40 GMT, Els <el*********@tiscali.nl> wrote:

Without a url it is very difficult for people to see where 1
pixel comes from. I for one, usually copy the complete code of
a page locally, and fiddle with the CSS to see where something
went wrong. Without a url, I can't do this.

Only thing I can imagine from what I read of your posts,
because you're saying Firefox doesn't have the problem, is
that it is the difference between calculating widths of
elements with or without including borders/margins.
Some browsers include it, others don't.

I'd like to give you a URL, but can't, so I understand why it's hard
to help.

I used TopStyle and went through all the CSS1 and CSS2 parameters for
spacing and padding that might work for a form button. It's a nice app
to immediately see what effect your settings have. But no luck in
elminating that pixel.

I think I can live with that one pixel until I come across a work
around for it.

Thanks.

[Andrew Thompson]

On Thu, 08 Jul 2004 06:45:13 -0400, moocow wrote:

I'd like to give you a URL, but can't,

Why not, exactly?

For what reason can you not bring up the page
in IE (whatever) 'Save As' complete.. and upload
the files to a cheap web site.

[ I realize the question above may sound sarcastic,
but I am honestly curious whether it occured to the
folks at your end, and if so, what the hitch is.. ]

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Brian]

moocow wrote:

I appreciate your input on fonts, but how I might remove a stubborn
1 pixel of padding in a form button in IE using CSS when the
standard ways are not working...was the posted query.
Indeed. Unfortunately for you, it was posted in the wrong group. In
the *.www.authoring* groups, we discuss authoring for the www. I'd
have overlooked it, but you did not follow the conventions of the
group (lurk before posting, read the faq, read the archives, etc). So
as far as I'm concerned, it's off-topic, take it to a more appropriate
group.
If this is not the place to find out how I might remove a stubborn
1 pixel of padding in a form button in IE using CSS when the
standard ways are not working...then I have made an error.

Indeed you did make an error.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Thu, 08 Jul 2004 12:12:46 GMT, Andrew Thompson <Se********@www.invalid>
wrote:

On Thu, 08 Jul 2004 06:45:13 -0400, moocow wrote:

I'd like to give you a URL, but can't,

Why not, exactly?

For what reason can you not bring up the page
in IE (whatever) 'Save As' complete.. and upload
the files to a cheap web site.

.... after, of course, altering all the content so as not to publish
proprietary info.

[moocow]

On Thu, 08 Jul 2004 12:12:46 GMT, Andrew Thompson
<Se********@www.invalid> wrote:

Why not, exactly?

For what reason can you not bring up the page
in IE (whatever) 'Save As' complete.. and upload
the files to a cheap web site.

The site is on an intranet, so that's why a URL won't work.

I hadn't thought of that--uploading the page to a cheapo ISP
account...

http://209.123.115.33/test/test.html

There are two sets of buttons, form buttons and regular linked image
buttons.

I have set the background color of the form buttons to red, so that
the 1 pixel border is easy to see.

And as metioned before, this border shows in IE, but not in Firefox.

Thanks.

[Claire Tucker]

On Thu, 08 Jul 2004 16:17:29 -0400, moocow <no****@nospam.net> wrote:

On Thu, 08 Jul 2004 12:12:46 GMT, Andrew Thompson
<Se********@www.invalid> wrote:

http://209.123.115.33/test/test.html

There are two sets of buttons, form buttons and regular linked image
buttons.

I have set the background color of the form buttons to red, so that
the 1 pixel border is easy to see.

And as metioned before, this border shows in IE, but not in Firefox.

It might also interest you to know that Opera (6.06) doesn't style the
button at all: no image, no border, not even background color!

My main point, though, is that browser support for styling form
widgets is shakey; other than Mozilla, most of the browsers use
buttons which aren't described by CSS but instead just hard-coded to
look like the local UI to some extent. IE is a little more flexible,
but the limitations are still there.

As a final note, maybe you could pick a neutral blue as the background
color and set that same blue as a one-pixel border on the links? They
wouldn't look quite like you imagined, but at least they'd all look
the same (in IE) and I don't think anyone would really notice one
pixel of non-gradient and think "that looks really weird!".

Good luck,
-Claire

[moocow]

On Fri, 09 Jul 2004 00:26:06 GMT, Claire Tucker <fa**@invalid.com>
wrote:

It might also interest you to know that Opera (6.06) doesn't style the
button at all: no image, no border, not even background color!
Point taken. I have tried to layout the site so that it degrades
well in terms of certain elements not being styled correctly. Tables,
rows and columns should adjust accordingly. I'll have to test more to
see just how well it works.
As a final note, maybe you could pick a neutral blue as the background
color and set that same blue as a one-pixel border on the links? They

That is my current work-around and you're right, not many people
would notice, and I'm willing to pretend I don't notice. ;)

Thanks.

[Andrew Thompson]

On Thu, 08 Jul 2004 16:17:29 -0400, moocow wrote:

http://209.123.115.33/test/test.html

There are two sets of buttons, form buttons and regular linked image
buttons.

I have set the background color of the form buttons to red, so that
the 1 pixel border is easy to see.

And as metioned before, this border shows in IE, but not in Firefox.

Aha! Well.. ..errrm.

Here's where it starts..
<http://validator.w3.org/check?uri=http://209.123.115.33/test/test.html>
If the structure is not valid, all bets are off
as to how the UA will render the combined HTML/CSS

Then there is the stylesheet itself..
<http://jigsaw.w3.org/css-validator/validator?uri=http://209.123.115.33/test/test.css>
seems to have a few problems..

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[moocow]

On Fri, 09 Jul 2004 03:48:50 GMT, Andrew Thompson
<Se********@www.invalid> wrote:

Here's where it starts..
<http://validator.w3.org/check?uri=http://209.123.115.33/test/test.html>
If the structure is not valid, all bets are off
as to how the UA will render the combined HTML/CSS

Then there is the stylesheet itself..
<http://jigsaw.w3.org/css-validator/validator?uri=http://209.123.115.33/test/test.css>
seems to have a few problems..

Thanks, I will make use of those links.