Re: [css-d] IE11 seems to handle word wrap differently than other browsers on textarea
I found another weird behavior on this textarea on IE11...If I change the text inside the textarea by replacing ":event_startdate" to "|event_startdate" the 2nd line on the textarea gets a little bit more filled with the "to :event_name" string which seems a bit more normal... Example: http://fiddle.jshell.net/fy2aoz28/7/ Is IE11 getting confused on my colon ":" chars all around this text?!? > From: lixoa...@netcabo.pt > To: css-d@lists.css-discuss.org > Date: Sat, 5 Sep 2015 04:42:41 + > Subject: [css-d] IE11 seems to handle word wrap differently than other > browsers on textarea > > Check this example:http://fiddle.jshell.net/fy2aoz28/1/ > On IE11 it looks like this: http://i.stack.imgur.com/ITPVH.pngOn chrome (and > firefox) it looks like this: http://i.stack.imgur.com/KqsSg.png > As you can see the behavior on IE11 is a bit weird as for example the 2nd > line on the textarea could have more text there (at least the string "to > :event_name") and besides that the browsers don't seem to agree on how they > show this text on the textarea. > I asked a question on stackoverflow to solve the problem of different > behavior between browsers and I can fix it if I add white-space: pre to the > textarea: > http://stackoverflow.com/questions/32409280/weird-text-wrap-on-textareas-with-ie11 > But I would like to still understand this a bit further on what is going on > here, if it's a bug on IE11, if IE11 doesn't support something on the CSS > spec or if I'm interpreting something wrong on the CSS spec... > > Can someone explain this a bit further? Why the difference, what's going on > with IE11? > > > Thanks in advance, --lx > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE11 seems to handle word wrap differently than other browsers on textarea
Check this example:http://fiddle.jshell.net/fy2aoz28/1/ On IE11 it looks like this: http://i.stack.imgur.com/ITPVH.pngOn chrome (and firefox) it looks like this: http://i.stack.imgur.com/KqsSg.png As you can see the behavior on IE11 is a bit weird as for example the 2nd line on the textarea could have more text there (at least the string "to :event_name") and besides that the browsers don't seem to agree on how they show this text on the textarea. I asked a question on stackoverflow to solve the problem of different behavior between browsers and I can fix it if I add white-space: pre to the textarea: http://stackoverflow.com/questions/32409280/weird-text-wrap-on-textareas-with-ie11 But I would like to still understand this a bit further on what is going on here, if it's a bug on IE11, if IE11 doesn't support something on the CSS spec or if I'm interpreting something wrong on the CSS spec... Can someone explain this a bit further? Why the difference, what's going on with IE11? Thanks in advance, --lx __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Why is height 100% div pushed by sibling
Thanks for the clarification. I'm just learning about the flex box module, do you think you can provide an example of a solution using flexbox? Because my fix only works if my first sibling has a fixed height which is not always the case so what I want is 1 children to take as much height as needed by its text content and then the sibling to use up all the remaining space. Thanks in advance, -- A Santos > From: e...@l-c-n.com > Date: Tue, 1 Jul 2014 21:48:05 +0900 > To: lixoa...@netcabo.pt > CC: css-d@lists.css-discuss.org > Subject: Re: [css-d] Why is height 100% div pushed by sibling > > > Le 1 juil. 2014 à 20:57, Lixo Aqui a écrit : > > > Take a look at my example: http://jsfiddle.net/nn2N7/ > > > > In summary I have 2 siblings, one with 100px height and another with 100%. > > I was expecting the 100% div to only fill the available space after > > subtracting the 100px. Instead it assumes 100% height of parent block level > > element which means any sibling will cause problems. > > > >> From what I read, this is the way it works, period. I can fix this using > >> calc(100% - 100px) for my height. > > > > My doubt is more about the reasoning behind this. I would really expect the > > 100% height to be calculated taking into account the sibling, otherwise > > height 100% simply doesn't work when there are more than 1 sibling. It just > > doesn't make sense to me. > > > > As a more experienced user in CSS I want to understand if this is just a > > "weird" think on the specification or am I thinking it wrong? > > >From the CSS 2.1 spec, 10.5 Content height: the 'height' property: > > > > Specifies a percentage height. The percentage is calculated with respect to > > the height of the generated box's containing block. > > http://www.w3.org/TR/CSS21/visudet.html#the-height-property > > So yes, your height: 100% is calculated based on the height of the parent > box. Nothing weird or bizarre about this. It works the same as the width > property, fwiw, in your example case. > > You can use calc(), or you can consider the flex box module. The former has > broader support across browsers. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com > > > > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why is height 100% div pushed by sibling
Hi all, Take a look at my example: http://jsfiddle.net/nn2N7/ In summary I have 2 siblings, one with 100px height and another with 100%. I was expecting the 100% div to only fill the available space after subtracting the 100px. Instead it assumes 100% height of parent block level element which means any sibling will cause problems. >From what I read, this is the way it works, period. I can fix this using >calc(100% - 100px) for my height. My doubt is more about the reasoning behind this. I would really expect the 100% height to be calculated taking into account the sibling, otherwise height 100% simply doesn't work when there are more than 1 sibling. It just doesn't make sense to me. As a more experienced user in CSS I want to understand if this is just a "weird" think on the specification or am I thinking it wrong? Thanks in advance, -- A Santos __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
