CSS Margin Problem - html

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.

Related

White border at the top

Why would this code leave a white strip at the top of the page in google chrome ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title goes here</title>
</head>
<body style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px">
<form id="form1" runat="server" style="padding:0px 0px 0px 0px;margin:0px 0px 0px 0px">
<div style="background-color: blue;">
<p>&nbsp</p>
</div>
</form>
<p> </p>
</body>
</html>
The p-tag has a margin that affects its parents.
Add overflow: auto; to the div with the background. That prevents margins from collapsing
Give margin:0; padding:0; to the <p> inside of DIV.
Try adding margin:0; and padding=0; to the htmlelement as well.
Also, this is a bit far-fetched, but I experienced a similar problem with php files where a utf-8 encoded one with BOM would create an empty line before everything else.
The white line is coming from the white space left behind by the line break created by the p tag. Just remove the p tag and it will be gone.
<div style="background-color: blue;">
&nbsp
</div>

float makes div not surround children

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

Why does adding a DOCTYPE affect my CSS?

I am wondering why the following HTML/CSS renders fine until I put a doctype in:
<body style="margin:0; padding:0; background-color:#eeeeee"></body>
<div id="HeaderContainer" style="background-color:#eeeeee; color:Black; border-bottom:1px solid #cccccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:White; margin:0px; padding:0px">
<div style="margin:30px; width:840px; margin:10px auto; margin-top:50px; background-color:#cc0000;">
text
</div>
</div>
</div>
</body>
What I want is a header (a grey bar) with a dark grey border at the bottom. Beneath this, I want my content, which goes into a big 100% width div that's white (as the page is grey). The above code looks fine, but if I add this line to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The margin on the innermost div turns from white to grey, so the page looks wrong.
Can anyone explain why? I am testing this using IE8 but it looks the same in Chrome.
Image description:
Adding a DOCTYPE declaration causes the browser to render the page in [almost] standards mode instead of quirks mode.
you are closing the body tag on line 1 and and then again on the last line.
This is terribly formed XHTML.
The problem you are referring to is actually a webkit issue. When you use a margin on an element, it uses the background from the parent element in the margin space. Instead use padding to get past this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; background-color:#eee">
<div id="HeaderContainer" style="background-color:#eee; color:#000; border-bottom:1px solid #ccc; height:60px; margin:0px"></div>
<div style="width:100%; background-color:#fff; margin:0px; padding:0px">
<div style="width:840px; margin:0 auto; padding-top:10px; background-color:#c00;">
text
<br /><br /><br />
</div>
</div>
</body>
</html>

How do I make Standards mode work as well as quirks mode?

The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag)
<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
Input.quirks
{
margin: 1px 0px 1px 0px;
border: solid black 1px;
}
</style>
</head>
<body>
Should work in Quirks Mode <br />
<input class="quirks" type="text" style="width: 300px;" /><br />
<input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
<input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>
However I am told that the absence of a DocType at the top of said HTML is causing both both browsers to work in "Quirks" mode.
I am told this is bad.
I have tried several DocTypes but have not found a DocType/HTML combination which yields a correct rendering in both browsers.
Anything other than "Quirks" mode causes the browsers to react differently to the attempt to set the width of a textbox. This seems to lead to a position where I can correct my instructions for either FF or IE and suddenly the other will fail.
Some detail...
1.> The objective here is that the 3 rows should appear to be the same width exactly when rendered in each browser. It is not nessecary that the rendered widths are the same across browsers, merely that they appear correctly justified/alighned inside each browser.
2.> The image referenced is a spacer image 3 pixels wide and 1 high (an alternative to this would also be good)
3.> I do not want to introduce tables if at all possible.
It seems as though the Quirks mode is the only mode which is consistent across the browsers. I am worried however that the final version of IE8 or indeed in some future browser, the quirks mode will not be the default.
What should I do ? How do specify a DocType (and maybe alter my html) which will create a consistent look across browsers?
The main difference between "Quirks" and "Standards Compliance" mode is a different "box model" which results in different ways of calculating sizes based on width/height, padding, margin and border settings. In Standard Compliance mode, the effective width and height of a box is calculated by adding all these parameters (please search the web for more details).
So, since you specify a 1px-border, your first input fields will be 302px wide (300px + 2*1px for the border left and right). The inconsistency between FF and IE you mentioned may be caused by different "default values" for the "padding" setting. I just tested your code with a DOCTYPE and no padding for the input fields -- both browsers rendered it the same way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.
input.quirks {
margin: 1px 3px 1px 0px; /* 3px right margin */
border: solid black 1px;
padding: 0px; /* so that IE and FF use the same padding */
}
Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:
300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px
Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).
There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!
Since your problem was mostly caused by different default values in IE and Firefox, you may be interested in a Reset CSS stylesheet, which includes values for things like padding, effectively clearing the defaults for every browser so that they all render similarly.

Why does 150 + 150 not equal 300 in browsers?

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