31 users online (1 members and 30 guests)  


  Results 1 to 3 of 3
  1. #1
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    set "width" in a label ...

    Can I set a width on a label?
    If so, what am I doing wrong?
    The fieldset label:hover works, and I've tried setting widths on label and on fieldset label with no joy.
    Any clues, please?
    Code:
    h1 {
    	font-family: verdana, arial, geneva, sans-serif;
    	font-size: 2em;
    	text-align: center;
    	color: #808080;
    	padding-bottom: 0.2em;
    }
    
    legend:hover {
    	background-color: #dddddd;
    	cursor: default;
    }
    
    fieldset label {
    	width: 10em;
    	text-align: right;
    	height: 1.3em;
    	padding: 0.1em;
    }
    
    fieldset label:hover {
    	background-color: #dddddd;
    	cursor: default;
    }
    
    .submit {
    	position: absolute;
    	right: 2em;
    	margin-top: -1.5em;
    }
    
    .return a, .return a:visited {
    	position: fixed;
    	bottom: 8px;
    	right: 8px;
    	text-decoration: none;
    	text-align: center;
    	color: black;
    	background-color: #dddddd;
    	border-top: 1px solid #f8f8f8;
    	border-left: 1px solid #f8f8f8;
    	border-right: 1px solid #444444;
    	border-bottom: 1px solid #444444;
    	margin: 0.5em 0.1em;
    	padding: 0.2em;
    }
    
    .return a:hover {
    	background-color: #bbbbbb;
    	border-top: 1px solid #444444;
    	border-left: 1px solid #444444;
    	border-right: 1px solid #f8f8f8;
    	border-bottom: 1px solid #f8f8f8;
    }
    
    .callclass {
    	margin-top: 2px;
    	border: 1px solid #dddddd;
    	padding: 1px;
    	width: 20em;
    	text-align: center;
    }

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: set "width" in a label ...


    Hi there DeadMeatGF,

    the label element is an inline element and therefore cannot have a width value.
    To overcome this it is necessary to either use display:block or float:left, as in this example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>applying width to a label</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    * {
        margin:0;
        padding:0;
     }
    body {
        margin:10px;
     }
    fieldset {
        width:330px;  
        padding:10px;  
        border: 1px solid #000;
        margin: auto;
     }
    label {
        width:195px;
        line-height:23px;
        padding-left:5px;
        margin:5px;
        border: 1px solid #000;
        float:left;
        background-color:#eef;
        color:#003;
    }
    input {
        width:100px;
        height:23px;
        margin:5px;
        border: 1px solid #000;
        font-size:16px;
        text-align:center;
        float:right;
    }
    #clear {
        clear:both;
     }
    -->
    </style>
    
    </head>
    <body>
    
    <form action="#">
    <fieldset>
    <legend>a form</legend>
    <label>surname:-</label><input type="text" value="head"/>
    <label>first name:-</label><input type="text" value="coot"/>
    <div id="clear"></div>
    </fieldset>
    </form>
    
    </body>
    </html>
    I hope that this will help .

  3. #3
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

    Re: set "width" in a label ...

    Thanks Coothead
    That's twice you've fixed what was essentially the same problem but on different elements for me
    I'll have to write Inline Elements on my wall in very big letters