Problem with CSS Site

[Sam0419]

I'm designing a website, and I'm having a few problems with one of the pages. When I look at a live view of the site, I go from menu tab to menu tab selecting what page I want to view. However, one of the pages jumps about an inch to the left when I view it with the text body on it. However, if I take the text out, the page doesn't jump when I live view it. Can anyone suggest a fix? I'm currently in school for Web & Graphic Design, so bare with me while I'm learning.

 

[CaldwellYSR]

It would be more helpful if you posted the code or links to the site or images displaying the problem or a combination of any of the 3.

 

[ronaldroe]

Start off by not viewing it from within Dreamweaver. Live/design view sucks. Besides that, what Caldwell said.

 

[CaldwellYSR]

Are you hand coding this site or drag and dropping? You have empty tags all over the place... Also it helps if you put your code in html tags or code tags so we can see it better. Need to see the css file that's linked in the head. The screen.css file.

 

[Sam0419]

I've been dragging and dropping, I'm currently in the process of learning how to hand code a site, but don't know enough to solely hand code everything. Here is the screen file.

* { margin: 0; padding: 0; }
body {
	background: url(../images/body.gif) repeat;
	color: #000;
	font-size: 14pt;
}
h1 {
	font-size: 24pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h2 {
	color: #000;
	margin: 0 0 15px;
	font-family: "copperplate Gothic Bold";
	font-size: 20pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h3 { font: normal 1.4em "Trebuchet MS", Helvetica, Arial; margin: 0 0 20px; }
h4 { font: normal 1.2em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 4px; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper {
	width: 984px;
	margin: auto;
}
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
	#logo h1 a {
	color: #000;
	font-size: 40px;
}
		#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
	#menu li {
	float: left;
	font-size: 12pt;
	text-transform: uppercase;
}
		#menu li a {
	color: #000;
	margin: 0 50px 0 0;
}
			#menu li a.current, #menu li a:hover {
	color: #666;
}			
	#pitch { clear: both; background: url(../images/pitch.jpg) no-repeat; height: 228px; margin: 0 0 30px; padding: 60px 360px 0 30px; }
		#pitch h1 { font-size: 2.4em; color: #304D6F; margin: 0 0 20px; }
		#pitch em { font-size: 1.3em; font-weight: bold; line-height: 1.6em; }
.content {
	background: url(../images/content.gif) repeat;
	padding: 19px;
}
.link { background: #304D6F; color: #fff; padding: 5px 10px; font-size: .9em; }
#main { padding: 20px; }
.col {
	float: left;
	width: 0px;
	margin-top: 0;
	margin-right: 30px;
	margin-bottom: 15px;
	margin-left: 30px;
}
	.col.last { float: right; margin-right: 0; }
	.case img { float: left; clear: left; margin: 0 20px 20px 0; background: #121212; padding: 3px; }
	.short { padding: 0 0 15px 0; background: url(../images/line.gif) repeat-x left bottom; }
	.case a, .article a { color: #ddd; font-weight: bold; }
	.date { font-size: .84em; margin: 0 0 3px; }
#footer {
	clear: both;
	background: url(../images/line.gif) repeat-x;
	padding: 20px 20px 10px;
	font-size: 9pt;
}
	#footer a {
	color: #000;
	margin: 0 10px 0 0;
	border-bottom: 1px dotted #444;
	padding: 0 0 1px;
}
	#links { float: right; }
	#links a { margin: 0 0 0 10px; }
	#footer p { margin: 0 0 8px; }

 

[Sam0419]

GOOD GRIEF. The reason the page moves slightly to the left is because the contact page is longer and has a scroll bar on the right, and the others are short and to not require you to scroll down.

Well now that I've figured that out, if anyone has any other advice, I'll gladly take it.

 

[d a v e]

you need to stack your fonts - so always offer some of the web safe(r) fonts after the one you would ideally like, ending in a generic serif, san-serif etc.
so not:
font-family: "copperplate Gothic Bold";

but e.g. font-family: "copperplate Gothic Bold", Georgia, "New York", "Times New Roman", Times, serif;

also don't use points for screen (only for your print stylesheet) use px or preferable % or ems

i usually set a font size on the body
body {font-size:62,5%;} which allows me to use ems that correspond to pixel sizes thus
h1 {font-size: 2.4 em;} gives a 24px heading

 

[CaldwellYSR]

I've been dragging and dropping, I'm currently in the process of learning how to hand code a site, but don't know enough to solely hand code everything. Here is the screen file.

*/

* { margin: 0; padding: 0; }
body {
	background: url(../images/body.gif) repeat;
	color: #000;
	font-size: 14pt;
}
h1 {
	font-size: 24pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h2 {
	color: #000;
	margin: 0 0 15px;
	font-family: "copperplate Gothic Bold";
	font-size: 20pt;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h3 { font: normal 1.4em "Trebuchet MS", Helvetica, Arial; margin: 0 0 20px; }
h4 { font: normal 1.2em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 4px; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper {
	width: 984px;
	margin: auto;
}
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
	#logo h1 a {
	color: #000;
	font-size: 40px;
}
		#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
	#menu li {
	float: left;
	font-size: 12pt;
	text-transform: uppercase;
}
		#menu li a {
	color: #000;
	margin: 0 50px 0 0;
}
			#menu li a.current, #menu li a:hover {
	color: #666;
}			
	#pitch { clear: both; background: url(../images/pitch.jpg) no-repeat; height: 228px; margin: 0 0 30px; padding: 60px 360px 0 30px; }
		#pitch h1 { font-size: 2.4em; color: #304D6F; margin: 0 0 20px; }
		#pitch em { font-size: 1.3em; font-weight: bold; line-height: 1.6em; }
.content {
	background: url(../images/content.gif) repeat;
	padding: 19px;
}
.link { background: #304D6F; color: #fff; padding: 5px 10px; font-size: .9em; }
#main { padding: 20px; }
.col {
	float: left;
	width: 0px;
	margin-top: 0;
	margin-right: 30px;
	margin-bottom: 15px;
	margin-left: 30px;
}
	.col.last { float: right; margin-right: 0; }
	.case img { float: left; clear: left; margin: 0 20px 20px 0; background: #121212; padding: 3px; }
	.short { padding: 0 0 15px 0; background: url(../images/line.gif) repeat-x left bottom; }
	.case a, .article a { color: #ddd; font-weight: bold; }
	.date { font-size: .84em; margin: 0 0 3px; }
#footer {
	clear: both;
	background: url(../images/line.gif) repeat-x;
	padding: 20px 20px 10px;
	font-size: 9pt;
}
	#footer a {
	color: #000;
	margin: 0 10px 0 0;
	border-bottom: 1px dotted #444;
	padding: 0 0 1px;
}
	#links { float: right; }
		#links a { margin: 0 0 0 10px; }
	#footer p { margin: 0 0 8px; }

if you put the code into code tags it looks a lot better. and it doesn't stretch the page. You're always going to run into problems with the drag and drop method. There are really good tutorials online at w3schools or Net Tuts+ the w3schools one is text tutorials and the net tuts+ one is video tutorials. Whichever works better for you. Also if you don't mind paying (or torrenting) there's Lynda.com

 

[PixelPusher]

...
e.g. font-family: "copperplate Gothic Bold", Georgia, "New York", "Times New Roman", Times, serif;

also don't use points for screen (only for your print stylesheet) use px or preferable % or ems

i usually set a font size on the body
body {font-size:62,5%;} which allows me to use ems that correspond to pixel sizes thus
h1 {font-size: 2.4 em;} gives a 24px heading

Excellent advice. Ems all the way; they provide the best font scaling.