Web Design Forums

Dirti · 15-08-2006, 13:41

I've added <p> tags for text on a site but the page has gone all screwy now. I have two big gaps on the page before and after the tags. I've got no idea why it's doing this but it's damn annoying. I even put it through the W3 validator, came back with 0 errors. Any help much appreciated.

image: http://img49.imageshack.us/my.php?image=ptagzp1.jpg
Code:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.DOKCIN.webdesign.</title>
<style type="text/css">
/*start nav*/
div#links{background-color:#000; width:700px;}
div#links a:link{color: #FFD9D9; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:bold; text-decoration:none;}
div#links a:visited{color: #FFD9D9; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:bold; text-decoration:none;}
div#links a:hover{color:#FFD9D9; border-bottom:#FFF 3px solid;}
/*end nav*/
html{background:url(../gfx/bg.jpg); font-family:"Trebuchet MS", Tahoma, Arial; color:#000;}
body{margin:0px}
div#header{background-image:url(../gfx/header3.jpg); width:700px; height:70px;}
div#top_content{background-image:url(../gfx/top.jpg); width:700px; height:18px;}
div#mid_content{background-image:url(../gfx/mid.jpg); width:700px; font-size:12px; letter-spacing:.1em; line-height:180%;}
div#bottom_content{background-image:url(../gfx/bottom.jpg); width:700px; height:26px;}
div#page_text{width:600px;}
</style>
</head>

<body>
<div id="container" align="center">
<div id="header"></div>
<div id="links">
<a href="#">Home</a> - 
<a href="#">About</a> - 
<a href="#">Portfolio</a> - 
<a href="#">Pricing</a> - 
<a href="#">Contact Me</a> 

</div>
<div id="top_content"></div>
<div id="mid_content"><div id="page_text" align="left">
<p id="welcome"><b>Hello there!</b></p>
<p id="parag">blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah blah blah blah yadda yadda etc blah blah blah yadda pancakes blah blah </p>
</div>
</div>
<div id="bottom_content"></div>
</div>

</body>
</html>

adras · 15-08-2006, 14:49

If you don't want any gaps, then just set the top, bottom margins to zero for #welcome and #parag

pgo · 15-08-2006, 15:16

<p>s have a default margin in most browsers.

Dirti · 15-08-2006, 16:09

Ahh right, great. Thanks guys, all is fixed now

pgo · 15-08-2006, 16:58

A handy trick I use at the beginning of all my stylesheets is the "global whitespace reset":

* {
padding: 0;
margin: 0;
}

That'll reset the padding and margins on all elements to zero in all browsers. Of course, you then have to assign padding and margins to all elements that need them, but it gives you greater control and you can avoid problems like the one you were having.

JetBlackNinja · 16-08-2006, 12:36

Quote:

Originally Posted by pgo

A handy trick I use at the beginning of all my stylesheets is the "global whitespace reset":

* {
padding: 0;
margin: 0;
}

That'll reset the padding and margins on all elements to zero in all browsers. Of course, you then have to assign padding and margins to all elements that need them, but it gives you greater control and you can avoid problems like the one you were having.

Your rule, if I was a kitten I would lick you. This answered the question I had yet to ask, but was driving me INSANE.

pgo · 16-08-2006, 12:50

Quote:

Originally Posted by JetBlackNinja

if I was a kitten I would lick you

Uh.

Vlad · 16-08-2006, 12:56

By the way, there's no need to write div#links for example. You could just write #links. When you have a big stylesheet, it saves a couple of bytes.

pgo · 16-08-2006, 14:08

Unless you expect on one page to have a div#links and on another a ul#links. For example.

JetBlackNinja · 16-08-2006, 14:54

Quote:

Originally Posted by pgo

Unless you expect on one page to have a div#links and on another a ul#links. For example.

I thought you could onl use an ID once regardless?

pgo · 16-08-2006, 16:04

Why would it be bad practice to use the same id on two different elements on different pages?

Not that I do ever do it, but just for the sake of argument.

pgo · 16-08-2006, 17:50

I do exactly the same. I'm just being facetious. I'd hardly call using the same id on different elements (on different pages, of course) a "bad practice".

Anyway.

funkyprem · 17-08-2006, 05:38

I don't do this because i'm simple and easily confused. Anything I can do to avoid this situation I will happily do.

This is my only rationale for using unique id names. screw the validator.

15-08-2006, 14:49	#2 (permalink)
adras Zły Join Date: May 2004 Location: Toronto, Canada Posts: 1,920	If you don't want any gaps, then just set the top, bottom margins to zero for #welcome and #parag __________________ Be Crisp (tm)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

15-08-2006, 15:16	#3 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	<p>s have a default margin in most browsers.

15-08-2006, 16:09	#4 (permalink)
Dirti Professional Idiot Join Date: Aug 2006 Location: Uk Posts: 59	Ahh right, great. Thanks guys, all is fixed now

15-08-2006, 16:58	#5 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	A handy trick I use at the beginning of all my stylesheets is the "global whitespace reset": * { padding: 0; margin: 0; } That'll reset the padding and margins on all elements to zero in all browsers. Of course, you then have to assign padding and margins to all elements that need them, but it gives you greater control and you can avoid problems like the one you were having.

16-08-2006, 12:56	#8 (permalink)
Vlad Design or die Join Date: Jun 2006 Location: Ottawa, Canada Posts: 137	By the way, there's no need to write div#links for example. You could just write #links. When you have a big stylesheet, it saves a couple of bytes.

16-08-2006, 14:08	#9 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	Unless you expect on one page to have a div#links and on another a ul#links. For example.

16-08-2006, 16:04	#11 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	Why would it be bad practice to use the same id on two different elements on different pages? Not that I do ever do it, but just for the sake of argument.

16-08-2006, 17:50	#12 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	I do exactly the same. I'm just being facetious. I'd hardly call using the same id on different elements (on different pages, of course) a "bad practice". Anyway.

17-08-2006, 05:38	#13 (permalink)
funkyprem For all your goober needs Join Date: Dec 2004 Location: Coventry, UK Posts: 1,456	I don't do this because i'm simple and easily confused. Anything I can do to avoid this situation I will happily do. This is my only rationale for using unique id names. screw the validator.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)