#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    29
    Rep 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 &amp; 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 &amp; 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>
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Posts
    29
    Rep 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

IMN logo majestic logo threadwatch logo seochat tools logo