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> </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;">
 
</div>
Related
This question already has an answer here:
Why is an element with position: fixed moving with a non-positioned sibling?
(1 answer)
Closed 5 years ago.
I have two div elements inside a my body.
The first div is position:fixed, but when I add a paragraph to the second div, the first div moves down from the top of the page by ~20px.
How is adding a paragraph to one div, affecting the positioning of a previous div on the layout?
In the following code, there is one paragraph in the second div. This is the paragraph I am referring to.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
It's because you're not positioning the element anywhere vertically, because you're not setting any of its top or bottom offsets, thus placing it where it would be positioned if it were part of the document flow. This means it will align itself with the first element in the document flow, according to its margin.
That first element in document flow happens to be <p>.
The proper fix for your problem is setting top:0; on the fixed element. For a more detailed explanation please read the accepted answer of the question yours duplicates.
Other possible (improper, IMHO) "fixes" are adjusting the first element in document flow to start from the top of the document, by overriding the default margins of <p> to 0, or setting it's display property to inline-block (or any other inline type of display).
It's because p tags has a margin by default, so you just have to reset this margin using p {margin: 0;}. Here is the working example:
p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding
What I am trying to do is give a div margin-top: 30px; But it seems to be moving the whole page 30px down, as opposed to only that div. It is like the child div is influencing the parent div?
Any suggestions?
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>
<!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">
<title></title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="content">
<form id="form1" runat="server">
<div class="header" style="margin-top:0px;">
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
</body>
</html>
CSS;
body
{
background-image:url('/img/blue_back.png');
background-repeat:repeat-x;
}
#content
{
background-color:White;
width: 800px;
height:900px;
margin: 0 auto 0 auto;
}
.header
{
border-bottom:1px solid #000000;
height:100px;
color:Blue;
}
That's exactly what's happening, yes. A direct-child of an element with margin-top will also push the parent element. As a really easy/quick fix, have you considered using padding instead?
Failing that, you can use overflow: auto on the parent according to this previous discussion on the topic, and this one too.
Try adding padding:0.01px to the container. This will have no visual effect, but it will cause the margin to be applied in the right place.
It's the margin on the <h1>. This always seemed counter intuitive to me. You can fix it by putting overflow: auto; on the container or changing the h1s margin to padding.
You must change
<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
to
<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>
margin applies the space outside the object while padding applies it inside.
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.
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>