CSS firefox top-margin

Hey,

Im just learning css at the moment and am having an irritating problem with firefox. I have set the top margin to 0 but in firefox this is not viewing properly. have a look at it here

The css code is:

body {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	text-align: center;
	}

#background {
	background-image: url(/website_images/background.jpg);
	}

#wrapper {
	position: relative;
	text-align: left;
	background-image: url(/website_images/buttoned_background.jpg);
	margin-right: auto;
	margin-left: auto;
	width: 650px;
	height: 655px;
	}

p {
	margin-left: 80px;
	margin-top: 20px;
	}

and the html is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dublin Web Design - Ireland</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="website_css/styles.css">
</head>

<body>
<div id="background">
<div id="wrapper">
<p>hsjkshjksha</p>
</div>
</div>

	
</body>
</html>

Anyone know why?

Thanks

it’s the margins on your p tag.

Hey,

Thanks for the reply.

I just tried removing the P tag, now the text has gone back to the top left of the background but i still have the top margin error.

dublin web design

did you upload the changes because the code still has a p tag.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dublin Web Design - Ireland</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="website_css/styles.css">
</head>

<body>
<div id="background">
<div id="wrapper">
<p>hsjkshjksha</p>
</div>
</div>

	
</body>
</html>

Ahhh, thats sorted it, cheers m8 :slight_smile: I removed the p style from my css file but i didnt know i had to remove the p tag from the html code. Does that mean that if you put in a <p> brocket inside a <div> tag that mozilla will always add a line break?

Whenever you get these spaces check to see if you have tags that have some margins or padding set. Even if you haven’t set up the margins/padding yourself you still will inherit the default margins/padding from the tags unless you specify that they are to be set to 0 in your css.

Just another tip… if you want to set your margins/padding on your body tag to 0 you can use a shorthand like


body {
   margin:0;
   padding:0;
}

Hi,

Most elements have default margins/padding and this varies between browsers. You should set all to zero right at the start.


* {margin:0;padding:0}

Then just define them as you go :slight_smile:

Mozilla will collapse adjacent vertical margins and this can be difficult to understand as the margin appears to collapse onto the element above and becomes that elements margin instead. Therefore when you start a div with a p then the default 1em top margin that mozilla applies will collapse to the element above and push that element down instead.

See this link below as it explains it graphically.

http://www.complexspiral.com/publications/uncollapsing-margins/

Even most experienced csss’ers have trouble with this concept and call it a firefox bug but in fact its the correct behavior according to the specs.

To stop margin collapse you can apply borders or padding and then the margins don’t collapse

Most elements have default margins/padding and this varies between browsers. You should set all to zero right at the start.

I used to do that Paul but I found that I spent more time setting up padding and margins etc for all the tags. Do you have any tips to get around this?

Hello

switch them on these margins


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dublin Web Design - Ireland</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
	html,body{/*html for FF Moz NS7 OP */
	text-align:center; /*IE 5 IE 5.5*/
	margin:0;/* no margins body */
	padding:0;/* no padding body */
	height:100%;
	width:100%;
	}

	body{text-align: center;}

	#background {background-image: url(website_images/background.jpg);float:left;width:100%;}

	#wrapper {
	text-align: left;
	background-image: url(website_images/buttoned_background.jpg);
	margin-right: auto;
	margin-left: auto;
	width: 650px;
	height: 655px;
	}

	.top_bar{
	float:left;
	margin:5px 0 5px 10px;
	display:inline;
	width:630px;
	height:25px;
	background-color: #155872;
	color:#ffffff;
	}
	
	head+body #wrapper:after{
	content: ".";
	display: block;
	height:0;
	clear: both;
	visibility: hidden;
	}
	#wrapper p{
	clear:both;
	margin:5px 0 0 10px;
	width:630px;
	height:25px;
	background-color: #155872;
	color:#ffffff;
	}
	* html .fcl{clear:both;height:0px;overflow:hidden;margin-top:0px;}
	head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
	</style>
</head>

<body>

<div id="background">

<div id="wrapper">
<p class="top_bar">hdjas jshjsh jajajhjs jhj sjs</p>
<div class="fcl"></div>
<p>hdjas jshjsh jajajhjs jhj sjs</p>
<p>hdjas jshjsh jajajhjs jhj sjs</p>
</div>

</div>

</body>
</html>

You will have more work to do if you don’t reset then to zero because on every tag you use you will not only have to set all the margins you want but you will also have to set the padding to zero as well just in case as you don’t know what the browsers will apply.

Therefore you will have to apply all margins and padding anyway so there is no extra work involved in my method - in fact there is always less work.

For example a p tag by default has 1em top margin and 1 em bottom margin in mozilla but ie only sets 1em bottom margin. For ul one browsersuses margin-left for the bullet and one browser uses padding-left therefore you have to explicitly set both.

I always start my stylesheet with a basic set up.


* {margin:0;padding:0}
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:1em;}
ul {margin-left:16px;}/* for bullets*/

The above will save on loads of code as you will save things like this for a start.


html,body {margin:0;padding:0}
p {
margin:0 0 1em 0;
padding:0;
}
 etc....

Then when you want to add some padding or margin to a p tag you can just apply it and know that all browsers won’t have any extra padding or margins waiting to pounce on you.

A lot of people get caught out by the form element which have various defaults set on then that will make the layout look different between browsers. There are no set defaults for these elements so its up to you to take control.

Setting all to zero at the start is the only logical way to go :slight_smile:

Thanks for the tip Paul, that’s another bit of code I’ve added to my code snippets

Ok, this is freaking me out been at it for the past hour and a half!!

I am starting my body with a <div id=“wrapper” tag> which i have put in a centered background image. The problem is i also want to add another small background image at the top of my site 5px from the top but if i put in a new tag to hold this background image it puts me a row down from the top. What am i doing wrong???

Hi,

We’d need to see your code but I suspect the question has already been answered in one of the above posts :wink:

Post a link or some more code.

I read the links above but at the moment i cant even get the basics working so i couldnt really get my head around it.

This is my code at the moment:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dublin Web Design - Ireland</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="website_css/styles.css">
</head>

<body>
<div id="wrapper">
<div id="text">js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. js jhsjas jsahj jshjs jhsddj jshj sjhj. </div>

</div>


	
</body>
</html>
body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-image: url(/website_images/background.jpg);
	}

div {
	position: relative;
	margin: 0;
	padding: 0;
	}

#wrapper {
	position: relative;
	text-align: left;
	background-image: url(/website_images/buttoned_background.jpg);
	margin-right: auto;
	margin-left: auto;
	background-position: left top;
	width: 650px;
	height: 655px;
	}

#text {
	text-align: justify;
	margin-top: 340px;
	margin-right: 35px;
	margin-left: 220px;
	}

Hello

why not view/test my code in the browsers ?

Do you mean preview them in browser? If this is what your on about im having problems with that too. Im using Dreamweaver MX and for some reason a few months ago whenever i do a preview of a site the images dont come up. Ive had a look around for a setting to change this back but cant find anything for doing it so i now have to test on a live domain.

Hello

? No ? just view my code in FF IE , i float the container and the first P tag in the container

Oh, got yah. I’ve put that up now. This will work fine but whenever i try any changes of my own things dont work as i expect them to. Maybe i should hit the books again, this is going to take longer than first anticipated!!!

[qoute]
this is going to take longer than first anticipated!!!
[/quote]
There are certain things that need to be learned and css although it is not really difficult it does have rules and structure that must be observed before they will work correctly.

You should always try out code that people offer (such as all4nerds) because quite often they will do what you want (albeit using a different method) but you will learn so much by looking at the code and trying to understand what’s going on.

whenever i do a preview of a site the images dont come up

You should fix that straight away lol :slight_smile:

Look in DW help as it should explain what you want. You probably set up a root relative site instead of just relative.

Mozilla will collapse adjacent vertical margins
btw, this is proper behavior and according to the standard.