SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trouble with a border around a textbox

    Hi,

    I am trying to put a red border around a textbox. The css I used on the <span class="border"> surrounding the textbox is this:
    Code:
    .border{
    	padding: 2px;
    	margin: 0px;
    	background-color: red;
    }
    That works in IE6 but not in FF1.0. In FF1.0, I only get a red border on the left and right of the textbox--there isn't a red border on the top or bottom. I eliminated all the html that isn't relevant to this question in the markup below, but I left all the css in case it was relevant:
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    <head>
    <title>html and javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    <!-- 
    body{
    	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;
    }
    table{
    	border-collapse: collapse;
    }
    tr td{
    	padding:0px;
    	margin:0px;
    	border-bottom:4px solid rgb(253,200,204); 
    }
    thead tr td{
    	font-weight: bold;
    }
    .form{
    	background-color: rgb(253,200,204);
    	width: 250px;
    	padding: 10px 10px 10px 30px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: small;
    	border: 1px black solid;
    } 
    #itm_title{
    	width:150px;
    	padding-left: 3px;
    	padding-bottom: 4px;
    }
    #price_title{
    	width: 50px;
    	padding-right: 5px;
    }
    .submit{
    	padding-top: 10px;
    }
    .total{
    	font-weight: bold;
    	padding-right: 5px;
    }
    .charges{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: small;
    }
    .border{
    	padding: 2px;
    	margin: 0px;
    	background-color: red;
    }
    
    -->
    </style>
    </head>
    <body>
    
    <form name="f" method="post" action="">
    
    <div class="form">
    	<div>&nbsp;</div>
    	<div>
    		<span class="border"><input class="charges" type="text" size="5" id="charges" name="charges"/></span>
    		<span>some text</span>
    	</div>
    </div>
    
    </form>
    
    </body>
    </html>
    Also, should I be replacing vertical spacing using:

    <div>&nbsp;</div>

    with some css?

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Maybe I am missing the point, but can you just add a border property to the charges selector?

    Code:
    .charges{
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: small;
     	border: 2px solid #ff0000;
     }

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use the border attribute for borders, rather than background and padding.
    If you only want the border to apply to text boxes (as opposed to all form elements) you'll probably need to use a class that you apply to all the text boxes.

    CSS
    Code:
     .text {border: 1px solid red;}
    Then you're HTML would look like this
    Code:
     <input type='text' name='foo' class='text' />
    In regards to the vertical spacing, technically I think you should be using either padding or margins to move the content around (as its a display issue, not a content issue), but across a whole site this might not be practicle.
    IMO using <div>&nbsp;</div> the way you have isn't the end of the world.

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responses.

    I thought I tried putting a border property in the .charges class, and it didn't work. But, I can see now that it does. The only thing I don't like about the result is that it replaces the 3d look of the text box. After I read your posts, I tried using a border-style of 'inset' and 'outset' but it doesn't look right. I liked the effect of my background/padding method in IE. I remember trying to put a border around the surrounding <span> but nothing was displayed, so I think the textbox coverd it.

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Glad it was of some help, sorry not exactly what you we're after. You could also try using an image for the input field if you can get the effect you want graphically vs with CSS.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone explain the following result. In IE, it works as I would expect: since the <span> and the containg <div> have the same width, the <div>'s border perfectly surrounds the box created by the <span>'s background color. However, in FF1.0, the <div>'s border forms a box that is about twice as wide as the box formed by the <span>'s background color.
    Code:
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" 
      xml:lang="en" lang="en">
    <head>
    <title>html and javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    <!-- 
    .s{
    	background-color: red;
    	width: 100px;
    	
    }
    .d{
    	border:2px solid black;
    	width:100px;
    	
    }
    -->
    </style>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    
    
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div class="d"><span class="s">some text</span></div>
    
    
    </body>
    </html>

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry not exactly what you we're after
    Well, in a form the textboxes have a 3d shading to their borders by default. When you specify a solid border using css, the 3d border is replaced by a solid red border. The way I did the border with the background color and padding of the surrounding <span>, it preserved the 3d border on the textbox, and put a stripe of red around the whole.

  8. #8
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand how FF1.0 renders elements. I have a textbox inside a <span> with a background color set for the <span>. In IE, when I change the height of the textbox, the surrounding span collapses or expands with the height of the textbox. However, in FF1.0, the span has a constant height, and when I change the height of the textbox, the span does not stretch or collapse. But, when I try to change the height of the <span> nothing happens either. I also tried to change the width of the <span> and nothing happens.

    Code:
    .charges{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: small;
    	height: 30px;
    	/*
    	border: 2px solid red;
    	*/
    
    }
    
    .border{
    	padding: 5px;
    	margin: 0px;
    	background-color: red;
    	
    }

  9. #9
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Table solution...It is so easy to do with a table, and it works in both IE and FF. Can't css replicate the effect below?
    Code:
    <body>
    
    <form name="f" method="post" action="">
    
    <div class="form">
    	<div>&nbsp;</div>
    	<table >
    	<tr>
    		<td style="padding:0px; margin:0px; border:2px solid red;">
    			<input class="charges" type="text" size="5" id="charges" name="charges"/></td>
    		<td style="border:0px; padding-left:5px">some text</td>
    	</tr>
    	</table>
    </div>
    
    </form>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •