• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

Overriding a style with another style

I have the following CSS to make my forms accessible...

form.defaultForm {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

form.defaultForm fieldset {
  width: 98%;
  clear: both;
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form.defaultForm fieldset legend {
      font-size:1.1em;
      font-weight: bold;
}

form.defaultForm label {
      display: block;  /* block float the labels to left column, set a width */
      float: left;
      width: 200px;
      padding: 0;
      margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
      text-align: right;
}

form.defaultForm input, form.defaultForm textarea, form.defaultForm select {
      /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
      width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form.defaultForm input#reset {
      margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

form.defaultForm small {
      display: block;
      margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
      padding: 1px 3px;
      font-size: 88%;
}

form.defaultForm .required{font-weight:bold;} /* uses class instead of div, more efficient */

form.defaultForm br {
      clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

.formValue {
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.input {
      background-color: white;
}

.inputreq {
      background-color: #FF3333;
}

This code was taken from this page... http://www.websiteoptimization.com/speed/tweak/forms/

This code works great, except that now I am trying to format a couple textboxes as horizontal, instead of only vertical.  I have tried to add this line to the CSS,

form.defaultForm label.horizontalLabel {
      text-align: right;       
}

and this to my HTML,

<label for="Qty" class="horizontalLabel">Qty:</label>

But when the page renders, it is still using the other label CSS instead of the horizontalLabel CSS.

What am I doing wrong here?

Thanks,
Drew
0
dr00bie
Asked:
dr00bie
  • 5
  • 5
1 Solution
 
ncooCommented:
form.defaultForm label.horizontalLabel {
      text-align: right !IMPORTANT;      
}
0
 
dr00bieAuthor Commented:
I tried the above, but it is still displaying the same as it was before...  besides I googled the !IMPORTANT command, and it seems that IE does not display it... This code is not for the web, so at the time being, all of my users are on IE.

Thanks,
Drew
0
 
ncooCommented:
The problem is both classes that control labels are doing the same thing, both do text-align:right;

What is the override class ment to do?

form.defaultForm label.horizontalLabel {
      text-align: right;      
}

form.defaultForm label {
      display: block;  /* block float the labels to left column, set a width */
      float: left;
      width: 200px;
      padding: 0;
      margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
      text-align: right;
}

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dr00bieAuthor Commented:
Thanks for the reply.

The main intent of this is to allow for horizontal display of labels and form elements.  In this instance, I am trying to provide 3 textboxes for parts, but they need to be horizontal.  The current CSS (that I got from the link in the orig. post) will not allow for this.  My HTML code for the form looks like this (disregard the ASP),

<form action="" method="post" name="form1" class="defaultForm">
      <fieldset>
      <legend>General</legend>
      <label for="NextDateToBeCompleted">Next Date Due:</label>
      <input name="NextDateToBeCompleted" type="text" id="NextDateToBeCompleted" value="<%=NextDateDue%>">
      <br>
      <label for="ClosedComments">Comments:</label>
      <input name="ClosedComments" type="text" id="ClosedComments" size="75" maxlength="250">
      <br>
      <label for="ClosedDate">Closed Date :</label>
      <input name="ClosedDate" type="text" id="ClosedDate" value="">
      <br>
      <label for=""CompletedBy"">Completed By :</label>
      <%
            'Code for label and dropdown for Employee list
            Response.Write("<select name=""CompletedBy"" id=""CompletedBy"">" & chr(10))
            Response.Write("<option value="""">-- Select One --</option>"& chr(10) & chr(10))
            'Loop through employee names and set value to selected employee
            For ListEmployee = 0 to ubound(arrBGEmployee, 2)
                  Response.Write("<option value=""" & arrBGEmployee(0,ListEmployee) & """")
                  Response.Write(">" & arrBGEmployee(4,ListEmployee) & ", " & arrBGEmployee(3,ListEmployee) & " - " & arrBGEmployee(2,ListEmployee) & "</option>" & chr(10) & chr(10))
            Next
            Response.Write("</select>")
            %>
      </fieldset>
      <fieldset>
      <legend>Parts</legend>
      <div id="divEqContainer">
            <div id="divParts">
                  <label for="PartDescription">Description:</label>
                  <input name="PartDescription" type="text" id="PartDescription" value="">
                  <label for="Qty" class="horizontalLabel">Qty:</label>
                  <input name="Qty" type="text" id="Qty" value="">
                  <label for="Cost" class="horizontalLabel">Cost:</label>
                  <input name="Cost" type="text" id="Cost" value="">
            </div>
      </div>
      <br>
      <label for="kludge2"></label>
      <a href="#" onClick="createDropdown('divParts');" class="formValue")>Add another Part</a><br>
      </fieldset>
      <br>
      <label for="kludge"></label>
      <input name="Submit" type="submit" id="Submit" value="Close Work Order">
      <input name="action" type="hidden" id="action" value="close">
      <input name="WorkOrderID" type="hidden" id="WorkOrderID" value="<%=Request.QueryString("WorkOrderID")%>">
      <input name="TaskID" type="hidden" id="TaskID" value="<%=Request.QueryString("TaskID")%>">
</form>

I have posted a screenshot of the rendered page at, http://www.swvtc.dmhmrsas.virginia.gov/CSSProb/problem.jpg

Thanks!
Drew
0
 
ncooCommented:
I get what you mean now, I worked on something similar just last week.


<form action="" method="post" name="form1" class="defaultForm">
     <fieldset>
      <legend>General</legend>
      <label for="NextDateToBeCompleted">Next Date Due:</label>
      <input name="NextDateToBeCompleted" type="text" id="NextDateToBeCompleted" value="<%=NextDateDue%>">
      <br>
      <label for="ClosedComments">Comments:</label>
      <input name="ClosedComments" type="text" id="ClosedComments" size="75" maxlength="250">
      <br>
      <label for="ClosedDate">Closed Date :</label>
      <input name="ClosedDate" type="text" id="ClosedDate" value="">
      <br>
      <label for=""CompletedBy"">Completed By :</label>
      <%
            'Code for label and dropdown for Employee list
            Response.Write("<select name=""CompletedBy"" id=""CompletedBy"">" & chr(10))
            Response.Write("<option value="""">-- Select One --</option>"& chr(10) & chr(10))
            'Loop through employee names and set value to selected employee
            For ListEmployee = 0 to ubound(arrBGEmployee, 2)
                  Response.Write("<option value=""" & arrBGEmployee(0,ListEmployee) & """")
                  Response.Write(">" & arrBGEmployee(4,ListEmployee) & ", " & arrBGEmployee(3,ListEmployee) & " - " & arrBGEmployee(2,ListEmployee) & "</option>" & chr(10) & chr(10))
            Next
            Response.Write("</select>")
            %>
      </fieldset>
      <fieldset>
      <legend>Parts</legend>
      <div id="divEqContainer">
            <div id="divParts">
                  <label for="PartDescription">Description:</label>
                  <div class="onelinelabel">
                  <input name="PartDescription" type="text" id="PartDescription" value="">
                  <label for="Qty">Qty:</label>
                  <input name="Qty" type="text" id="Qty" value="">
                  <label for="Cost">Cost:</label>
                  <input name="Cost" type="text" id="Cost" value="">
                  </div>
            </div>
      </div>
      <br>
      <label for="kludge2"></label>
      <a href="#" onClick="createDropdown('divParts');" class="formValue")>Add another Part</a><br>
      </fieldset>
      <br>
      <label for="kludge"></label>
<input name="WorkOrderID" type="hidden" id="WorkOrderID" value="<%=Request.QueryString("WorkOrderID")%>">
      <input name="TaskID" type="hidden" id="TaskID" value="<%=Request.QueryString("TaskID")%>">
</form>

The new CSS (add at the end of the style sheet):

div.onelinelabel label{
      width:auto;
      padding-left:5px;
      display:inline;
      float:none;
}

I've put a div (<div class="onelinelabel">) around the labels and inputs you want on the one line.
0
 
dr00bieAuthor Commented:
That is still showing up as it was... After some testing, I am assuming that the problem lies in the display: block line of the label style...

Thanks,
Drew
0
 
ncooCommented:
In Firefox and Internet explorer that shows the labels and input for Parts in one line as below:

Parts
Description:  [---] Qty:  [---] Cost:  [---]
Add another Part

[---] = input

Have you got any other CSS that could be causing the problem?
0
 
dr00bieAuthor Commented:
Probably so... but since I am very new to CSS, I am unsure where it might be... I just found that if delete the following lines,

display: block;  /* block float the labels to left column, set a width */
float: left;

from,

form.defaultForm label {
      display: block;
      float: left;
      width: 200px;
      padding: 0;
      margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
      text-align:right;      
}

Then it works, but it is not neatly formatted anymore...

Here is my CSS,

form.defaultForm {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

form.defaultForm fieldset {
  width: 98%;
  clear: both;
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form.defaultForm fieldset legend {
      font-size:1.1em;
      font-weight: bold;
}

div.onelinelabel label{
      width:auto;
      padding-left:5px;
      display:inline;
      float:none;
}

form.defaultForm label {
      display: block;  /* block float the labels to left column, set a width */
      float: left;
      width: 200px;
      padding: 0;
      margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
      text-align:right;      
}

form.defaultForm input, form.defaultForm textarea, form.defaultForm select {
      /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
      width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form.defaultForm input#reset {
      margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

form.defaultForm small {
      display: block;
      margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
      padding: 1px 3px;
      font-size: 88%;
}

form.defaultForm .required{font-weight:bold;} /* uses class instead of div, more efficient */

form.defaultForm br {
      clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

.formValue {
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.input {
      background-color: white;
}

.inputreq {
      background-color: #FF3333;
}

Thanks,
Drew
0
 
ncooCommented:
Here's the full HTML and CSS from my testing.

If you do a search for "<style" in the source code you will know if you've got more then one block of CSS or an external CSS file which might be the problem.

If you copy and paste the code below, that will work.

<html>
<head>
<style type="text/css">
form.defaultForm {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% verdana,arial,sans-serif;
  margin: 0;
  padding: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

form.defaultForm fieldset {
  width: 98%;
  clear: both;
  border-color: #000;
  border-width: 1px;
  border-style: solid;
  padding: 10px;        /* padding in fieldset support spotty in IE */
  margin: 0;
}

form.defaultForm fieldset legend {
      font-size:1.1em;
      font-weight: bold;
}

form.defaultForm label {
      display: block;  /* block float the labels to left column, set a width */
      float: left;
      width: 200px;
      padding: 0;
      margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
      text-align: right;
}

form.defaultForm input, form.defaultForm textarea, form.defaultForm select {
      /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
      width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

form.defaultForm input#reset {
      margin-left:0px; /* set margin-left back to zero on reset button (set above) */
}

form.defaultForm small {
      display: block;
      margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
      padding: 1px 3px;
      font-size: 88%;
}

form.defaultForm .required{font-weight:bold;} /* uses class instead of div, more efficient */

form.defaultForm br {
      clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

.formValue {
      margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.input {
      background-color: white;
}

.inputreq {
      background-color: #FF3333;
}

/*******************NEW CSS*************************/
div.onelinelabel label{
      width:auto;
      padding-left:5px;
      display:inline;
      float:none;
}
/****************END NEW CSS***********************/
</style>

</head>
<body>

<form action="" method="post" name="form1" class="defaultForm">
     <fieldset>
      <legend>General</legend>
      <label for="NextDateToBeCompleted">Next Date Due:</label>
      <input name="NextDateToBeCompleted" type="text" id="NextDateToBeCompleted" value="<%=NextDateDue%>">
      <br>
      <label for="ClosedComments">Comments:</label>
      <input name="ClosedComments" type="text" id="ClosedComments" size="75" maxlength="250">
      <br>
      <label for="ClosedDate">Closed Date :</label>
      <input name="ClosedDate" type="text" id="ClosedDate" value="">
      <br>
      <label for=""CompletedBy"">Completed By :</label>
      <%
            'Code for label and dropdown for Employee list
            Response.Write("<select name=""CompletedBy"" id=""CompletedBy"">" & chr(10))
            Response.Write("<option value="""">-- Select One --</option>"& chr(10) & chr(10))
            'Loop through employee names and set value to selected employee
            For ListEmployee = 0 to ubound(arrBGEmployee, 2)
                  Response.Write("<option value=""" & arrBGEmployee(0,ListEmployee) & """")
                  Response.Write(">" & arrBGEmployee(4,ListEmployee) & ", " & arrBGEmployee(3,ListEmployee) & " - " & arrBGEmployee(2,ListEmployee) & "</option>" & chr(10) & chr(10))
            Next
            Response.Write("</select>")
            %>
      </fieldset>
      <fieldset>
      <legend>Parts</legend>
      <div id="divEqContainer">
            <div id="divParts">
                  <label for="PartDescription">Description:</label>

<!--------------------------DIV INSERT IMPORTANT---------------------->
                  <div class="onelinelabel">
                  <input name="PartDescription" type="text" id="PartDescription" value="">
                  <label for="Qty">Qty:</label>
                  <input name="Qty" type="text" id="Qty" value="">
                  <label for="Cost">Cost:</label>
                  <input name="Cost" type="text" id="Cost" value="">
                  </div>
<!---------------------END OF DIV INSERT IMPORTANT-------------------->
            </div>
      </div>
      <br>
      <label for="kludge2"></label>
      <a href="#" onClick="createDropdown('divParts');" class="formValue")>Add another Part</a><br>
      </fieldset>
      <br>
      <label for="kludge"></label>
<input name="WorkOrderID" type="hidden" id="WorkOrderID" value="<%=Request.QueryString("WorkOrderID")%>">
      <input name="TaskID" type="hidden" id="TaskID" value="<%=Request.QueryString("TaskID")%>">
</form>

</body>

</html>
0
 
dr00bieAuthor Commented:
I am not sure what I did the first time... that took care of it right there!

Thanks,
Drew
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now