i am wondering why the textarea refuses to stay aligned with the containing div?
<!-- the textarea pokes out-->
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
It is causing me difficulty in ensuring alignment of elements
By default, a <textarea> element is rendered with a border around it. The problem with this is that when you set the width property on an element, you're only setting the content width, not the total width. The total width of the element is (width + border + padding + margin) so when you set the width on the <textarea> to be 100% it sets the content width to 300px but the total width is that 300px plus the default borders, which causes it to exceed the 300px width of the <div>.
You'll could accommodate these borders in the <div> using padding/margins, but a better solution would be to set the box-sizing property on the <textarea> to border-box to force the width property to define the total width of everything up to and including the border of the element.
You'll need to do a bit of research on that property because it's declared differently in all browsers (e.g. -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, etc.). Here is the QuirksMode page on box-sizing for you to look through.
The box-sizing fix works for Firefox, but I haven't tested it in other browsers. It's possible that some of them, particularly when in quirks/legacy mode, could also apply a margin to the element. If this is the case, then all you would need to do would be to remove the margins with CSS (AFAIK, there isn't a widely supported option for box-sizing that extends to margins - only ones for content, padding, and border).
I'd suggest being specific with this fix, and only removing the left/right margins (i.e. margin-left: 0; margin-right: 0;) rather than removing margins entirely (i.e. margin: 0;) to preserve any top/bottom margins if they exist (and if you want to keep them). I know Firefox applies a 1px margin to the top/bottom, and other browsers might as well.
I tried that in Firefox, Chrome and IE, and they all show it properly. I suspect that you DIV is inside of another container and that's causing the problem.
Please add a part of your code.
The textarea may have a margin being applied to it. Try this:
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%; margin: 0;"></textarea>
</div>
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
Tested working on Firefox 3.6.10, Internet Explorer 8 and Google Chrome.
But, maybe instead of enclosing it in a DIV, you can also try this:
<textarea style="border:1px solid #ccc; width:300px"></textarea>
Which about has the same looks as your original code.
Related
So I came across a strange issue today, it only happens in Chrome.
Have a look at the fiddle:
https://jsfiddle.net/m1npLfcm/1/
<div class="table">
<div class="row">
<div class="cell">
<div class="content">
</div>
</div>
</div>
</div>
There is some basic table layout made of DIVs, a table, a row and a cell. All of them have 100% width and height. Inside the cell there's a regular DIV. It has 100% width and height and also some padding.
As we all know default box-sizing: content-box for div would push the boundaries by that padding. So I've made it box-sizing: border-box as I usually do and now I have this strange behavior.
Seems like in this situation, box-sizing: content-box is only applied to the width and height works just fine by default without pushing the boundaries. However if I add box-sizing: border-box - the width gets to work fine but the height gets total vertical padding subtracted from it as if previously content-box acted as it should have been.
Just what the hell is this? It only happens in Chrome and I'm totally confused. Has anyone seen this before and how this should be treated? Brief googling didn't help as this issue is quite hard to describe in a few words.
If you see the padding of 20px is the height you are talking about, since there is no elements or content inside the cell there browser only puts the padding.
In your fiddle I played around with the padding of the content and manage to fix the height with the size(red) with the value I want.
I hope that helps you.
Unfortunately an additional div wrapped around .content is required with a class like .inner that will serve specifically as a padding around content.
In this codepen I've changed a bit the CSS of your fiddle:
set box-sizing: border-box to all elements, as it's essential
replaced .cell with .inner (supported only by evergreen browsers, in IE <= 10 the .cell wrapper should remain)
removed the excessive width: 100% for block-level elements
The border/padding is applied correctly as long as the red background of the .table is covered by the .inner
I'm developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here's the code:
<head>
<style type="text/css">
#tester
{
height: 20px;
background-color: Red;
border: 1px;
}
</style>
</head>
<body>
<div id="tester">
</div>
</body>
Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it's possible that I'm being absent minded and forgot that div elements did this automatically, but I'm 99% sure they didn't.
Thank you kindly,
Ben
From CSS 101 (BSD/MIT licences):
The horizontal position and size of a non-floating, block-level element is determined by seven properties:
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
The sum of these seven properties is always equal to the 'width' of the parent element.
So yes, you've been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they've been told not to by float.
<div>s are block-level elements, meaning they will automatically fill the horizontal space of their parent. Unlike inline elements such as <span>, which only take up the space required by their content.
DIVS are by default 100% of their parent element. So just set the width you need.
Also note that DIVs that have a width greater than their parent will by default also be completely visible unless you set the parent element to overflow:hidden.
I'm a fairly novice web developer and I'm having a very fundamental problem that I would really appreciate some help with:
No matter what width I set any elements within a certain containing div, safari and Chrome both add extra margins that fill the width of the div. If I specify them to have 0 margins the css is overridden. For example, I have the following
<div class="container">
<div class="element1">
...
</div>
</div>
and I set this as the css:
.container{
background-color:#ffffff;
margin-left:7.5%;
margin-right:7.5%;
padding:30px;
color:#505050;
line-height:1.5;
font-size:14px;
}
.element1{
max-width:50%;
margin: 0px 0px 0px 0px;
}
element1 has a width of 50% of the containing element, but it then has an extra margin to the right that fills up the rest of the width of the containing element. Why is this happening and how do I set this right-margin to 0?
Thanks!
Try adding in a reset stylesheet before your stylesheet to normalise all the browsers. Browsers have their own ideas about default padding and margins etc. for different elements. By resetting the stylesheet, you are making every browser start from the same position.
http://meyerweb.com/eric/tools/css/reset/
It seems to me that you don't understand the concept of block level elements.
"By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text."
http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
Using CSS,
I'm trying to specify the height of a span tag in Firefox, but it's just not accepting it (IE does).
Firefox accepts the height if I use a div, but the problem with using a div is the annoying line break after it, which I can't have in this particular instance.
I tried setting the CSS style attribute of: display: inline for the div, but Firefox seems to revert that to span behavior anyway and ignores the height attribute once again.
You can set any element to display: inline-block to allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.
One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.
Keep in mind that inline-block does not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you'll have to use the property -moz-inline-stack instead of inline-block. Keep in mind this is a Mozilla-only property so you'll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard inline-block.
<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>
<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>
As long as the container for whatever is holding div's 1 and 2 is wide enough for them to fit, this should be fine.
Inline elements can't have heights (nor widths) like that. SPANs are already display: inline by default. Internet Explorer is actually the broken browser in this case.
Since you're displaying it inline, the height should be set at the height of your line-height attribute.
Depending on how it's laid out, you could always use float:left or float:right on the span/div to prevent the line break. But if you want it in the middle of a sentence, that option is out.
The problem is that 'display: inline' can't get a height associated because, being inline, it gets its height from its the content. Anyway, how do you define the height of a box that is broken at the end of a line?
You might try to set 'line-height' instead, or if this doesn't work to your satisfaction, set a padding:
/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;
You can only change the height (and width) of a span element when it is set to display: block;. This is because it is an inline element normally. div is set to display: block; normally.
A solution could be to use:
<div style="background: #f00;">
Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>
To set height of span following should work in firefox
span {
display: block;
height: 50px;
}
text alignment inside the element you can adjust using the padding and block-inline attributes. display:inline-block; padding-top:3px; for example
height in em = relative line-height
for example height:1.1em with line-height:1.1
= 100% filled
I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to 0 width on IE7, but not on Firefox or Safari.
If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works.
Is there something I'm missing here?
Is there an easy fix for this besides the pixel-based width on the child?
Is there an area of the CSS specification that covers this?
The parent div needs to have a defined width, either in pixels or as a percentage. In Internet Explorer 7, the parent div needs a defined width for child percentage divs to work correctly.
Here is a sample code. I think this is what you are looking for. The following code displays exactly the same in Firefox 3 (mac) and IE7.
#absdiv {
position: absolute;
left: 100px;
top: 100px;
width: 80%;
height: 60%;
background: #999;
}
#pctchild {
width: 60%;
height: 40%;
background: #CCC;
}
#reldiv {
position: relative;
left: 20px;
top: 20px;
height: 25px;
width: 40%;
background: red;
}
<div id="absdiv">
<div id="reldiv"></div>
<div id="pctchild"></div>
</div>
IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage-based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.
If you would like a more in-depth discussion of this along with lots of working examples, have a gander here.
Why doesn’t the percentage width child
in absolutely positioned parent work
in IE7?
Because it's Internet Explorer.
Is there something I'm missing here?
That is, to raise your co-workers' / clients' awareness that IE is not good.
Is there an easy fix besides the pixel-based width on the child?
Use em units as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font sizes. So your white space grows and shrinks proportionally to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.
Is there an area of the CSS specification that covers this?
None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0.
I think this has something to do with the way the hasLayout property is implemented in the older browser.
Have you tried your code in IE8 to see if works in there, too?
IE8 has a Debugger (F12) and can also run in IE7 mode.
The div needs to have a defined width:
<div id="parent" style="width:230px;">
<div id="child1"></div>
<div id="child2"></div>
</div>
The parent <div> tag doesn't have any width specified. Use it for the child <div> tags, it could be percentage or pixel, but whatever it would be,it should link to its appropriate positions:
<div id="MainDiv" style="width:60%;">
<div id="Div1">
...
</div>
<div id="Div2">
...
</div>
...
</div>