If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?
Thank you in advance
Piers
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML> 17  27831 
Have you tried:
display:block;width:auto;?
chris
Piers Lawson wrote: If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?
Thank you in advance
Piers
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>
Piers Lawson wrote: If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.
100% + non-zero padding + non-zero border > 100%
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
Why are you using XHTML? (Except you aren't since all tag and attribute
names are lower case in the language).
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
David Dorward <do*****@yahoo.com> writes: Piers Lawson wrote:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.
100% + non-zero padding + non-zero border > 100%
Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say
width: 100% - 0.2em; border-width: 0.1em
to get it to add up right. And using a percentage for the
border width isn't going to chime with other input boxes of
different widths.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)
On 17 Mar 2005 20:24:31 +0000, "Jón Fairbairn"
<jo***********@cl.cam.ac.uk> wrote:
[...] ...And using a percentage for the border width isn't
going to chime...
Right; percentage values are not valid for border sizing as per specs.
'border-width'
Value: <border-width>{1,4} | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties
--
Rex
in comp.infosystems. www.authoring.stylesheets, =?iso-8859-1?q?J=F3n?=
Fairbairn wrote: David Dorward <do*****@yahoo.com> writes:
Piers Lawson wrote:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.
100% + non-zero padding + non-zero border > 100%
Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say
auto
width: 100% - 0.2em; border-width: 0.1em
to get it to add up right.
border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Lauri Raittila <la***@raittila.cjb.net> writes: in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote: Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say
auto
width: 100% - 0.2em; border-width: 0.1em
to get it to add up right.
border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.
Really? If I change the OP's code to:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>
both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)
Thanks for the idea... changing to:
<input type='text' style='display:block;width:auto;'>
meant that the text box shrank to its normal size in IE and FireFox... i.e.
it was far narrower than 15em.
Thank you anyway
Piers
"Chris Leipold" <cl******@dietzk.de> wrote in message
news:39*************@individual.net... Have you tried:
display:block;width:auto;?
chris
Piers Lawson wrote: If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the
text box fit within the DIV (preferably without losing its default borders)?
Thank you in advance
Piers
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>
You are right Jon, changing to
<input type='text' style='display:block;width:auto;'>
just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:
<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>
But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:
<input type='text' style='width:14.5em;border-width:
0.25em;padding:0;font-size:1em'>
but has two downsides, the width is hardcoded and the font size is no longer
"natural".
Thank you for your ideas!
Piers
"Jón Fairbairn" <jo***********@cl.cam.ac.uk> wrote in message
news:wf************@calligramme.cl.cam.ac.uk... Lauri Raittila <la***@raittila.cjb.net> writes:
in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote: Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say
auto
width: 100% - 0.2em; border-width: 0.1em
to get it to add up right.
border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.
Really? If I change the OP's code to:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>
both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)
Piers Lawson wrote: If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?
Thank you in advance
Piers
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>
Why don't you just use <input type="text" style="width:15em;"> ?
Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos văo. O resto é imperfeito.
- Renato Russo -
> Why don't you just use <input type="text" style="width:15em;"> ? Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.
Setting the width doesn't work as the padding and border are then added
outside of the 15ems... kind of counter intuitive to a newbie like me, but
those I guess are the W3C specs!
--
Els http://locusmeus.com/
Sonhos vem. Sonhos văo. O resto é imperfeito.
- Renato Russo -
Piers Lawson wrote: Why don't you just use <input type="text" style="width:15em;"> ?
Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.
Setting the width doesn't work as the padding and border are then added
outside of the 15ems... kind of counter intuitive to a newbie like me, but
those I guess are the W3C specs!
So, make it a little smaller. Padding and border can be set to ems
too, so just add them up to be 15em together.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos văo. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Love Circles
I came up with another way that works... but it requires an extra nested
div, which seems wrong to me:
<div style="width:15em;background-color: green;">
<div style="padding: 0 5px 0 0;">
<input type='text' style='width:100%'>
</div>
</div>
The 5px compensates for the border and padding used by FireFox when drawing
a text box (6px are used by IE). This method means the text boxes are the
correct size, although with IE, the nested div exteends to the right.
Piers
"Piers Lawson" <Pi***@Lawson.n.a.m.e.NOSPAM> wrote in message
news:3y*******************@newsfe1-gui.ntli.net... You are right Jon, changing to
<input type='text' style='display:block;width:auto;'>
just means the text box returns to its natural size, which is less than
15em wide... so it isn't the answer. I thought about using:
<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>
But I guess the default font size for a text box is less than the
inherited size, so it doesn't work either! The following does work:
<input type='text' style='width:14.5em;border-width:
0.25em;padding:0;font-size:1em'>
but has two downsides, the width is hardcoded and the font size is no
longer "natural".
Thank you for your ideas!
Piers
"Jón Fairbairn" <jo***********@cl.cam.ac.uk> wrote in message
news:wf************@calligramme.cl.cam.ac.uk... Lauri Raittila <la***@raittila.cjb.net> writes:
in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote:
> Indeed. But since he wants the border, what value should he
> put in place of 100%? AFAIK there's no way to say
auto
> width: 100% - 0.2em; border-width: 0.1em
>
> to get it to add up right.
border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.
Really? If I change the OP's code to:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<HTML xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>
both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)
> So, make it a little smaller. Padding and border can be set to ems too, so just add them up to be 15em together.
It appears that IE and FireFox already have ideas about what padding and
border should be used. For instance in FireFox the left border is 2px, the
right border is 1px. The left and right padding are 1px.
I can force these to use em e.g.
<input type='text' style='width:14.6em;border: 0.1em groove; padding:
0.1em 0.1em 0.1em 0.1em; font-size:1em'>
Which does fit perfectly... however it doesn't look like a normal text box
because:
1) As the text size is increased, the border thickness increases
2) I have had to force a text box's font size of 1em in order that the
calulations work (the font size in a text box is usully less than the
surronding text.
Thanks for your ideas though! I just wish setting a text box's display type
to block worked as some others thought it would!
Piers
"Piers Lawson" <Pi***@Lawson.n.a.m.e.NOSPAM> writes: I came up with another way that works... but it requires an extra nested
div, which seems wrong to me:
<div style="width:15em;background-color: green;">
<div style="padding: 0 5px 0 0;">
<input type='text' style='width:100%'>
</div>
</div>
The 5px compensates for the border and padding used by FireFox when drawing
a text box (6px are used by IE). This method means the text boxes are the
correct size, although with IE, the nested div exteends to the right.
I'm not sure why that works and I agree it's nasty. The
fundamental problem with the original version is that
browsers get the width from the "size" attribute of the
input box, which for type text is a number of characters
-- not em!
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
in comp.infosystems. www.authoring.stylesheets, Piers Lawson wrote: You are right Jon, changing to
<input type='text' style='display:block;width:auto;'>
just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:
<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>
But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:
It is not necessarily inherited size. In fact, I think all browswer scale
font dont on input fields. Try font-size:inherit
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Lauri Raittila <la***@raittila.cjb.net> writes: in comp.infosystems.www.authoring.stylesheets, Piers Lawson wrote: You are right Jon, changing to
<input type='text' style='display:block;width:auto;'>
just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:
<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>
But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:
It is not necessarily inherited size. In fact, I think all browswer scale
font dont on input fields. Try font-size:inherit
That doesn't help. The font in the input box may be scaled
down, but html4.01 only describes the size attribute as
'number of characters', and Firefox at least takes that as
something less than an em (reasonably enough, since the
average width of a 'character' is less than an em). Setting
the font size for the input box explicitly, you can see from
the line height that the font has to be much bigger than
that of the parent element before the width gets close (for
an input with size=15).
Empirically, in firefox with my current settings, <input
type='text' style='display:block;width:auto;' size=38> comes
out at the right width, though of course that information is
no use to anyone :-/
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
I just ran into this same problem. My solution works in IE and Firefox... I couldn't care less about any other browser. The CSS is a little ugly, but the HTML is clean.
<style>
.text-stretch {
padding-right: 4px;
}
* html .text-stretch {
padding-right: 6px;
}
.text-stretch input {
width: 100%;
}
* html .text-stretch input {
margin-right: -7px;
}
.textarea-stretch {
padding-right: 4px;
}
* html .textarea-stretch {
padding-right: 6px;
}
.textarea-stretch textarea {
width: 100%;
margin: 0;
}
* html .textarea-stretch textarea {
margin-right: -7px;
}
</style>
<div style="border: 1px solid blue; width: 300px;">
<div class="text-stretch">
<input type="text" />
</div>
</div>
<br />
<div style="border: 1px solid blue; width: 300px;">
<div class="textarea-stretch">
<textarea rows="4"></textarea>
</div>
</div>
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: de Beers |
last post by:
How do I change the default "black" text to white in a table?
Here is the script
echo "<table border=1, table width=200%, bgcolor=#6699FF>\n";
Where and how do I add "text color="FFFFFFF???
|
by: Mel |
last post by:
is it possible ?
i tried size=100% and 'NADA !'
thanks,
Mel
|
by: Suzanne Boyle |
last post by:
I have the following code in a webpage:
<p><img src="images/clydesdale.gif" width="100" height="41" style="float:
left;" />
<strong>Test</strong><br />
Lorem ipsum dolor sit amet, consetetur...
|
by: Charles Crume |
last post by:
Hello;
I'm fairly new to CSS, but have learned that Mozilla is supposed to be the
most compliant in rendering.
I have a web page that uses a style sheet with a class named "page_links"
that...
|
by: anatushi |
last post by:
Hi, im looking for help on how to add a text fader to my website,
usually i'm working with css but in this case i need to add java script
to make it work, that wasn't the problem but somehow it...
|
by: =?Utf-8?B?S2VzdGZpZWxk?= |
last post by:
Hi
Our company has a .Net web service that, when called via asp.net web pages
across our network works 100%! The problem is that when we try and call the
web service from a remote machine, one...
|
by: mszanto |
last post by:
I've read a bunch of posts on this and none of the answers are
legitimate (IMHO) so I thought I'd throw it out there again.
Using the html code below, if you set the doctype to HTML 4.0, and...
|
by: littlealex |
last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS!
In IE6 the text for the following page doesn't display properly - rather than being...
|
by: Mike Harrison |
last post by:
Hi, I have some simple HTML like this:
<div id="container" style="width:100%;">
<input type="text" <input type="button" style="float:right;"
value="Click here...">
</div>
I want the button...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
