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.
13  13052 
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
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="formtabl e">
<tr>
<td class="formHead " colspan="2">TES TFORM</td>
</tr>
<tr class="formline ">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="cl assChange('mous eover',this)"
onMouseout="cla ssChange('submi t',this)"
onClick="classC hange('click',t his)"
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********@hot mail.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.
"cookie monster" <no****@nowhere .com> wrote in message
news:n6******** *************** *********@4ax.c om... 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="formtabl e">
<tr>
<td class="formHead " colspan="2">TES TFORM</td>
</tr>
<tr class="formline ">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="cl assChange('mous eover',this)"
onMouseout="cla ssChange('submi t',this)"
onClick="classC hange('click',t his)"
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">TES TFORM</td>
</tr>
<tr>
<td>button 1</td>
<td>
<input type="submit" name="ok1" value="ok1">
</td>
</tr>
</table>
</form>
"cookie monster" <no****@nowhere .com> wrote in message
news:n6******** *************** *********@4ax.c om... 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="formtabl e">
<tr>
<td class="formHead " colspan="2">TES TFORM</td>
</tr>
<tr class="formline ">
<td>button 1</td>
<td><input type="submit" name="ok1" value="ok1"
class="submit"
onMouseover="cl assChange('mous eover',this)"
onMouseout="cla ssChange('submi t',this)"
onClick="classC hange('click',t his)"
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>
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)
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.stylesheet s 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
me wrote: <td class="formHead " colspan="2">TES TFORM</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
"David Dorward" <do*****@yahoo. com> wrote in message
news:d1******** ***********@new s.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.stylesheet s 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
"David Dorward" <do*****@yahoo. com> wrote in message
news:d1******** ***********@new s.demon.co.uk.. . me wrote:
<td class="formHead " colspan="2">TES TFORM</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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Matt |
last post by:
I want to understand the difference between submit button and regular
button: <input type="submit"> and <input type="button">. My understanding is
that submit button will send the entire HTML form to the web server, but
regular button won't.
I have a problem that needs to pass HTML elements data back and forth in
several ASP pages. I am using regular button to do that. But what's the
approaches??
Please advise. Thanks!
|
by: M Smith |
last post by:
I have a form I want to submit to itself. I want to be able to type in a
list of numbers and submit the form and have that list show up on the same
form under the text box I typed them into and the buttons. The problem is
when I post a form to itself, the Enter key will not submit the form, it
only clears the contents of the text box. The only way I can submit is to
click the submit button. Here is a simplified version of my code that I...
|
by: CJM |
last post by:
Can somebody clarify if/how/when a simple form is submitted when the <Enter>
key is pressed?
As I understood it, if you have a form with a single submit button, if enter
is pressed, the form should be submitted as if the button is pressed. Is
this correct?
Does this behaviour vary across browsers?
Chris
|
by: Margaret Werdermann |
last post by:
Hi all:
I'm having a nasty time with a particularly difficult piece of code
and was hoping someone might be able to help me. I have a FormMail
form that originally worked perfectly.
Then, I had to add a JavaScript function to the Submit button to make
a server function run when the form was submitted. Unfortunately,
this JavaScript wouldn't run when the button was designated as a
Submit, so I changed the button and placed a...
|
by: JR |
last post by:
Hi. I hope someone out there who is more versed with JavaScript than
I can help me with the following annoying problem. Here's the
problem.
I have a form with the following layout:
Column A Column B Column C
data 4 radio buttons more data
.... ... ...
.... ... ...
| | |
by: rjames.clarke |
last post by:
I have the following.
$result=mysql_query($sql);
$nrows=mysql_num_rows($result);
for ($i=0;$i<$nrows;$i++)
{
$row_array=mysql_fetch_row($result);
echo "<form name='testform' action='ins_op.php' method='post'>";
lots of form stuff
|
by: Jeff |
last post by:
I have a payment form with a submit button. A large percentage of users
double-click the submit button thus submitting their payment information
twice. I would like to use javascript to disable the submit button once
it's been clicked, yet still have the form submit. I can do this in ASP
2.0, however, ASP.Net seems to be adversely affected if you disable the
submit button. Here's how I have it set up...
The submit button is a...
|
by: B Ekre |
last post by:
In VS 2005 I have a WebForm with 3 UserControls on it. One UserControl
implements the new ICallbackEventHandler to update a DIV based on user input.
The other two implement a <asp:repeater ...> bound to a PagedDataSource.
The repeaters have associated <asp:linkbutton ...> to page forward and back
in the OnClick event. Clicking either link at run-time causes the following
error "Microsoft JScript runtime error: Object doesn't support this...
|
by: kj |
last post by:
Is there a simple way to decouple the value attribute of a submit
button from the text that actually gets displayed on it? In
principle, what I'm looking for is something like
<input type="submit"
name="submitted_via"
value="some string meaningless to the user"
label="Submit Request" />
such that the browser would use the content of the imaginary
|
by: Petr Vileta \(fidokomik\) |
last post by:
I have a form with few text inputs. Every text input is followed by image type
input. In this form I want to have 1 submit button on the top. A problem I want
to resolve is: when user type something into text input and press enter then I
want to submit form by image type button but not by submit button. I tried to
use tabindex parameter but this not work as I expect.
Any idea?
Code example:...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
