CSS - Problem With Select Box On Form

i have a style sheet which says form should have no margin/paddings at all..

now the problem is that i have a form and i use:
<form style="margin-top:12em; padding-top:12em;" >

however if i use a value of anything <12 it doesnt move down one tiny bit, for 12em it will move down a bit (about 2em) and if i set it to 14 then it will move down more (about 5em).

the form in question has an image & a hidden field. which have margin:0, padding0 applied to them, but my GUESS is it doesnt matter what they have because i am telling form to move down so all elements within it should move down as well but still be margin:0 etc? or am i reading/thinking it wrong?

I dont understand why form at the following address take blockquote's background.
http://refinethetaste.com/html/cp/?Section=stats&Process=ViewStats


Code:
Code:

        <form action="" method="post">
            <fieldset class="width50">
                <div class="row">
                    <label for="DateRange">Date Range</label>
                    <select name="DateRange" class="width50">

                        <option value="Today" selected="selected">Today</option>
                        <option value="Yesterday">Yesterday</option>
                        <option value="Last24Hours">Last 24 Hours</option>
                        <option value="Last7Days">Last 7 Days</option>
                        <option value="Last30Days">Last 30 Days</option>
                        <option value="ThisMonth">This Month</option>

                        <option value="LastMonth">Last Month</option>
                        <option value="AllTime">All Time</option>
                    </select>
                </div>
            </fieldset>
            <fieldset class="width50">
            	<input type="submit" value="Go" class="button" />
            </fieldset>

    	</form>       
               
                
        <blockquote>
            <p>
                <div id="placeholder" style="width:100%;height:300px"></div>
            </p>
	
<script>
	$(function () {
	// a null signifies separate line segments
	var d1 = [[1,38],[2,132],[3,41],[4,3],[5,291],[6,62],[7,31],[8,33],[9,125],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0],[16,0],[17,0],[18,0],[19,0],[20,0],[21,0],[22,0],[23,0],[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0],[31,0],];
	
	$.plot($("#placeholder"), [d1]);
	});
</script>
        
        </blockquote>

Hello,
I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE.

If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below.
I hope someone can help me make sense of this.



Code:

form{
   display:block;
   width:566px;
   margin:0px;
   padding:0px;
        }


#form_table{
   border-style:solid;
   border-color:black;
   border-width:thin;
   border-spacing:0px;
   border-collapse: collapse;
   float:right;
   width:564px;
   margin:0px 0px 50px 0px;
   padding:0px;
        }


#form_table thead tr{
   color:white;
   text-align:left;
    background-color:#1B1B1B;
    border:solid black thin;
        }


#form_table tbody tr td{
   float:right;
   display:block;
        }


#country_list{
   list-style-type:none;
   margin:0px;
   padding:5px 0px 0px 0px;
        }


.td_spacer{
   display:block;
   margin:0px;
   padding:10px 0px 0px 0px;
        }


.input{
   width:300px;
        }


#message_box{
   width:558px;
   height:286px;
        }

Code:

<form name="jobs" action="php/rtProcessor.php" method="post">
        <table id="form_table" summary="post form">
         <thead>
          <tr>
           <th><span class="">Post</span></th>
          </tr>
         </thead>
         <tbody>
          <tr>
           <td style="float:left;">
            <ul id="country_list">
            <li id="china"><input type="radio" name="color" value="red" />red</li>
          <li id="japan"><input type="radio" name="color" value="green" />green</li>
          <li id="korea"><input type="radio" name="color" value="blue" />blue</li>
          <li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
             <li id="other"><input type="radio" name="color"  value="Other" />Other</li>
          </ul>
           </td>
           <td class="td_spacer">
            <label for="companyname">Company Name:</label>
            <input type="text" id="companyname" name="companyname" class="input" />
           </td>
           <td class="td_spacer">
            <label for="email">E-Mail Address:</label>
            <input type="text" id="email" name="email" class="input" />
           </td>
           <td class="td_spacer">
            <label for="subject">Subject:</label>
            <input type="text" id="subject" name="subject" class="input" />
           </td>
          </tr>
         <tr>
          <td>
           <label for="message">Listing:</label>
           <textarea id="message_box" name="message" rows="16" cols="67"></textarea>
          </td>
         </tr>      
              <tr>
          <td>
           <label for="hii">1+1 is?</label>
            <input type="text" id="hii" name="hii" class="input" />
          </td>
         </tr>
         <tr>
           <td>
            <input type="submit" value="Submit" name="submit" />
           </td>
          </tr>
         </tbody>
        </table>
       </form>

Hello every one, thanks for your help before hand,

I have validating my own website, so far so good, but I have this problem. I can not figure out why is not validating, the problem lies on this second line of code: <input type="hidden" name="cfgId" value="1" />

So part of the form looks like this:

<form action="/cgi-bin/ssecure/ssecure.pl" method="post" enctype="multipart/form-data">
<input type="hidden" name="cfgId" value="1" />

The Error message for validation says this:

Validation Output: 1 Error
Line 152, Column 49: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<input type="hidden" name="cfgId" value="1" / >


<input type="hidden" name="cfgId" value="1" / >

The last haracter ">" of this last line are in RED. Then it says:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


------------------------------------------------------------------------

The question, what is that I am doing wrong?

Thanks,

Dear all,
A very strange css problem when applying styles to the form tag.

This page, when viewed in FF or Safari, has odd red background colouring the central directory items. It is caused by the lower form tag. If I remove the lower form tag, the problem disappears, but I don't want to remove the lower form tag!

Can anyone (dev)shed any light on this? Looks fine in IE, and it validates fine.

Many thanks

Hello,

I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox.

Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser

linklighthouse.com/dropdown_ie.html

How do I fix this problem in IE? Please help!

Thanks

Hi all,

I cannot figure why last two form inputs at the following website appears wrong near the end.

I also included a screenshot.

http://www.refinethetaste.com/yk/addproject.asp

hi

my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability)

form
{
margin: 0px;
padding: 0px;
}
.mydiv
{
float: left;
}

html looks vaguely like:

<div class="mydiv"><form name="blah" action="blahblah">
.... all form controls
</form></div>

PROBLEM!!!!

in mozilla, none of the form elements display.
in ie, everything displays as expected.

PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE.

thanks in advance.
d

Hi, does anyone know the CSS to change the font and background colour on a select box. My code doesn't work and ive tried without luck searching the net for the solution. This must be really simple.




Hydroderm

hi guys, newbie here.

first of all I am no master in HTML or CSS, my main background are non-web, but I've been thrown in at my work to help with this problem they have had for a while, I've progressed it further than most have, but right now I am stuck.

I've been handed a half done task and asked to fix it, obviously some of you may know the problems of trying to fix other peoples problems but I hope you can do it for me. More or less, what I have is a stylesheet to help output invoice data, all of the data is being output correctly, apart from the one table in the invoice which has multiple records to go into it

For example;

QUANTITY
-----------
2
3
4

etc.

What I am currently getting, is the code is pulling all the records, and displaying them in the one cell of the table, getting

QUANTITY
----------
234

I need some way to split it up, I'll show you the code I have.

ORIGINAL CODE I WAS GIVEN
Code:

  <xsl:for-each select="key('DATA',C[6])"> 
  <tr class="style16">
    <td class="style16"> <xsl:value-of select="C[27]"/></td>
    <td class="style16"> <xsl:value-of select="C[28]"/></td>
    <td class="style16"> <xsl:value-of select="C[29]"/></td>
    <td class="style16"> <xsl:value-of select="C[30]"/></td>
    <td class="style16"> <xsl:value-of select="C[31]"/></td>
    <td class="style16"> <xsl:value-of select="C[32]"/></td>
    <td class="style16"> <xsl:value-of select="C[33]"/></td>
    <td class="style16"> <xsl:value-of select="C[34]"/></td>
    <td class="style16"> <xsl:value-of select="C[35]"/></td>
  </tr>

I've seen made it more consise
Code:

  <xsl:for-each select="key('DATA',C[6])"> 
  <tr class="style16">
    <xsl:for-each select="C[position() >= 27 and position() <= 35]"> 
      <td class="style16"> <xsl:value-of select="."/></td>
    </xsl:for-each>
  </tr>

does anyone have any ideas as to how I can take the seperate records from the database, and output them into rows each?

Apoligies if this is vague...

how can a ouline be drawn around a select /dropdown box?
i tried the following code n it dint seem to work.Any other solution for drawing a border/outline around select box.
<select name="sample" style="font-size:9px;font-face:verdana;width:130px;margin-left: 2cm;border: 2px solid red">

Hello,

I am trying to style my form inputs, textareas and selects as follows:


input, select, textarea {
border: solid 6px #ECF0F9;
color: #252525;
font: normal 0.75em Verdana, Geneva, sans-serif;
padding: 0.25em;
width: 520px;
}


I am having a few problems:


Firefox 3:


1. The select is narrow than the inputs and textareas;
2. When I click the select the dropdown borders look different ...
some are thinner than others.


IE 7:


1. The select is narrow than the inputs and textareas;
2. The border of the select is not changed.


What am I doing wrong and how can I make the appearance of a Select
look the same across various browsers?

Can I do this with JQuery?

Thanks,
Miguel

Why <select> tag ignores my CSS settings for border color, instead it renders XP default?

I have external CSS file and I assign specific class to <select tag> wich contains:
border: 1px solid #545454;

it works well on all form fields except <select>.
Help?

Hi am looking for help changing a form select box with css.

I am trying to get the select box in line with the rest of the scroll boxes and arrows on my site....

http://www.peteromoore.com/site3/brochure.htm

is there any way to change the select box arrow to match the arrow beside it???
any help would be appreciated.

Hi all, I've got a drop down box (select box) inside an element in a table. How can I get the width of the drop down to expand to fill the size of the table element?

i.e. I have:

| <DROP DOWN> |

but want

| < DROP DOWN > |

Also, is it possible to change the height of a drop down?

Thanks,
John.