I have created a simple layout using the HTML div tag. I would like for there to be NO margin (meaning no whitespace) at the top of my page. I am able to achieve this in Safari, but for some reason the same HTML code isn't cutting it in Firefox. Here is a jsfiddle of my HTML code: http://jsfiddle.net/WhaGH/
You can't see it in jsfiddle, but if you copy and paste the code into an HTML document and then open it up using Firefox, there is a margin about 21px in height at the top of the page. This top margin does not appear if you open the same HTML file in Safari. I read somewhere else that different browsers use different amounts of default margin and padding with the "html" and "body" tags, hence my inclusion of some CSS in the "head" that sets margin and padding for those tags to 0. Again, this works for Safari but not Firefox (or rather, it works for the left margin but not for the top margin in Firefox). Does anyone know why?
by default Firefox use margin-top: 21.4333px for tag, and to div#header is added to the indentation.
Use padding-top to childs of block to prevent this.
h1 { margin-top: 0px; }
Fix this problem.
You've done the reset of the default values only for body and html, do it for the other elements as well. You might consider to use, in the future, a CSS reset, have a look at HTML5 Boilerplate
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/
you did't clear your header (add one properties overflow:hidden;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">
<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>
</body>
</html>
<style type="text/css">
body { margin: 0; padding: 0; }
h1 { margin: 0; }
</style>
Related
So I am trying to make a simple border for a site, in css:
html{
border-top:3em solid #26282B;
}
I would like to have some white text on top of it, how can I do this? I tried making a class, but it always appears under the border.
You CAN NOT make any text in the border. Use div or something.
Here is the example:
<html>
<head>
<style>
body{margin:0;padding:0;}
.someclass {
width:100%;
height:3em;
background-color:#26282B;
color:white;
}
</style>
</head>
<body>
<div class='someclass'>
Sometext Here
</div>
</body>
</html>
You can put your text in a span or div set a class name and using left, top, right, bottom, fix the position like this:
e.g class="example"
.example {
position:absolute;
left: 5px;
top: 50px;
}
Elsewhere this probably help you:http://www.w3schools.com/tags/tag_legend.asp
You can't write something on top of a border - technically yes, but for all purposes here, no, you can't.
So if you want a text on top a short dark background you write something like that:
In yo HTML:
<div>My suppa text</div>
In yo CSS:
div {
background: #26282B;
color: #fff;
}
<div> here being the first element inside your <body> it still would have a margin before it, that's because of the browser default style.
You can get rid of it by doing that, in yo CSS:
html, body {
margin-top: 0;
padding-top: 0;
}
Now I would suggest you to read about CSS resets.
Yes, you can.
Add this to your style:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
How about this:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
border: 10px solid;
padding: 5px;
}
#title {
float: left;
padding: 0 5px;
margin: -20px 0 0 30px;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Border title</div>
<p>Some content...</p>
</div>
</body>
</html>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
So, the problem is about collapsed margin.
Follow this example : http://jsfiddle.net/2ausj/
code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page</title>
<meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen, tv, projection" href="css/style.css" />
</head>
<body>
<div id="main">
<div id="home" class="main"></div>
<div class="main"></div>
<p></p>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
</div>
</body>
</html>
And Css
html { overflow: hidden;}
body {
background: transparent url('../images/background.jpg') repeat;
}
#main { background: blue; padding: 1px; border: 1px;}
.main {
max-width: 1000px;
height: 200px;
background: red;
margin: 50px auto;
position: relative;
position: absolute;
}
p { height: 1px; }
I have some div. Each have a margin top and bottom of 50px in this case but betwen the divs, there is only 50 px margin instead of 100px
I read lot of articles about collapsing margin, all of them say to set padding or border to the parent. I tried to put div directly in body and set padding to the body, i tried to set padding on my div, i tried to puts my div in a container div and set him padding or border, nothing seem to work.
Only solution i found but it's dirty, as you can see in my example, is put an element betwen div with a 1px height. And then, there is finally 100px betwen divs, even 101 because of 1px .
I wish a greater solution, and also understand why nothing i've tried is working.
Please excuse my bad english (Not my fault, i'm french) and thanks in advance :)
Since your first div has an ID as well as a class you could do this:
Change your .main margin to: margin:0 auto 100px auto;
And add the #home ID with a style of margin-top:100px;
I fiddled with the Fiddle for a few and don't understand why the top and bottom margin of 50px isn't working, but what I have provided above will fix your issue. If this works for you please accept it as answered.
This markup shows my problem:
Webkit browsers seem to create an erroneous width on floated parent elements with floated/overflow:hidden elements inside, when their width is set to 0. Is there a known workaround?
<!DOCTYPE html>
<html>
<head>
<title>float & width</title>
<style type="text/css">
div {
float: left;
height: 50px;
}
div.section {
background-color: green;
}
div.section div.content {
background-color: red;
overflow: hidden;
}
p {
clear: both;
}
</style>
</head>
<body>
<p>width: 0 => Bug</p>
<div class="section">
<div class="content" style="width: 0;">some content that should not affect the parent div's width.</div>
</div>
<p>width: 1px => good</p>
<div class="section">
<div class="content" style="width: 1px;">some content that should not affect the parent div's width.</div>
</div>
</body>
</html>
Do you have a doctype enabled? Page is in quirks mode as of now.
One can get consistent behaviour (at least between webkit and gecko) by giving the outer element some width. Bit of a drag, but doable.
We have an anchor tag floating right inside a header issue. It works fine on IE8 and Firefox.
Any idea how to stop it popping outside the header box?
Here is the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.wrapper { border: 1px solid black; }
.wrapper h3 a { float: right; }
</style>
</head>
<body>
<div class="wrapper">
<h3>Contact Details
Update
</h3>
</div>
</body>
</html>
Put the right floated element first.
<h3>UpdateContact Details</h3>
If you are floating it you need to tell the h3 to clear it. I assume this would work:
.wrapper h3 { overflow:hidden; zoom:1; }
LMK if not. And FYI, I wouldn't put the anchor inside of the h3 like that. I would probably make it a sibling of the h3, if necessary wrap a div around both and then apply the overflow/zoom.
Fixed it. Here are two extra rules that I added in
.wrapper h3 { overflow:hidden; zoom:1; }
.wrapper h3 a { margin: -1em 0 0 0; }