CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 30th, 2003, 01:10 PM
43rdworld 43rdworld is offline
Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Sep 2001
Posts: 28 43rdworld User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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>



Reply With Quote
  #2  
Old June 30th, 2003, 02:18 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
 
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
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

Reply With Quote
  #3  
Old July 1st, 2003, 12:24 PM
43rdworld 43rdworld is offline
Member
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Sep 2001
Posts: 28 43rdworld User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > CSS/XHTML question


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway