...

View Full Version : Tiny CSS working via voodoo, please recommend correction



artfultheory
07-02-2007, 02:13 PM
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:


<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.

Jutlander
07-02-2007, 02:40 PM
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. :)

Jutlander
07-02-2007, 02:46 PM
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. :)


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

artfultheory
07-02-2007, 02:48 PM
"As I understand it you want the button first and then the textbox?"

The other way around...

[ textbox ] [button]
However, if I'm lucky I'll understand the solution well enough to do either.

Jutlander
07-02-2007, 02:54 PM
Ah OK then. :)

Try with this:


<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.

artfultheory
07-02-2007, 04:12 PM
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.

Jutlander
07-02-2007, 04:21 PM
It works here, strange. :confused:

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

artfultheory
07-02-2007, 06:15 PM
Without absolute, the button requires 10em of inline flow for placement, so it breaks to the following line.

artfultheory
07-02-2007, 06:16 PM
ps: what IE version is it working on for you?

Jutlander
07-02-2007, 06:27 PM
I've tested both in Firefox 2, Opera and IE 5.5, 6 and 7 and they look the same. :confused:

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


[ textbox ] [button]

EDIT:

Ahh, it is because a ; is missing after the value of width in the textbox. :)

Jutlander
07-02-2007, 06:41 PM
OK, I hope I hit the nail this time then. :D



<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. ;)

artfultheory
07-03-2007, 04:41 AM
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.



<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...

koyama
07-04-2007, 07:07 AM
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 (http://koyama.dk/demos/CF117764/CF117764.html)



<!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>

artfultheory
07-04-2007, 06:33 PM
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.


<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum