www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Float issues

  1. #1
    Join Date
    Aug 2007
    Location
    London
    Posts
    410

    resolved [RESOLVED] Float issues

    Hi (or however one starts these things),

    I've been trying to 'style' the input (text) tags in an HTML form.
    This has been successful by doing the following:
    HTML Code:
    <span class='inputleft'>
         <input class='input_styled' type='text' />
         <a class='inputright'></a>
    </span>
    CSS
    Code:
    input.input_styled {
    	background:url(/library/images/input_middle.png) repeat-x top left;
    	float: left;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	height: 16px;
    }
    span.inputleft {
    	padding-left: 5px;
    	height: auto;
    	width: auto;
            float:left;
    	background: url(/library/images/input_left.png) no-repeat 0px 0px;
    }
    a.inputright {
    	height: auto;
    	width: auto;
    	background: url(/library/images/input_right.png) no-repeat top right;
    	padding-left: 11px;
    	padding-top: 18px;
    	float: left;
    	cursor: pointer;
    }
    ...This works, by the way.

    What is annoying, however, is that I don't want the parent <span> (inputleft) to be floated because that could, potentially, interfere with my page layout. Nor do I want to have to put dividers (which clear:all) in appropriate places since the styling et cetera is done with javascript to normal input tags.

    When I remove the "float:left" property from the parent <span> tag, I can no longer see its background image anymore, which makes the whole effect pointless. I don't understand why it does this because it still has the padding-left value, which should (surely!) push the <input> element 5px to the right and make the thing visible again, no?

    Any help would be much appreciated.

  2. #2
    Join Date
    Aug 2007
    Location
    London
    Posts
    410

    Smile

    I appear to have fixed it by removing the width and height attributes. I assume having width & height as "auto" it made it the right width to contain the input and anchor tags.
    I don't know why the left padding wasn't working but it seems that everything is now solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles