not recognizing certain styles

3 replies [Last post]

Mon, 2010-08-23 22:00

susitsky

Offline

newbie

Timezone: GMT-5

Joined: 2010-08-23

Posts: 1

Points: 2

I'm used to coding all of my pages using tables, so I am new to laying them out in CSS and I'm having some trouble. For some reason, some style attributes are showing up and others aren't. For instance, the main content area is only supposed to be 800 pixels wide so that there's 50 pixels of white space on each side (but it looks like it's 900 wide and is going all the way to the edges). Also, the tags don't seem right, and the tiny link at the bottom should be tan, but it showing up red. Is there some hierarchy that is mixing things up for me?

Here's my HTML:

<body bgcolor="#FFFFFF">
 
 
<div id="hpMaincanvas">
 
<? include('includes/topnav.php'); ?>
 
<div id="aboutArea">
<h3>About Vervano</h3>
 
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=25 width=1><br>
 
 
<h3>About Laura Britt Design</h3>
 
<img src="art/laura.jpg" vspace=10 class="photo" align=left alt="Laura Britt, founder of Vervano">
 
<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="http://www.sustainablefurnishings.org" 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'); ?>
 
</body>

Here's my CSS:

/* Generic Selectors */
 
body {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 12px;
   color: #645133;
   background: url(art/tn_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;
}
 
h3 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18px;
   color: #49320f;
   font-weight: lighter;
   line-height: 18px;
}
 
 
/************************* ID's *************************/
 
 
#hpMaincanvas {
   position: relative;
   padding: 0px;
   width: 900px;
   margin-top: 35px; 
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff; 
   z-index:5;
}
 
 
#socialMedia {
   position: absolute;
   font-family: georgia,palatino,serif;
   font-size: 12px;
   color: #bbb38c;
   line-height: 17px;
   font-style: italic;
   padding-right: 50px;
   width: 900px;
   text-align: right;
}
 
#socialMedia a:link {color: #bbb38c;text-decoration:none;}
#socialMedia a:visited {color: #bbb38c;text-decoration:none;}
#socialMedia a:hover {color: #bbb38c;text-decoration:none;}
 
 
#aboutArea {
   position: relative;
   padding-right: 50px;
   padding-left: 50px;
   margin-top:30px;
   width: 800px;
   z-index:20;
   text-align:left;
}
 
#aboutArea a:link {color: #d93800;text-decoration:none;}
#aboutArea a:visited {color: #d93800;text-decoration:none;}
#aboutArea a:hover {color: #d93800;text-decoration:none;}
 
#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; }
 
.photo {
padding-right:20px;
padding-bottom:20px;
}
 
.logo {
	position: absolute;
	top: 30px;
	left: 50px;
}
 
.smallred {
	color: #d93800;
   font-family: Helvetica, arial, sans-serif;
   font-size: 11px;
   text-decoration: none;
}
 
a.smallred {
   color: #d93800;
   font-family: Helvetica, arial, sans-serif;
   font-size: 11px;
   text-decoration: none;
}
 
 
.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;
	color:#beb692;
}
 
a.copyright:hover {
	text-decoration:underline;
}
 
.middle, .submit {
	vertical-align: middle
}

Tags:

CSS Styling

Mon, 2010-08-23 22:10

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Can you post all the HTML?

Can you post all the HTML? And not the PHP server-side code; copy and paste from the browser.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mon, 2010-08-23 23:04

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

Well, you set it to 900px.

Well, you set it to 900px. It's only doing what you told it to.

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Mon, 2010-08-23 23:05

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

Unless you are talking

Unless you are talking about

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

In which case 800+50+50 = 900

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

not recognizing certain styles

Can you post all the HTML?

Well, you set it to 900px.

Unless you are talking

New forum topics

User login

Navigation