CSS/XHTML question

Dev Shed Forums Sponsor:

June 30th, 2003, 01:10 PM

43rdworld

Member

Join Date: Sep 2001

Posts: 28

Time spent in forums: < 1 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: 2,622

Time spent in forums: 3 Weeks 6 Days 2 h 19 m 51 sec
Reputation Power: 548

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

Member

Join Date: Sep 2001

Posts: 28

Time spent in forums: < 1 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

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: