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

    Join Date
    Feb 2007
    Posts
    5
    Rep Power
    0

    Question PLEASE HELP - website not displaying correctly on older versions of IE


    I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7.

    When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.)

    I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated.

    I'v attached screen shots of the correct and incorrect layouts.

    I have 2 css formatting files: setup and text

    Here's SETUP.CSS:

    /* NON-HEADER */
    *{padding:0; margin:0;}
    body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/
    .page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;}
    .page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;}
    .main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;}
    .main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

    /* --- For alternative headers START PASTE here --- */

    /* HEADER */
    .header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;}
    .header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;}
    .header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;}

    /*******************/
    /* HEADER SECTION */
    /*******************/
    .sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }
    .sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
    .sitename h1 {font-size: ;}
    .sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;}
    .sitename a {text-decoration:none; color:rgb(125,125,125);}
    .sitename a:hover {text-decoration:none; color:rgb(50,50,50);}

    .nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;}
    .nav0 ul {float:right; padding:0 20px 0 0;}
    .nav0 li {display:inline; list-style:none;}
    .nav0 li a {padding:0 0 0 3px;}
    .nav0 a:hover {text-decoration:none;}
    .nav0 a img {height:14px; border:none;}

    .nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;}
    .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}
    .nav1 li {display:inline; list-style:none;}
    .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;}
    .nav1 a:hover {text-decoration:none; color:rgb(145,145,145);}

    .sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;}
    .sitemessage h1 {width:400px; text-align:right; font-size:230%;}
    .sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;}
    .sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;}
    .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);}
    .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);}

    /*Drop-down menu*/
    .nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/
    .nav2 ul {list-style-type:none;}
    .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; }
    .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);}
    .nav2 ul li ul {display:none; border:none;}

    /*Non-IE6 hovering*/
    .nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/
    .nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;}
    .nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
    .nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/

    /*IE6 hovering*/
    .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
    .nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/
    .nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;}
    .nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
    .nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/


    .header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;}
    .header-top .searchform form fieldset {float:right; border:none;}
    .header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; }
    .header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;}
    .header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);}

    /******************/
    /* MAIN SECTION */
    /******************/

    /* MAIN CONTENT */
    .column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
    .column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;}
    .column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

    /********************/
    /* FOOTER SECTION */
    /********************/
    .footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
    .footer p.credits {font-weight:normal;}
    .footer a {text-decoration:underline; color:rgb(125,125,125);}
    .footer a:hover {text-decoration:none; color:rgb(0,0,0);}
    .footer a:visited {color:rgb(0,0,0);}

    /******************/
    /* CLEAR FLOATS */
    /******************/
    .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);}

    Here's TEXT.CSS:

    /******************/
    /* MAIN SECTION */
    /******************/

    /* MAIN CONTENT */
    .main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;}
    .main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;}
    .main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;}
    .main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
    .main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;}
    .main-content h1.side {clear:none;}
    .main-content h2.side {clear:none;}
    .main-content h3.side {clear:none;}

    .main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;}
    .main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;}
    .main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;}
    .main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
    .main-content p.center {text-align:center;}
    .main-content p.right {text-align:right; margin-right: 10px}
    .main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
    .main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

    .main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
    .main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;}
    .main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;}
    .main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
    p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;}

    .main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}
    .main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
    .main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;}
    .main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

    .contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
    .contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
    .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
    .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
    .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
    .contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

    .loginform {width:160px; margin:-10px 20px 0 20px;}
    .loginform p {clear:both; margin:0; padding:0;}
    .loginform fieldset {width:160px; border:none;}
    .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
    .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
    .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
    .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
    .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
    .loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

    /********************/
    /* COMMON CLASSES */
    /********************/
    .main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);}
    .main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);}
    .main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);}

    .main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;}
    .main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;}
    .main a:hover {color:rgb(42,90,138); text-decoration:underline;}
    .main a:visited {color:rgb(42,90,138);}

    .main a img {border:solid 1px rgb(150,150,150);}
    .main a:hover img {border:solid 1px rgb(220,220,220);}
  2. #2
  3. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    You need to post a link to the page in question.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2007
    Posts
    5
    Rep Power
    0
    spangrp.com/test.html

    Thanks and here's the html if you need it:

    Code:
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta http-equiv="cache-control" content="no-cache" />
      <meta http-equiv="expires" content="3600" />
      <meta name="revisit-after" content="2 days" />
      <meta name="robots" content="index,follow" />
      <meta name="publisher" content="Your publisher infos here ..." />
      <meta name="copyright" content="Your copyright infos here ..." />
      <meta name="author" content="Design: Mortrix" />
      <meta name="distribution" content="global" />
      <meta name="description" content="Investment and Risk Management" />
      <meta name="keywords" content="real estate, development, construction, investment, management, finance, risk" />
      <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/setup.css" />
      <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/text.css" />
      <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 
      <link rel="icon" href="img/favicon.ico" type="image/x-icon">
      <title>SPAN Group - Investment and Risk Management</title>
    </head>
    
    <!-- Global IE fix to avoid layout crash when single word size wider than column width -->
    <!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->
    
    <body>
      <!-- Main Page Container -->
      <div class="page-container">
    
       <!-- For alternative headers START PASTE here -->
    
        <!-- A. HEADER -->      
        <div class="header">
          
          <!-- A.1 HEADER TOP -->
          <div class="header-top">
            
            <!-- Sitelogo and sitename -->
            <a class="sitelogo" href="index.html" title="Home"></a>
    
            <!-- Navigation Level 1 -->
            <div class="nav1">
              <ul>
                <li><a href="index.html" title="Home">HOME</a></li>
                <li><a href="temp.html" title="Contact Us">CONTACT</a></li>
                <li><a href="temp.html" title="Sitemap">SITEMAP</a></li>													  </ul>
    	
    		<!--<ul><form action="index.html" method="get">
    
                  <input name="field" class="field"  value=" Search..." />
                  <input type="submit" name="button" class="button" value="GO!" />
              </form>
            </ul>-->
            </div>              
          </div>
          
    
          
          <!-- A.3 HEADER BOTTOM -->
          <div class="header-middle">
          
            <!-- Navigation Level 2 (Drop-down menus) -->
            <div class="nav2">
    	
              <!-- Navigation item -->
              <ul>
    			<li><a href="temp.html">ABOUT US<!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                      <li><a href="temp.html">OUR BUSINESS</a></li>
                      <li><a href="temp.html">MISSION</a></li>
                      <li><a href="temp.html">VALUES</a></li>
                      <li><a href="temp.html">AFFILIATIONS</a></li>                                    
                    </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>
              
              <!-- Navigation item -->
              <ul>
                <li><a href="#">DEVELOPMENT<!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                      <li><a href="temp.html">TURN-KEY</a></li>
                      <li><a href="temp.html">PROPERTY MANAGEMENT</a></li>
                      <li><a href="temp.html">BROKERAGE</a></li>                                    
                    </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>          
    
              <!-- Navigation item -->
              <ul>
                <li><a href="#">INVESTMENTS<!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                      <li><a href="temp.html">VALUE-ADDED</a></li>
                      <li><a href="temp.html">PORTFOLIO MANAGEMENT</a></li>
                      <li><a href="temp.html">CONSULTING</a></li>
                    </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>   
    		  
    		  <!-- Navigation item -->
    		  <ul>
                <li><a href="#">RISK MANAGMENT<!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                      <li><a href="temp.html">ASSESSMENT</a></li>
                      <li><a href="temp.html">ANALYSIS</a></li>
                      <li><a href="temp.html">PROTECTION</a></li>
                    </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>
    		  
    		  <!-- Navigation item -->
    		  <ul>
                <li><a href="temp.html">CONTACT US<!--[if IE 7]><!--></a><!--<![endif]--></li>
              </ul>
    		  
    		  <!-- Navigation item -->
    		  <ul>
                <li><a href="temp.html">ANNOUNCEMENTS<!--[if IE 7]><!--></a><!--<![endif]--></li>
              </ul>   
    		            
            </div>
    	  </div>
        
    	  <!-- A.2 HEADER MIDDLE -->
          <div class="header-bottom">
    	  
    	  <img src="img/home-pic-1.jpg"/>
        </div>
       <!-- For alternative headers END PASTE here -->
    
        <!-- B. MAIN -->
        <div class="main">
      
          <!-- B.1 MAIN CONTENT -->
          <div class="main-content">
            
            <!-- Pagetitle -->
            <h1 class="pagetitle">SPAN Group invites you to a new way of investing</h1>
    
            <!-- Content unit - One column -->
            <h1 class="block">Overview</h1>
            <div class="column2-unit-left">
              &nbsp;
    		  <p>SPAN Group delivers expert real estate development consulting services to a wide variety of capital investors in the Washington DC real estate market.  We assist customers by providing critical data and risk management products to help make better, solid investment decisions in the real estate industry.</p>
    		<p>SPAN Group believes every project may evolve into a valuable place destined to become part of our cultural heritage, serving as an example of bold design and sound investment. This is not added value to our clients – but rather timeless value, emotional value, and economic value.  Through our commitment to excellence, SPAN Group delivers tailored investment strategies and products designed to meet out investors’ needs.</p>
    		<p>Creating value through innovative, dynamic, and visionary solutions.</p>
            </div>          
            <div class="column2-unit-right">
              <h1>website re-design</h1>                            
              <h3>Welcome to a snapshot of the upgraded website. Your patience is appreciated while we finalize the re-design.</h3>
    		  &nbsp;
    		  <h3>Until then, please feel free to contact us:</h3>
    		  &nbsp;
              <h6>SPAN Group LLC</h6>
    		  <h6>1750 Tysons Blvd.</h6>
    		  <h6>4th floor</h6>
    		  <h6>McLean, Virginia  22102</h6>
    		  <h6>p: 703.744.1070</h6>
    		  <h6>f: 703.744.1001</h6>
    		  <h6><a href="mailto:contact@spangrp.com">email us</h6>
            </div>
            <hr class="clear-contentunit" />
        </div>
      </div>
        <div class="page-footer">
          <p class="credits"><a href="mailto:webmaster@spangrp.com" title="Webmaster">Webmaster</a> | <a href="mailto:contact@spangrp.com" title="Contact Us"> Contact Us</a> | <a href="temp.html" title="Privacy">Privacy</a> | <a href="temp.html" title="Terms of Use">Terms of Use</a></p>
    	  <p>Copyright &copy; 2007 SPAN Group LLC | All Rights Reserved</p>
        </div>      
     
      
    </body>
    </html>
  6. #4
  7. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    I imagine your problem is related to the copious numbers of conditional comments you have on your page. I could be wrong, but I don't think so.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2007
    Posts
    5
    Rep Power
    0
    When I remove the hovering drop down css / html, the site works perfectly. Any guidance?
  10. #6
  11. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Look at error #6. That might help. http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fspangrp.com%2Ftest.html
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2007
    Posts
    5
    Rep Power
    0
    I fixed the html errors, but it seems the problem is the hovering CSS code. I read somewhere that IE has problems with padding and margins in CSS, but I don't know any workarounds.

    The only problems I am having are on browsers using IE6 or earlier...Firefox and IE7 work fine.

    Thanks for your help so far. Any other suggestions?
  14. #8
  15. Winemaster
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,355
    Rep Power
    168
    Your problem is here:
    Code:
    <!-- Navigation item -->
    		  <ul>
                <li><a href="#">RISK MANAGMENT<!--[if IE 7]><!--></a><!--<![endif]-->
                  <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul>
                      <li><a href="temp.html">ASSESSMENT</a></li>
    
                      <li><a href="temp.html">ANALYSIS</a></li>
                      <li><a href="temp.html">PROTECTION</a></li>
                    </ul>
                  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
              </ul>
    		  
    		  <!-- Navigation item -->
    		  <ul>
    
                <li><a href="temp.html">CONTACT US<!--[if IE 7]><!--></a><!--<![endif]--></li>
              </ul>
    and as I said - it's because of the conditional comments.

    The problem is the difference between the 'protection' link and the 'contact' link. For the former, you have said what to do for IE<7. For the latter, you haven't, so basically, your link is a tag is not closed.

    Personally, I think it's a crazy way of doing your navigation. What's wrong with Suckerfish?
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2007
    Posts
    5
    Rep Power
    0
    I've never heard of Suckerfish, but I will look it up.

    I see what you are saying, because the problem I've been having is with the contact and announcements tabs.

    I appeciate your help, as I'm still new to CSS and XHTML website design. I just recently reformatted my CSS code to the standard format...

    .example {
    etc.
    etc.
    }

    I will recode the dropdowns using suckfish and see if it works. Thanks.

IMN logo majestic logo threadwatch logo seochat tools logo