Text is not alligned on the left hand side.

fiveub's Slave
Associate
Joined
1 Sep 2007
Posts
1,461
Location
OcUK HQ
http://davies5.co.uk/amy.htm

The text is not aligned on the left hand side. Why is this?

Thanks, Ben.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Davies5 - Amy</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
</head>
<body>
<div id="container">
	<div id="header">
		<img src="images/banner.png" width="750" height="125"/> 
	</div>
	<ul id="menu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="rob.htm">Rob</a></li>
		<li><a href="nicky.htm">Nicky</a></li>
		<li><a href="ben.htm">Ben</a></li>
		<li><a href="thomas.htm">Thomas</a></li>
		<li><a href="amy.htm">Amy</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
			<h1>Amy</h1>
<p>	Hi, my names Amy Davies and im 9 years old. I was born on the 5th March 1998. I 
	<b>love</b> Hannah Montana and High School Musical 2. My favourite Hannah Montana
	Song is "Nobody's Perfect", and my favourite High School Musical song is "Everyday.
	My favourite colour is pink.</p>
<h2>Hobbies</h2>
<p>My hobbies include skiing, recorder, gymastics and brownies. I have been Skiing to 
	France 3 times. I have recorder lessons on a Thursday and I practise everyday. 
	I do my Gymnastics once a week on a Saturday morning and i do Brownies on a Tuesday. </p>
	
		</div>
	</div>
	<div id="footer">
		<em>Copyright © ; 2007, Ben Davies.</em>
	</div>
</div>
</body>
</html>

Code:
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: tahoma, garamond, times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;                                /* fixes firefox bug */
	display: block;
}

#container {
	background: #285a97 url("images/nav.png") top left repeat-y;
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	height: 125px;
}

#menu {
	float: left;
	list-style: none;
	width: 200px;
}
	#menu li {
		float: left;
		width: 200px;
	}

	#menu a {
		background: transparent;
		color: #FFF;
		display: block;
		font: 20px/20px georgia, helvetica, sans-serif;
		height: 1%;
		margin-right: 20px;
		padding: 8px 0;
		text-decoration: none;
		text-indent: 30px;
		text-align: left;
	}
	#menu a:hover {
		color: #FFD700;
	}

#content {
	background: #FFF;
	color: #000;
	margin-left: 175px;
	min-height: 600px;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}

* html #content {
	height: 600px;                              /* for ie */
}
	#content .wrapper {
		padding: 1em;
	}

	#content p {
		margin: 0.5em 0;
	}

#footer {
	background: #FFF;
	clear: left;
	color: #000;
	padding-top: 16px;
	text-align: center;
	border-top: 1px solid #000;
}
	#footer em {
		border-top: 2px solid #000;
		display: block;
		font: normal 100%/140% tahoma, helvetica, sans-serif;
		margin: 0 auto;
		padding: 0.5em 3em;
		width: 24em;                                                        /* DO NOT CHANGE THIS VALUE */
	}


ALSO - In IE the border and navigation bar are different colour shades of blue - why is this? In firefox its fine.
 
It is aligned to the left with me but the content is wrapping around the widths differently set to the navigation, changed this and it was fine:

Code:
#menu {
	float: left;
	list-style: none;
	width: 190px;
}

sorry can't test ie here at the moment. Oh and the colours are displaying differently here on Safari, it's due to icc colour profiles and preset gamma iirc, google for "safari colour problem" or similar to that, something to do with sRGB.
 
Last edited:
Solution for the different border colours can be solved by removing the background colour from your image, so that just the text and text shadow is there and nothing else.

If you used photoshop to create the banner image then it should be just a matter of deleting the background layer or use the magic eraser thingy.
 
Back
Top Bottom