CSS alignment - Dev Shed

Dev Shed Forums Sponsor:

April 13th, 2004, 10:04 AM

dante2010

Contributing User

Join Date: Feb 2002

Posts: 599

Time spent in forums: 2 Days 3 h 46 m 49 sec
Reputation Power: 7

CSS alignment

HI,

I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows:

Code:

.row {
  height: 30px;
  vertical-align: text-top;
}

.formField {
  border: 1px solid #666;
  width: 150px;
  background: #FFFFFF;
  color: #000000;
}


<body>

   <div class="row">
   xxxxx: <input type="text" class="formField">
   </div>
 
</body>

The textbox is sitting just above the text. How can I get them lined up properly?

April 13th, 2004, 10:22 AM

ChiefWigs1982

Cunning Linguist

Dev Shed God 10th Plane (9500 - 9999 posts)

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 9,909

Folding Points: 50746 Folding Title: Beginner Folder

Time spent in forums: 3 Months 2 Weeks 5 Days 21 h 19 m 32 sec
Reputation Power: 853

I don't think you can with just css...
Works with tables though...

Code:

<table>
<tr>
<td>XXXXX: <input type="text" class="formField"></td>
</tr>
</table>

__________________

Support requests via PM will be ignored!
Sites: Route of Queue | Sinthetic - Alternative UK Hiphop
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

Sign up with Matched.co.uk and earn up to £15 per website every month!

April 13th, 2004, 11:08 AM

dante2010

Contributing User

Join Date: Feb 2002

Posts: 599

Time spent in forums: 2 Days 3 h 46 m 49 sec
Reputation Power: 7

Gotta be a way. If not then I can laugh in the face of all the CSS zealots out there.

April 13th, 2004, 09:59 PM

skycast

Registered User

Join Date: Apr 2004

Posts: 7

Time spent in forums: < 1 sec
Reputation Power: 0

reducing hieght of a textbox

Hi, I was wondering if there were a way of reducing the height of a textbox in a form field? height="?" does nothing.

Thanks in advance,

Tom

April 14th, 2004, 02:28 AM

dustyreagan

Contributing User

Join Date: Oct 2003

Location: Austin

Posts: 126

Time spent in forums: 4 h 40 m 3 sec
Reputation Power: 5

The easiest solution to your problem could be solved like this.

PHP Code:


		
			
.formField {

  border: 1px solid #666;

  width: 150px;

  background: #FFFFFF;

  color: #000000;

  position:relative;

  top:2px;

}



<body>

xxxxx: <input type="text" class="formField">

</body>

Hope this was helpful.

skycast:
You can change the height of textbox using css.
Try putting style="height:45px;" into the tags of your textbox.

__________________
DustyReagan.com

April 14th, 2004, 02:29 AM

ChiefWigs1982

Cunning Linguist

Join Date: Jul 2003

Location: I used to live at home, now I stay at the house

Posts: 9,909

Time spent in forums: 3 Months 2 Weeks 5 Days 21 h 19 m 32 sec
Reputation Power: 853

This works...

Code:

<html>
<body>
<form>
<input type="text" style="width:100px; height:15px; font-size:8px;" />
</form>
</body>
</html>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: