CSS submit button problem

[cookie monster]

I'm seeing some odd behavior related to CSS and a form, and I'm
wondering if anyone has seen this before and whether they might have a
solution.

I have a small form that is displayed inside a table cell. The tags
are nested like this:

<form><td> ... form elements etc... </td></form>

There are no CSS styles applied to the body, table, table row, form,
or table cell. However, I have applied styles to the individual form
elements.

Specifically, I have applied the following style to the submit button:

.smallbutton {
border : 1px solid Black;
background-color : #CCCCCC;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : xx-small;
font-weight : bold;
}

What I have noticed is that any time I click inside the table cell,
the submit button's border goes from 1px to 2px. If I click outside
the table cell, it goes back to 1. This is only with IE 6.

I would really like to know why it happens and how to prevent it, if
possible. It sure seems weird.
cookie.

[Steve Fulton]

cookie monster wrote:

I'm seeing some odd behavior related to CSS and a form, and I'm
wondering if anyone has seen this before and whether they might have a
solution.

I have a small form that is displayed inside a table cell. The tags
are nested like this:

<form><td> ... form elements etc... </td></form>
Oh dear! If this is your actual markup, it's invalid. TR elements can
contain only TH and TD elements, not FORM elements. Of course, since
you didn't provide a URL, we don't know what your markup really looks
like, or if something you didn't share with us is the real cause of
the problem.
I would really like to know why it happens and how to prevent it, if
possible. It sure seems weird.

Without a URL, we can only go by the snippets (possibly incorrectly
transcribed) that you provided. Validate your HTML and your CSS.
Correct any errors discovered. If the problem persists, post a URL
to the actual page so we can examine your markup in situ.

--
Steve

If men could regard the events of their own lives with more open minds,
they would frequently discover that they did not really desire the
things they failed to obtain. -Emile Herzog

[cookie monster]

This is the HTML, very simple in the end:

<form action="test" method="post" name="testform" id="testform">
<table cellspacing="2" cellpadding="2" border="0" width="25%"
class="formtable">
<tr>
<td class="formHead" colspan="2">TESTFORM</td>
</tr>
<tr class="formline">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="classChange('mouseover',this)"
onMouseout="classChange('submit',this)"
onClick="classChange('click',this)"
tabindex="1" /></td>
</tr>
</table>
</form>
The CSS:

/* style for form submit buttons */
input.submit {
background-color: #FFFFFF;
border: 2px solid;
border-color:#199B37;
color : #199B37;
font-weight: bold;
font-family : Arial, Verdana, Helvetica, Sans-Serife;
font-size: 9pt;
text-align : center;
cursor:pointer;
}
Cheers,
Cookie
On Thu, 17 Mar 2005 07:23:56 -0500, "Steve Fulton"
<ce********@hotmail.com> wrote:

cookie monster wrote:

I'm seeing some odd behavior related to CSS and a form, and I'm
wondering if anyone has seen this before and whether they might have a
solution.

I have a small form that is displayed inside a table cell. The tags
are nested like this:

<form><td> ... form elements etc... </td></form>

Oh dear! If this is your actual markup, it's invalid. TR elements can
contain only TH and TD elements, not FORM elements. Of course, since
you didn't provide a URL, we don't know what your markup really looks
like, or if something you didn't share with us is the real cause of
the problem.

I would really like to know why it happens and how to prevent it, if
possible. It sure seems weird.

Without a URL, we can only go by the snippets (possibly incorrectly
transcribed) that you provided. Validate your HTML and your CSS.
Correct any errors discovered. If the problem persists, post a URL
to the actual page so we can examine your markup in situ.

[me]

"cookie monster" <no****@nowhere.com> wrote in message
news:n6********************************@4ax.com...

This is the HTML, very simple in the end:

<form action="test" method="post" name="testform" id="testform">
<table cellspacing="2" cellpadding="2" border="0" width="25%"
class="formtable">
<tr>
<td class="formHead" colspan="2">TESTFORM</td>
</tr>
<tr class="formline">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="classChange('mouseover',this)"
onMouseout="classChange('submit',this)"
onClick="classChange('click',this)"
tabindex="1" /></td>
</tr>
</table>
</form>
The CSS:

/* style for form submit buttons */
input.submit {
background-color: #FFFFFF;
border: 2px solid;
border-color:#199B37;
color : #199B37;
font-weight: bold;
font-family : Arial, Verdana, Helvetica, Sans-Serife;
font-size: 9pt;
text-align : center;
cursor:pointer;
}
Cheers,
Cookie

For starters the table is busted. Note: colspan=2 below:
Good Luck,
me

<form method="post" action="">
<table width="25%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">TESTFORM</td>
</tr>
<tr>
<td>button 1</td>
<td>
<input type="submit" name="ok1" value="ok1">
</td>
</tr>
</table>
</form>

[me]

"cookie monster" <no****@nowhere.com> wrote in message
news:n6********************************@4ax.com...

This is the HTML, very simple in the end:

<form action="test" method="post" name="testform" id="testform">
<table cellspacing="2" cellpadding="2" border="0" width="25%"
class="formtable">
<tr>
<td class="formHead" colspan="2">TESTFORM</td>
</tr>
<tr class="formline">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="classChange('mouseover',this)"
onMouseout="classChange('submit',this)"
onClick="classChange('click',this)"
tabindex="1" /></td>
</tr>
</table>
</form>
The CSS:

/* style for form submit buttons */
input.submit {
background-color: #FFFFFF;
border: 2px solid;
border-color:#199B37;
color : #199B37;
font-weight: bold;
font-family : Arial, Verdana, Helvetica, Sans-Serife;
font-size: 9pt;
text-align : center;
cursor:pointer;
}
Cheers,
Cookie

Note that style class names must start with a period. See below:
Good Luck,
me

<style type="text/css">
<!--
..submit { background-color: #FFFFFF; border-color: #199B37; border: 2px
#199B37 solid; font-family: Arial, Helvetica, sans-serif; font-weight: bold;
font-size: 9pt}
-->
</style>

[Jim Moe]

cookie monster wrote:

What I have noticed is that any time I click inside the table cell,
the submit button's border goes from 1px to 2px. If I click outside
the table cell, it goes back to 1. This is only with IE 6.

I would really like to know why it happens and how to prevent it, if
possible. It sure seems weird.

Without an URL it is difficult to say. My WAG is that windows/IE is
putting a border around the button to indicate that it is selected and has
focus. Make a small test case where the button is not surrounded by a
table so you can better see what's happening.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[David Dorward]

me wrote:

input.submit {

Note that style class names must start with a period. See below:
No, class names should avoid starting with a period, otherwise you have to
escape them in the style sheet, and that quickly gets messy.

In a style sheet, the class selector starts with a period character - but
the previous poster has done that. He simply combined the class selector
with a type selector which is perfectly allowable under the specification.
(Its worth avoiding since it adds slightly to the processing the browser
has to do, but its not a serious problem).
<style type="text/css">
<!--
Avoid this cargo cult. Its a waste of time and will cause problems with any
future migration to XHTML.
font-size: 9pt}

It would have been far more useful to pick up on this point though. Point
units are, as has been discussed many times in the history of this group
(and more in the ciwa.stylesheets sister group), entirely unsuitable for
use on screen.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[David Dorward]

me wrote:

<td class="formHead" colspan="2">TESTFORM</td>

For starters the table is busted. Note: colspan=2 below:

He already has colspan=2. Although that element should be a caption or at
least a table header cell rather then a table data cell.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[me]

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...

me wrote:

input.submit {

Note that style class names must start with a period. See below:
No, class names should avoid starting with a period, otherwise you have to
escape them in the style sheet, and that quickly gets messy.

In a style sheet, the class selector starts with a period character - but
the previous poster has done that. He simply combined the class selector
with a type selector which is perfectly allowable under the specification.
(Its worth avoiding since it adds slightly to the processing the browser
has to do, but its not a serious problem).

DW will not allow a custom class name to start with any character other than
a period. On page 258 of DW3 for Windows and Mac it states "class name must
start with a period".
<style type="text/css">
<!--

Avoid this cargo cult. Its a waste of time and will cause problems with

any future migration to XHTML.

The OP made no mention of needing XHTML.

font-size: 9pt}

It would have been far more useful to pick up on this point though. Point
units are, as has been discussed many times in the history of this group
(and more in the ciwa.stylesheets sister group), entirely unsuitable for
use on screen.

I didn't choose a fixed font size the OP did. As for using fixed font sizes
we must agree to disagree on this point. Personally I would have used
pixels to denote font size.

In closing I would ask why you made no attempt whatsoever to offer the OP
enlightenment regarding his query? Maybe the answer is because it's often
easier to criticize those who try to help rather than giving help yourself.
Signed,
me

[me]

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...

me wrote:

<td class="formHead" colspan="2">TESTFORM</td>

For starters the table is busted. Note: colspan=2 below:

He already has colspan=2. Although that element should be a caption or at
least a table header cell rather then a table data cell.

My bad, eyes failing, tiny text in news reader, etc etc etc.
Signed,
me

[David Dorward]

me wrote:

No, class names should avoid starting with a period, otherwise you have
to escape them in the style sheet, and that quickly gets messy.

DW will not allow a custom class name to start with any character other
than a period. On page 258 of DW3 for Windows and Mac it states "class
name must start with a period".
Then either Dreamweaver is _very_ broken, or what it calls "class name" is
really a class selector. I'm betting on the latter.

> <style type="text/css">
> <!--

Avoid this cargo cult. Its a waste of time and will cause problems with
any future migration to XHTML.

The OP made no mention of needing XHTML.

That doesn't make it wise to stick HTML comments in a style sheet.

> font-size: 9pt}

It would have been far more useful to pick up on this point though.

I didn't choose a fixed font size the OP did.
Did I say otherwise?
As for using fixed font sizes we must agree to disagree on this point.
Personally I would have used pixels to denote font size.
Pixels have their problems. Points have far more problems (all the problems
of pixels, with the addition of most systems interpeting them incorrectly).
Are you really disagreeing with the widely held assesment that points
(specifically points, not absolute units in general) are unsuitable?
In closing I would ask why you made no attempt whatsoever to offer the OP
enlightenment regarding his query?
He didn't a provide a URL. My Windows machine isn't plugged in at the
moment. The solution to his problem was non-obvious.
Maybe the answer is because it's often
easier to criticize those who try to help rather than giving help
yourself.

Correcting bad advice is help.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[me]

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...
[snip]

Can you answer the OP's questions?
Signed,
me

[David Dorward]

me wrote:

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...
[snip]

Can you answer the OP's questions?

Why are you obsessing over my ability to answer that question? It doesn't
alter the fact that the response you gave needed to be corrected.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[me]

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...

me wrote:

"David Dorward" <do*****@yahoo.com> wrote in message
news:d1*******************@news.demon.co.uk...
[snip]

Can you answer the OP's questions?

Why are you obsessing over my ability to answer that question? It doesn't
alter the fact that the response you gave needed to be corrected.

The answers to those and other questions must be non-obvious to you. Have a
nice day.
Signed,
me