margin/padding of submit button with CSS

A

Andreas Emmert

Hi NG,

I have a submit button on my form with the class "button", i.e.

<input type=button class=button value=XXXX>

The class is currently defined as

..button
{
border: solid 1px #787878;
background-color: #022e72;
color: #f0f0f0;
font-weight: bold;
font-family : arial;
}

The current submit button has spaces on each side, i.e. looks like "
XXXX ". Is there a way to remove/reduce the spaces on either side to
have a button like "XXXX"? I've tried the styles "padding" and "margin" and
set both of them to 0px;
However, those settings won't produce the desired result. padding-left,
padding-right, margin-left and margin-right don't either.

Can anyone help me out here?

cheerio
 
P

picayunish

Andreas Emmert wrote in news:[email protected]:
Hi NG,

I have a submit button on my form with the class "button", i.e.

<input type=button class=button value=XXXX>

The class is currently defined as

.button
{
border: solid 1px #787878;
background-color: #022e72;
color: #f0f0f0;
font-weight: bold;
font-family : arial;
}

The current submit button has spaces on each side, i.e. looks like "
XXXX ". Is there a way to remove/reduce the spaces on either side to
have a button like "XXXX"? I've tried the styles "padding" and "margin"
and set both of them to 0px;
However, those settings won't produce the desired result. padding-left,
padding-right, margin-left and margin-right don't either.

Can anyone help me out here?
Click to expand...

What kind of browser do you have?.

Edwin van der Vaart (Geen familie van....)
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://members.chello.nl/e.vandervaart/ Experimental site
 
S

SeeSchloss

Le 28/09/2003, "Andreas Emmert" a écrit cet amas de lettres
:
Hi NG,

I have a submit button on my form with the class "button", i.e.

<input type=button class=button value=XXXX>

The class is currently defined as

.button
{
border: solid 1px #787878;
background-color: #022e72;
color: #f0f0f0;
font-weight: bold;
font-family : arial;
}

The current submit button has spaces on each side, i.e. looks
like " XXXX ". Is there a way to remove/reduce the spaces on
either side to have a button like "XXXX"? I've tried the styles
"padding" and "margin" and set both of them to 0px;
However, those settings won't produce the desired result.
padding-left, padding-right, margin-left and margin-right don't
either.
Click to expand...

It should. What's is exactly the desired result ?
 
P

picayunish

picayunish wrote in news:vmGdb.7442$P51.16184@amstwist00:
Andreas Emmert wrote in news:[email protected]:

What kind of browser do you have?.
Click to expand...

It seems like that IE adds padding-left and padding-right (1px) when
specify the padding-left and padding-right 0px.
The other browsers e.g. Firebird, NS and Opera works perfectly.
 
A

Andreas Emmert

What kind of browser do you have?.
I'm using MSIE 6. And yes it works fine with NN7 and Operat, however with
MSIE 6 the css settings padding-left and padding-right do not work. My class
looks like this:

..button
{
border: solid 1px #787878;
background-color: #022e72;
color: #f0f0f0;
font-weight: bold;
font-family : arial;
padding-left: 0px;
padding-right: 0px;
}

So, something's different with MSIE ;)
 
A

Andreas Emmert

The desired result is to have a button with either 0px or 10 px padding to
the left and right
 
M

Mark Nobles

Andreas Emmert said:
I'm using MSIE 6. And yes it works fine with NN7 and Operat, however with
MSIE 6 the css settings padding-left and padding-right do not work. My class
looks like this:

.button
{
border: solid 1px #787878;
background-color: #022e72;
color: #f0f0f0;
font-weight: bold;
font-family : arial;
padding-left: 0px;
padding-right: 0px;
}

So, something's different with MSIE ;)
Click to expand...

Isn't it always?
What is your DOCTYPE?
 
A

Andreas Emmert

Mark,

I've tried all three regular Doctypes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Whenever I specify a doctype I get horizontal scroll bars in MSIE, but not
for the other browser. Only if I do not specify any doctype the horizontal
scrollbars disappear. But, this is not really the problem. The problem I'm
having is that no matter whether or not a doctype is specified MSIE keeps
(in addition to the paddings defined in the stylesheet) an additional margin
(left and right) on the button of approx. 20-30 px. How can I make MSIE
display the button with the padding-width I specify in the stylesheet?
 
M

Mark Parnell

Sometime around Tue, 30 Sep 2003 07:39:06 +0200, Andreas Emmert is reported
to have stated:
Whenever I specify a doctype I get horizontal scroll bars in MSIE, but not
for the other browser. Only if I do not specify any doctype the horizontal
scrollbars disappear.
Click to expand...

You have discovered the joys of "doctype switching". You have triggered
IE's so-called "standards compliant" mode.
But, this is not really the problem. The problem I'm
having is that no matter whether or not a doctype is specified MSIE keeps
(in addition to the paddings defined in the stylesheet) an additional margin
(left and right) on the button of approx. 20-30 px. How can I make MSIE
display the button with the padding-width I specify in the stylesheet?
Click to expand...

IE's box model is broken, but it doesn't sound like that is really the
issue here. I think at this point a URI is needed.
 
M

Mark Parnell

Sometime around Tue, 30 Sep 2003 12:14:16 +0200, Andreas Emmert is reported
to have stated:
Here's the URI:

http://www.designserver.de/test/anfrage_bestellung.php
http://www.designserver.de/test/css/master.css

I've exported the two files from the original directory as the site's still
under construction, so the menu's missing, but it should suffice for looking
at the button problem.
Click to expand...

It took me a while to figure out where the buttons actually were - they
don't look like buttons.

Having just reread your original post, I realised that I was looking at the
problem the wrong way. I now understand what you were asking :).
Unfortunately, that's just the way that IE decides to display buttons -
there is nothing in the specs to say how a button should be displayed.
AFAIK there is no way to get around that, other than using an image for the
button. http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html is a good
place to start if that is the way you want to go.

You should put a Doctype (Strict if this is a new page) back into your
pages and validate your HTML (and CSS).

BTW: Could you please also stop posting upside-down:
http://www.allmyfaqs.com/faq.pl?How_to_post
 
A

Andreas Emmert

Mark Parnell said:
Sometime around Tue, 30 Sep 2003 12:14:16 +0200, Andreas Emmert is reported
to have stated:


It took me a while to figure out where the buttons actually were - they
don't look like buttons.

Having just reread your original post, I realised that I was looking at the
problem the wrong way. I now understand what you were asking :).
Unfortunately, that's just the way that IE decides to display buttons -
there is nothing in the specs to say how a button should be displayed.
AFAIK there is no way to get around that, other than using an image for the
button. http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html is a good
place to start if that is the way you want to go.

You should put a Doctype (Strict if this is a new page) back into your
pages and validate your HTML (and CSS).

BTW: Could you please also stop posting upside-down:
http://www.allmyfaqs.com/faq.pl?How_to_post
Click to expand...

Aye, will add the doctype again and agreed, I'll stop posting upside-down ;)
It's just my mail client which adds my signature at the top of the post and
makes me writing at the top, but that's no problem :)

I'll stick with the buttons, wouldn't want to increase loading times by
using imagebuttons. But thanks anyway, I guess my question's been answered.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Working on mobile css menu with plenty of frustration! 2
Positioning CSS components 1
How to position the *tooltip* comment on these buttons? 9
<Button ...> display is fine, except for two things 1
Help me sort out this script 1
Login button code 8
Help with Visual Lightbox: Scripts 2

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 228

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top