CSS Problem

[tektonnic]

Hi All,

The following code describes an input box on a form.

<tr>
<td valign="top" nowrap="nowrap">
 <?php echo htmlspecialchars($params->subjectlabel); ?> </td>
<td>
<input name="subject" type="text" class="inputbox" value="<?php echo
htmlspecialchars($params->subjecttext.' '.$title); ?>" size="70" maxlength="100" /></td>
</tr>

I am trying to add some css within this to add a border, where can I put it?

Cheers, Tek

 

[Mitthrawnuruodo]

You could just use a style tag on the element you want to have a border...

Let's say that is a td:

<td style="border: 1px solid black">...

 

[tektonnic]

<td style="border: 1px solid black">... Thats the one!

so if I do:

<td width=30 style="border: 1px solid black">

then that should make the width of that max of 30?

 

[Mitthrawnuruodo]

Take the width into the style, and remember to say if it's in px, em, ex or %.

<table style="border: 2px solid #99f; text-align: center;" cellspacing="0">
	<tr style="background: #f99;">
		<td style="border: 1px solid #CCC; width: 80px;">---1---</td>
		<td style="border: 1px solid #999; width: 50px; ">---2---</td>
	</tr>
	<tr style="background: #9f9;">
		<td style="border: 1px solid #666">---3---</td>
		<td style="border: 1px solid #333">---4---</td>
	</tr>
</table>
<br/>
<table style="" cellspacing="0">
	<tr style="">
		<td style="">---1---</td>
		<td style="">---2---</td>
		<td style="">---3---</td>
		<td style="">---4---</td>
	</tr>
	<tr style="background: #9f9;">
		<td style="border-left: 1px solid #333; border-top: 1px solid #333; border-bottom: 1px solid #333;">---5---</td>
		<td style="border-top: 1px solid #333; border-bottom: 1px solid #333;">---6---</td>
		<td style="border-top: 1px solid #333; border-bottom: 1px solid #333;">---7---</td>
		<td style="border-right: 1px solid #333; border-top: 1px solid #333; border-bottom: 1px solid #333;">---8---</td>
	</tr>
</table>

 

[tektonnic]

Hmmm, actually I don't think it looks right now, ta for your help though.

Is there a way of making it so input boxes have a border, I know in safari its default style is to do that but in ie and ff the input boxs arn't very visible, any ideas?

 

[Mitthrawnuruodo]

Same thing:

<input type="text" style="border: 2px solid #000">

But, as you say, this will not show up in any browser...

 

[tektonnic]

Absolute Basics, brilliant! Thanks for that.

 

[c-Row]

But, as you say, this will not show up in any browser...

It should work in all browsers (except for Safari).

 

[Mitthrawnuruodo]

It should work in all browsers (except for Safari).

Well - especially for the people here at MR - that isn't all browsers...

Also, be careful if you use the size attribute in an input tag, like <input type="text" size="20" ... />, that will not always render to the same width in all browsers... (MSIE, I'm looking at you.)

 

[c-Row]

Size settings within the style attribute seem to work fine most of the time, but the standard 'size' attribute is indeed a bit wishy-washy...

You can also change an input field's font using style settings, so they blend better with the rest of your website.

 

[mnkeybsness]

The size attribute is dependent on the browser's default settings and the operating system. Windows fonts are slightly different sizes than Mac fonts and so when it is figuring out the size, it will estimate based on the font that it has available.

A more precise way of defining the size is to define:

input.yourElement { width: 100px; }