Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tiny CSS working via voodoo, please recommend correction

    This CSS does what I want and I don't understand why, while what I thought should work does not. That leads me to believe this is wrong:

    Code:
    <div style="padding-right: 10em;">
    	<input type="text" style="width: 100%" />
    	<div style="position: absolute;"></div>
    	<input type="button" style="position: absolute; width: 10em;" value="TEXT" />
    </div>
    I want a button of (width: X), and a textbox adjacent to it of (width: 100%-X). Please suggest the proper CSS.

    I understand "absolute" relates to the nearest positioned parent. However, I've slept on the problem and still don't see my error.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    As I understand it you want the button first and then the textbox?

    Try this:

    EDIT: no that was my fault, i forgot a ; and it didn't look as intended when I added it. i'll try something else.

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    If it is a button you want first and then the textbox next to it, then this seems to look the same on both IE and FF.

    Code:
    <div style="padding-right: 10em;">
    	<input type="button" style="width: 10em;" value="TEXT" />
    	<input type="text" style="width: 50%;" />
    </div>

  • #4
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Textbox first

    "As I understand it you want the button first and then the textbox?"

    The other way around...
    Code:
    [          textbox          ] [button]
    However, if I'm lucky I'll understand the solution well enough to do either.
    Last edited by artfultheory; 07-02-2007 at 02:50 PM. Reason: broke the quote

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Ah OK then.

    Try with this:

    Code:
    <div style="padding-right: 10em;">
    	<input type="text" style="width: 100% float: left;" />
    	<input type="button" style="position: absolute; width: 10em;" value="TEXT" />
    </div>
    I've added "float: left;" to the textbox.

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Jutlander. That works in Firefox, but not in IE (and sadly, IE is the primary target platform). The button is missing in IE. I assume ABSOLUTE shoved it some random place.

  • #7
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    It works here, strange.

    Delete the absolute positioning part. That should solve the problem, even though it displays well here.

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Without absolute, the button requires 10em of inline flow for placement, so it breaks to the following line.

  • #9
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ps: what IE version is it working on for you?

  • #10
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I've tested both in Firefox 2, Opera and IE 5.5, 6 and 7 and they look the same.

    I get a textbox and next to it the button, like this you posted:

    Code:
    [          textbox          ] [button]
    EDIT:

    Ahh, it is because a ; is missing after the value of width in the textbox.
    Last edited by Jutlander; 07-02-2007 at 06:32 PM. Reason: found out the problem

  • #11
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    OK, I hope I hit the nail this time then.

    Code:
    <div style="padding-right: 10em;">
    	<input type="text" style="width: 80%; float: left;" />
    	<input type="button" style="width: 10em;" value="TEXT" />
    </div>
    It works if you don't set the width of the textbox to 100%. (and i doublechecked for missing small letters this time.

  • #12
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, Jutland!

    The last sample you posted wraps the button to a new line if the window (or div the item is in) is sized less than about 800 px. That's the reason I want a textbox of width 100%-10em and adjacent button of width 10em. 10em is just an example, of course.

    I had noticed the missing semicolon in your sample, and tried it both "width and widthout" <grin>. Did you find that the sample really worked on IE6 as you thought? It didn't either way for me.

    Here's a solution that works for me, and I even understand why it works, but I'm not sure it's optimal. I'm going to run with it unless I hear otherwise.

    Code:
    <div style="padding-right: 60px;">
    	<input type="text" style="width: 100%; float: left;" />
    	<div style="float: left;">
    		<input type="button" style="width: 60px; position: absolute;value="TEXT" />
    	</div>
    </div>
    p.s. I moved from EM to PX because EM for an INPUT is crazy, and I'm tired of formatting this one dang control.

    mmm... Carmel corn sure sound good right now... seriously...
    Last edited by artfultheory; 07-03-2007 at 04:51 AM.

  • #13
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by artfultheory View Post
    Here's a solution that works for me, and I even understand why it works, but I'm not sure it's optimal. I'm going to run with it unless I hear otherwise.
    When I try your code in IE6 everything is fine except that I get a horizontal scrollbar that can be moved a couple of pixels.

    The problem is that you have set width: 100% for your text input field. But it generally has border and padding too and this adds to the overall width of the element. This means that it gets a bit wider than you really want it to be. At least in IE, Firefox and Opera, for the input[type="text"] element the overall width is equal to the sum: borders + paddings + width.

    Due to the nature of the CSS box model it may be a bit tricky to get a replaced element that has border/padding to fill the entire available width. Here is an example where the problem has been overcome by adding an extra wrapper having some padding for the input[type="text"] which is given corresponding negative margins plus a 100% width. Background colors are added for clarity. For some reason Opera 9 is ignoring the right margin in the text input element. I suspect that it is a bug. It should be working in IE6, IE7, and Firefox 2.

    Live example

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    	<head>
    		<title>CF117764</title>
    		<style type="text/css">
    		#green {
    			padding-right: 60px;
    			background: green;
    			height: 100px;
    		}
    		#yellow {
    			padding: 0 2px;
    			background: yellow;
    			height: 50px;
    		}
    		#one {
    			width: 100%;
    			margin: 0 -2px;
    			padding: 1px;
    			border: 1px solid black;
    		}
    		#two {
    			width: 60px;
    			margin-left: 2px;
    			margin-right: -62px;
    			position: relative; /* fixes IE6 clipping bug */
    		}
    		</style>
    	</head>
    	<body>
    		<div id="green">
    			<div id="yellow"><input id="one" type="text"><input id="two" type="button" value="TEXT" /></div>
    
    		</div>
    	</body>
    </html>

  • #14
    New Coder
    Join Date
    Jul 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Koyama, thanks for the sample. It works perfectly.
    I see why padding is important on #ONE, thank you.

    I'm a little uncomfortable maintaining the -62px +2px thing. As I went to put it in my actual code, which includes adding another button, I found myself scratching my head about the right way to position it.

    Since this has become one of those puzzles I can't put down, I'm going to try to take what you've taught me and implement it using ABSOLUTE. I may even try to get back to using EM, but the 4px pad on #ONE will make that messy.

    Here's my attempt. In IE, when the container (viewport) is an odd pixel width, the buttons are off by one pixel.

    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">
    <head>
    	<style type="text/css">
    		.clientSearchHeader { padding-right: 124px; position: relative; zoom: 1; }
    		.clientSearchHeader input.text { width: 100%; padding: 1px; margin-right: -4px; }
    		.clientSearchHeader div.buttons { width: 120px; position:absolute; right: 0; top: 0; }
    		.clientSearchHeader div.buttons input { width: 50%; }
    	</style>
    </head>
    <body>
    	<div class="clientSearchHeader">
    		<input class="text" type="text" />
    		<div class="buttons">
    			<input type="button" value="Search" /><input type="button" value="Create" />
    		</div>
    	</div>
    </body>
    </html>
    I also don't understand why I need the TOP: 0 in Firefox even when I put all the HTML on one line. It seems that sometimes the whitespace is relevant and sometimes it isn't. I broke the sample Koyama gave me by putting in a newline, but removing it here doesn't make a difference. I'm not even sure which of the CSS vs. HTML specs I'd find the answer in.
    Last edited by artfultheory; 07-04-2007 at 10:50 PM. Reason: Added ".clientSearchHeader { zoom: 1; } (thanks Koyama)


  •  

    Posting Permissions

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