Jump to content


styling forms


6 replies to this topic

#1 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 03 March 2006 - 03:12 PM

regular inputs are no problem. but when i use <input type="file" /> thats when i get problems. just look here
http://scudworkz.com...ite/submit.html
i cant remove the border and i cant make the submit button move any further to the right, any help?


edit,
you can only see the problem in firefox

Edited by coolaid, 03 March 2006 - 03:13 PM.


#2 greg

    Jedi In Training

  • Members
  • PipPip
  • 499 posts
  • Location:New York City
  • Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 03 March 2006 - 04:44 PM

Can you post the relevant code?

#3 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 03 March 2006 - 07:04 PM

oh right.. well...
here's the input field "file".

<form>
  <table>
	<tr>
	  <td>Location:</td><td><input type="file" name="file" class="browse" /></td>
	</tr>
  </table>
</form>

and here's the css
.browse{
  width:280px;
  height:24px;
  background:url("layout_images/submit_input_bg.gif") no-repeat;
  padding:0;
  border:0;
}


#4 greg

    Jedi In Training

  • Members
  • PipPip
  • 499 posts
  • Location:New York City
  • Interests:Fine art, web and graphic design, naval architecture, chess, and sports.

Posted 04 March 2006 - 04:43 AM

What is type="file" supposed to do? Also, there shouldn't be any quotation marks in url().

#5 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 04 March 2006 - 11:55 AM

just check the link
http://scudworkz.com...ite/submit.html

it makes a browse input file.

comm on man, i know what im doin (most of the time).
http://jigsaw.w3.org/css-validator/validat...&usermedium=all
not even a warning, its perfectly fine. double quotes/single quotes/ no quotes is all good.

#6 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 04 March 2006 - 12:19 PM

strange bug, Im guessing you're talking about the black top+left border around your location input box and the background continuing even under the browse button?
Well for the background I found that if you switch your .border in your css to width: 145 that fixes that problem (in firefox anyways I dont have the web-dev toolbar in the other browsers to see) but Im not exactly sure what to do about the black border.
If worse comes to worse, just take out class="border" attribute and just have that part of the form "unstyleized" it still looks pretty good. :huh:

Edit: I just found this article perhaps it would be of more assistance.

Edited by raenef, 04 March 2006 - 12:23 PM.


#7 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 05 March 2006 - 01:48 AM

yep, that happened to be zactly waht i was lookin for ;) thanks





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users