I have the following HTML
<!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 runat="server">
<style>
.box {
border: solid black 1px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
</form>
</body>
</html>
When rendered the 2nd row of textboxes appear to be cumulatively longer than the 1 on the first row. This despite explicit setting of widths via the style attribute
Why does this happen and can I avoid it?
Note: This appears to work the same in both FF3 and IE7
There is a border on a textbox that isn't included in the width.
jhunter is correct, and I would add that you need Firebug for FireFox (it's free). You could have figured this out yourself quickly with that installed. Inspect the element you are interested in and look at the "layout" tab.
Indeed, the width of your boxes are +2 as a border on both the left and the right (which are 1px) means there's 2 extra pixels per box. So in total you're +6.
I'd suggest reading CSS Mastery, it explains a lot of the differences with the different browser box models and how they affect layout and width's in different browsers.
CSS Mastery
Related
Try pasting this HTML into a file and opening it in Chrome:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea></textarea>
</div>
</body>
</html>
The parent is a bit bigger than the textarea:
This is only the case on Chrome (not Firefox).
I noticed that if I removed the doctype, it behaves normally - the parent is the correct size. My first thought is that it's just different default useragent styles. Here's a diff between the the user agent styles with and without the doctype:
So I tried matching the padding and the box-sizing like so:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<textarea style="box-sizing: border-box; padding: 2px 0px 0px 2px;"></textarea>
</div>
</body>
</html>
But the problem doesn't go away. Any idea what's causing this?
(Sorry for the over-sized images - I'm not aware of any markdown tricks to make them a more reasonable size.)
Yes, it is a chromium bug.
The best workaround is to set it to block type box.
textarea {
display: block;
}
EDIT: my question was not clear, so this is just to clarify.
20px left margin moves the div a total of 20px, but the input control seems to move a total of 40px.
ORIGINAL QUESTION:
The following script is the whole script, I have no other script/style attached to the script below:
<!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>
<title>Untitled Page</title>
</head>
<body>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
<input type="text"/>
</div>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
<input type="text" />
</div>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
<input type="text" />
</div>
</body>
</html>
For some reason, when I add 20px margin to the left of any of those div tags, for some reason, it not only moves all the divs 20px to the right, but it also moves the input field within the div tags 20px to the right within the div tag.
For example:
<!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>
<title>Untitled Page</title>
</head>
<body>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 20px;border:1px black solid;">
<input type="text"/>
</div>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
<input type="text" />
</div>
<div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
<input type="text" />
</div>
</body>
</html>
Why is that happening?
I am testing in internet explorer 8 using internet explorer 7 mode.
I have tested it in internet explorer 8, using standard internet explorer 8 mode, and it works perfectly.
This looks like a weird manifestation of the double float margin bug. Putting display: inline within your style attribute of your first div will stop the doubling of the margins in older versions of IE.
However, as others have said, I'd create classes. It keeps things tidier.
You don't seem to be understanding how margins work. When you add a left-margin to a text document (like in MS Word), you shift the contents of the paper to the right by the margin, thus spacing it away from the edge of the page.
When you add a left-margin to an element in CSS, you do the same basic thing. You're telling the browser to make sure it has n space from the block-level element to the left, whether that is the edge of the page or another div. All of the contents of the element you added the margin on retain their position relative to their parent; in your case that means that the input moves when the div moves.
Also, it might just be a transcription problem, but you added 20px margins on the bottom of the first div, not to the left like you mentioned.
The following HTML...
<!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>
<title></title>
</head>
<body>
<div style="border: 1px solid blue;">
<div style="float: left;">
Expected NPV</div>
</div>
</body>
</html>
...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).
Is there a way to make this happen w/out removing the float:left?
I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.
You can give the parent an overflow to take the child's height into account, like this:
<div style="border: 1px solid blue; overflow: auto;">
<div style="float: left;">
Expected NPV</div>
</div>
You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.
Use overflow:auto; eg. on the container.
Similar problem : Floating image to the left changes container div's height
I have a simple page with two elements:
<html>
<body>
<input type="text" style="height: 18px; width: 120px" /><br/>
<select style="height: 18px; width: 120px">
<option>test</option>
</select>
</body>
</html>
In an attempt to make it w3c compliant and to display consistently across browsers, I've added a DOCTYPE element and an XML namespace:
<!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">
<body>
<input type="text" style="height: 18px; width: 120px" /><br/>
<select style="height: 18px; width: 120px">
<option>test</option>
</select>
</body>
</html>
The CSS is just an attempt to make the widths and heights of both the textbox and select box the same.
However, for some reason, the 2nd page no longer respects the height and width CSS attributes I've set on the input tag. The textbox is about 4 pixels taller in each browser (IE, Firefox, Chrome) and 4-6 pixels wider in each browser.
I've used various developer tools to try to find out what additional markup is being applied, but I can't find any.
If possible, could someone explain this behavior to me?
Any help would be much appreciated.
Thanks,
B.J.
Your code is not XHTML compliant, you're missing out a head element:
<!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 goes here -->
<head>
<title>My page title</title>
</head>
<body>
<input type="text" style="height: 18px; width: 120px" /><br/>
<select style="height: 18px; width: 120px">
<option>test</option>
</select>
</body>
</html>
If you want to make the inputs the same you should style them as follows:
<style type="text/css">
input[type="text"], select{
width: 120px;
height: 18px;
padding: 0;
margin: 0;
border:1px solid grey;
}
</style>
This is a good reference for writing proper XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp
An article concerning good resources and a good explanation why the above site is not a good reference: W3Fools.
Not specificying a doctype can put many browsers into a compatability mode. Without actually investigating I'd guess the page without the doctype is rendering incorrectly. Try putting a doctype (html4 or something) on the first sample and see what happens.
Edit:
The biggest cause of rendering discrepancies comes from compatibility mode(s). Before trying to hunt down differences, make sure your markup is valid (http://validator.w3.org/) as are your stlyesheets (http://jigsaw.w3.org/css-validator/). If you markup doesn't tell the browser how to parse it, or has errors in it, the browser will probably make errors rendering the page.
In your example, it's probably running quirks mode on the no-doctype markup causing stylesheet errors.
I'm sure someone has noticed this before but I can't seem to find a solution. In IE7 before and after form tags IE inserts line breaks. This is no good! Sample code below... Solutions? Ideas?
<html>
<body>
<div id="pageContent" style="border:1px solid black; background-color:orange;">
<form>
content bad <!-- notice spaces before and after form tags -->
</form>
</div>
<div id="pageContent2" style="border:1px solid black; background-color:orange;">
content good <!-- no spacing -->
</div>
</body>
</html>
Start with a valid doctype declaration above your <html> tag. Omitting this causes the browser to use quirks mode instead of standards mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If that doesn't solve it, add a css rule to remove all margin and padding from form elements:
form { margin: 0; padding: 0; }