Border outside of Form! - Webmaster Forum - Web Design, Programming and SEO forums

05-18-2008, 04:58 AM

Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:

Posts: 7

iTrader: 0 / 0%

Kevin_Creations is on a distinguished road

Border outside of Form!

Hello Everyone,

I am trying to have a border around my input text field box

Here is the site http://kevinkashou.com/test.html where I am having trouble with. I have a picture of what I am trying to do and the html portion is right after that. YOu can see what I am getting instead.

Code:

.border {
			width: 146px;
			height: auto;
			margin: 0px;
			padding: 2px;
			border: 1px solid #FFCC33;
		}
		
		.margin {
			width: 150px;
			height: auto;
			margin: 0px;
			padding: 0px;
			font-size: 10px;
			color: #999999;
		}

HTML Code:

HTML
<span class="border"><input type="text" class="margin" value="Type Here. . ." /></span>

05-18-2008, 01:34 PM

Status: Member
Join date: Nov 2007
Location: LakeDistrict, England
Expertise:
Software:

Posts: 279

iTrader: 3 / 100%

is on a distinguished road

Code:

         input[type="text"], textarea { border: 1px solid #FFCC33; }

05-18-2008, 03:01 PM

Kevin_Creations

Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:

Posts: 7

iTrader: 0 / 0%

Kevin_Creations is on a distinguished road

Ryan,

That code doesn't do anything.

05-18-2008, 08:11 PM

Status: Member
Join date: Nov 2007
Location: LakeDistrict, England
Expertise:
Software:

Posts: 279

iTrader: 3 / 100%

is on a distinguished road

try it now.

05-18-2008, 08:32 PM

painperdu

Status: Junior Member
Join date: May 2005
Location: Louisiana, USA
Expertise:
Software:

Posts: 37

iTrader: 0 / 0%

painperdu is on a distinguished road

The span tag can't be used as a box, it's strictly for inline items.

PHP Code:


			
.border {
            width: 146px;
            height: auto;
            margin: 0px;
            padding: 2px;
            border: 1px solid #FFCC33;
        }
        
        .margin {
            width: 150px;
            height: auto;
            margin: 0px;
            padding: 20px;
            font-size: 10px;
            color: #999999;
            background-color:#eaeaea;
        } 



<div class="margin"><input type="text" class="border" value="Type Here. . ." /></div>

05-18-2008, 10:42 PM

Kevin_Creations

Status: I'm new around here
Join date: Feb 2008
Location:
Expertise:
Software:

Posts: 7

iTrader: 0 / 0%

Kevin_Creations is on a distinguished road

I got it to work by adding display block in the border class.

Thank you all for you post!

05-19-2008, 03:53 AM

Kcool72

Status: Junior Member
Join date: May 2008
Location: Las Vegas, NV
Expertise:
Software:

Posts: 45

iTrader: 0 / 0%

Kcool72 is on a distinguished road

Nice!

05-23-2008, 06:35 AM

rochow

Status: Member
Join date: Oct 2006
Location: Australia
Expertise:
Software:

Posts: 297

iTrader: 4 / 100%

rochow is on a distinguished road

Easier way:

<input type="text" class="margin border" value="Type Here. . ." />

.border {border:1px solid #123456}

Originally Posted by 

Code:

         input[type="text"], textarea { border: 1px solid #FFCC33; }

What Ryan said is good, from memory it doesn't work in IE

(Feel free to correct me if I remember incorrectly)