CSS - New To Css, And I Have A Text Problem.

hi, im attempting to build a page using dreamweaver cs4, the problem i have is...


for example,

i want this text BIG and this text RED but if i give the word big a class then this happens...

i want this text BIG

and this text RED but if i give the word red a class or the word big a class then this happens...

how do i keep it all on the same line without a new paragraph being forced upon me?, i also wanted to start the paragraph with a larger font letter

e.g

W elcome

thanks

My text is going behind a image in ie but not firefox its the number at the top right.

site here

Code:

/* CSS Document */

html {
	background: url(../images/bg.gif);
	background-repeat:repeat-x;
}

body {
	padding: 0;
	margin: 0;
	font-family: Myraid Pro, Arial , serif;
}

#wrapper{
	width: 977px;
	margin: 0 auto;
}

#headertop {
	background: url(../images/top.png) no-repeat;
	width: 977px;
	height:41px;
	margin-top: 30px;
	
}

#headertop p {
	float:right;
	margin: 30px 30px 0 0;
	font-family: Myraid Pro, Arial , serif;
	font-size:20px;
	color: #9a151c
}

#header {
	background: #fff;
	margin: 0 0 0 9px;
	width: 960px;
	height:101px;
	
}

#logo {
	background: url(../images/logo.jpg);
	width: 314px;
	height: 77px;
	margin-left: 40px;
}

#nav {

	float: right;
	margin:  -40px 20px 0 0;
}

#nav ul {
	list-stlye-type:none;
}

#nav li {
	display: inline;
	margin: 0 2px 0 9px;
	color: #000;
}

#nav a {
	text-decoration: none;
	color: #000;
}

#banner {
	background: #fff url(../images/banner1.jpg) no-repeat 25px 25px;;
	width: 911px;
	height: 297px;
	padding: 0 49px 0 0;
	margin: 0 0 0 9px;
}

I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue.

For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me.

Thanks!

Here's my HTML:
Code:

<center>
<div id="hpMaincanvas">

<? include('includes/topnav.php'); ?>

<div id="aboutArea">
<h2>About VERVANO</h2>

VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections 
with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P>

This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P>
Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and 
building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this 
process has been met with rigorous research and challenging sourcing.<P>

Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are 
rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P>

It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home.
Thanks for your interest and support of our endeavor.
<br><img src="art/space.gif" alt="" height=12 width=1><br>


<img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2>

<span class="label">EDUCATION AND BACKGROUND</span><br>
Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992.  
She went on to manage and design large scale, multi-million dollar interior design 
and architecture projects for the United States Air Force Academy.  She later 
enrolled in the University of Texas at Austin in 2000 and received a Masters Degree 
in Architecture with emphasis in Sustainable Design.  Through her architectural 
background she developed a contextual understanding of buildings as integrated 
systems. Following her graduation from the University of Texas she subsequently 
worked in complex hospitality design and architecture in Austin, TX, giving her a 
unique and real-world perspective regarding many attributes of public space design. <P>
 
<span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br>
Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention 
to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates 
architectural and interior design solutions to create on budget, on time, functional environments.  <P>
 
<span class="label">SUSTAINABILITY & LEED</span><br>
Laura Britt designs are based on the vision and mission of the end user.  Laura Britt Design firm is 
recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff.  <P>
 

<span class="label">OUR TEAM</span><br>
The design team has approximately 75 years of cumulative experience and training. Each is professionally 
trained to identify the key factors driving the architecture and design and construction of each building 
project with the facilities team and architecture team. 
Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site 
quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and 
rendering. <P>

<span class="label">Associations</span><br>
Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>.
<br><img src="art/space.gif" alt="" height=8 width=1><br>
Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned 
Business.  HUB certification was granted in November or 2008.  The firm is also listed on the states Central 
Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br>

Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time, 
on-budget projects through continuing business education and the sharing of best practices.<P>

</div>


<? include('includes/footer.php'); ?>
</center>

Here's my CSS:
Code:

body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   color: #645133;
   background: url(art/bg.jpg);    
   background-repeat: no-repeat;
   background-position: center top;
}
 
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 30px;
   font-weight: lighter;
   color: #49320f;
}
 
h2 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color: #49320f;
   margin-top: -20px;
   font-weight: lighter;
   line-height: 36px;
}

#hpMaincanvas {
   position: relative;
   padding: 0px;
   width: 900px;
   margin-top: 35px; 
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff; 
   z-index:5;
}


#socialMedia {
   position: relative;
   font-family: georgia,palatino,serif;
   font-size: 12px;
   color: #bbb38c;
   line-height: 17px;
   font-style: italic;
   padding-right: 50px;
   width: 900px;
   text-align: right;
}


#MainArea {
   position: relative;
   padding-right: 50px;
   padding-top:0px;
   width: 900px;
   text-align: center;
   z-index:20;
}

#AboutArea {
   position: relative;
   padding-right: 50px;
   padding-left: 50px;
   padding-top:30px;
   width: 800px;
   z-index:20;
   text-align:left;
}

#footer {
   position: relative;
   text-align: center;
}


#navigation {
   position: absolute;
   top:40px;
   width: 600px;
  left: 320px;
   font-weight: normal;
	z-index:25;
	margin-left: auto ;
  margin-right: auto ;

}


li {
   list-style: none;
   float: left;
   position:relative;
}


ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  }

ul li {
  display: block;
  position: relative;
  float: left;

}
  
li ul {
  display: none;
  border: 1px solid #e2ddbe;
  }


ul li a {
  display: block;
  text-decoration: none;
  text-align:left;
  color: #594425;
  padding: 7px 7px 7px 7px;
  white-space: nowrap;
  
}
ul li a:hover { 
color: #d93800;
 }
 
li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
  background: #efede1;;
}

li:hover a { 
 
}


li:hover li a:hover 
{ background: #ffffff; }

.logo {
	position: absolute;
	top: 30px;
	left: 50px;
}

.label {
	font-family: Helvetica, Arial, sans-serif;
  	font-size: 11px;
  	text-transform: uppercase;
	line-height: 19px;
	letter-spacing: 2pt;
	color: #a99573;
}

.copyright {
	font-family:georgia,times,serif;
	font-size:11px;
	color:#beb692;
	text-align:center;
}

a.copyright, a.copyright:link, a.copyright:visited {
	text-decoration:none;
	font-family: georgia,times,serif;
	font-size: 11px;
	text-align:center;
}

a.copyright:hover {
	text-decoration:underline;
}

.middle, .submit {
	vertical-align: middle
}

I use centered css layout on my site. There is a problem with IE on one page. Sometimes main layer content comes hidden but only text content. Like this:
http://img351.imageshack.us/img351/5152/hidden1zu.jpg
When on mouse over to the table cells text comes. Like this:
http://img351.imageshack.us/img351/1853/nothidden2pe.jpg

No problem with Firefox or Opera.
The page url is:
http://www.limk.com/sonyorumz.php

Can you help me about finding the solution?

I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text.

However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox.

However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML.

Is there a way to fix this or am I going to have to go back to JavaScript?

[code]
css:
body {
background: url(images/sips_menu.gif) no-repeat;
}

a.con {
z-index: 1;
}

a.menu {
z-index: 2;
}

/*set whole page as an invisible link*/

a.con:link,a.con:visited,a.con:hover,a.con:active {
background-color: transparent;
display: block;
border: none;
position: absolute;
top: 0px;
left: 0px;
width: 790px;
height: 540px;
text-decoration: none;
cursor: default;
}

/*set span for whole page as visible only when hovering over page*/

a.con span {
display:none;
}

a.con:hover span {
color: black;
font-weight: normal;
display: block;
text-decoration: none;
font-size: 11px;
font-family: arial, sans-serif;
text-align: left;
position: absolute;
top: 125px;
left: 580px;
width: 170px;
height: 150px;
}

/*menu links - when mouse is over these it is not over general page anchor*/

a.menu:link,a.menu:visited,a.menu:hover,a.menu:active {
background-color: white;
border: 1px solid black;
color: #617AB2;
font-size: 12px;
font-weight: bolder;
font-family: arial, sans-serif;
text-decoration: none;
text-align: left;
padding: 4px 6px 4px 6px;
}

a.menu:hover {
color: red;
}

/*menu link rollover text visible when mouse over*/

a.menu span {
display: none;
}

a.menu:hover span {
color: black;
font-weight: normal;
display: block;
}

/* Ids to position each of the menu links */

#one {
position: absolute;
top: 180px;
left: 20px;
}

#two {
position: absolute;
top: 250px;
left: 250px;
}

#three {
position: absolute;
top: 380px;
left: 220px;
}

#four {
position: absolute;
top: 320px;
left: 420px;
}

#five {
position: absolute;
top: 450px;
left: 565px;
}

/* Ids to position the span tags*/
#a {
position: absolute;
top: -55px;
left: 560px;
width: 170px;
}

#b {
position: absolute;
top: -125px;
left: 330px;
width: 170px;
}

#c {
position: absolute;
top: -255px;
left: 360px;
width: 170px;
}

#d {
position: absolute;
top: -195px;
left: 160px;
width: 170px;
}

#e {
position: absolute;
top: -325px;
left: 15px;
width: 170px;
}

xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!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>title</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<p><a class="con" href="#"><span>text</span></a></p>
<p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p>
<p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p>
<p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p>
<p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p>
<p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p>
</body>
</html>