CSS/XHTML question

Dev Shed Forums Sponsor:

June 30th, 2003, 01:10 PM

43rdworld

Registered User

Join Date: Sep 2001

Posts: 29

Time spent in forums: 7 m 36 sec
Reputation Power: 0

CSS/XHTML question

I'm trying to re-design our website using standards, CSS and xhtml. The problem I'm having is that if I set the docType to XHTML, the I can't get the layout we need for the site - the left side alwayss works fine but the center section centers no matter what I do. I sure would appreciate someone taking a look at the code below and give a clue as to what I'm doing wrong here. I know I should be able to get rid of the nested table, but when I do, the content goes to the center instead of the left like I want.

I'd eventually like to do away with all the tables but everytime I get a good result in IE, then it looks bad in NN7 & Operal - so the tables have stayed in for now.

Thanks in advance

bob

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Carter & Burgess - <%=title%></title>

<style type="text/css">
body {margin:0; padding:0; background:#fafafa; font-size:8.5pt; line-height:15px; font:8pt/10px Verdana, Arial, Helvetica, san-serif;color:#252525;}

div#wrap 
{
border: 0;
background:transparent url(http://test.c-b.com/images/misc/background.gif) top left repeat-y;
margin:0; 
height:100%;
padding:0 0 2.7em 0;
voice-family: "\"}\""; 
voice-family:inherit;
right: 0;
}

#unLinkedHeader {COLOR: #31317B;FONT-SIZE: 8.5pt;LINE-HEIGHT: 15pt; FONT-WEIGHT: bold;text-align: left;padding:0 0 1 20;}
#paragraph {font-size:8.5pt; line-height:15px; font-weight:normal;color:#252525;padding:0 0 1.5em 0}

table {width:100%; margin:0;}
table td {border-width:0; padding:0; vertical-align:top;font-family: Verdana,Arial, Helvetica, sans-serif; font-size:8pt;line-height:15px;}

.contentLeft{width:211px;padding:18px 0 0 0;}

#center{width:450px;padding:22 0 12 0;}
#pageTitle {margin: 0 0 12px 20; }

.contentImage {width:185px;height:120px;border:0;margin:0 15 0 10;}
</style>
</head>

<div id="wrap">
<table>
<table cellspacing="0">
<tr>
<td class="contentLeft"><img border="0" src="http://test.c-b.com/images/aboutus/aboutus_main.jpg" width="185" height="120 border="0" class="contentImage" /></td>
<td>
<div id="center">
<div id="pageTitle"><img src="http://test.c-b.com/images/aboutUs/why.gif" width="288" height="25" /></div>
<div id="unLinkedHeader">
We're Market Focused.<div id="paragraph">That means we do the work necessary to understand the demands of your business by staying up-to-date on the trends in your market sector. Thus, we can better anticipate your needs.</div>
We're Multidiscipline.<div id="paragraph">From strategic planning to project closeout, Carter & Burgess' multidiscipline, market-focused approach enables you to rely on just one source for many services.</div>
We're Experienced.<div id="paragraph">We create teams with expertise in your market sector. These teams are accustomed to working on large, multiyear projects, yet are equally adept at breaking into smaller groups for quick turn-around assignments.</div>
We're Local.<div id="paragraph">We hire top talent and locate them where they're needed most - more than 2,400 employees in offices in major metropolitan areas across the nation. These aren't project offices.  They're permanent, community-based businesses.</div>
We're National.<div id="paragraph">Backing our local offices are the strengths and resources of a national 2,400-person firm. We can handle large, multiyear projects. We can manage programs spread out over many states. If you need specialized services, we can provide them.</div>
We're Top Ranked.<div id="paragraph">Carter & Burgess consistently ranks among the top national architectural/engineering/construction management firms.</div>
We're Established.<div id="paragraph">Our 60-plus years in continuous practice has taught us what it takes to maintain a viable operation, ensuring we'll be around for decades to come.</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

June 30th, 2003, 02:18 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

you have forgotten to specify lenght unit several times. like

Code:

#center{
	width:450px;
	padding:22 0 12 0;
}

should be:

Code:

#center{
	width:450px;
	padding:22px 0 12px 0;
}

remember to specify a length unit for every value, it is only for 0 its optional.

and one more thing you can't use the same id entity for more than one item.,
you have use <div id="paragraph"> several times
and why use a div as paragraph when you got the <p> tag?

so if you replace <div id="paragraph"> with <p>
you can simply refere to the p
like this
#unLinkedHeader p {font-size:8.5pt .....

and it will refere to every p under the di v #unLinkedHeader

July 1st, 2003, 12:24 PM

43rdworld

Registered User

Join Date: Sep 2001

Posts: 29

Time spent in forums: 7 m 36 sec
Reputation Power: 0

Amazing the difference two little letters can make! Now it works in IE, NN, & Opera. Plus, it's cleaner code. Thanks - I just downloaded the CSS2 spec and have been going through that to learn how to do this right. Appreciate the help.

Bob

CSS/XHTML question

Developer Shed Advertisers and Affiliates