SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Greensboro, NC
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS/Table Problem - need a hack?

    I have just discovered that IE5.5 users cannot use my site, because of some css code. I need your help to solve this, so please!

    The logo and top nav areas load correctly using a lot of css. Look at www.cardinalcc.com/golf.php for example. Next I set a table with 3 columns for the main layout. The left column is a section nav list that works great unless the browser is IE5.5 or earlier. Those users only see the background image for column 1 for miles (width-wise)! Then, the other two cols are squeezed into very narrow cols on the far, far right. If I remove the css references for formatting the ul's and li's, all is fine--the layout renders correctly. The offending code (which I adapted from a SitePoint book) follows:
    Code:
    <ul id="lftBar">
                <li><a href="golfmen.php">Men's Golf</a></li>
                <li><a href="golfladies.php">Ladies' Golf</a></li>
                <li><a href="golfcouples.php">Couple's Golf</a></li>
              </ul>
    and the css:
    Code:
    #lftBar {
        width: 170px;
        
        }
    ul#lftBar {
    	list-style: none;
    	font: bold 8pt/4pt verdana, arial, sans-serif;
    	font-color: #000;
    	margin: 0;
    	padding: 0;
    }
    
    ul#lftBar li a:link, ul#lftBar li a:visited {
    	display: block;
    	border: 1px solid #79899A;
    	text-decoration: none;
    	width: 86%;
    	padding: 5px 6%;
    	margin-left: 5px;	
    	background-color: #Cfd5d4;
    	font: bold 8pt/10pt verdana, arial, sans-serif;
    	color: #465460
    }
    I have spent several days systematically removing lines in the css, tinkering, etc. and cannot solve it. If I remove the "li" lines in the page code the layout is correct, but I obviously need those links. Can someone help me? Thanks in advance.

    Edit: If there is a hack that will allow just an undecorated list of the links for IE5.5 and below I could live with it--just so users can see the page.
    Last edited by ellenreddick; Mar 4, 2005 at 09:47. Reason: Addition

  2. #2
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you may have the ul#lftBar part backwards.

    It should read #lftBar ul { etc... same for the other section.

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Greensboro, NC
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work, either.

  4. #4
    SitePoint Zealot MetalAges's Avatar
    Join Date
    Jan 2003
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI you're missing a ; after color: #465460

    I know (if I am not mistaken) that things start to get mixed up when you combine % with fixed widths.

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Greensboro, NC
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks--added the ;
    I have tried all combinations of all fixed, all %, removed all lines in the css li one-by-one and in combinations. It just breaks any time I use an inherited css ref on the li.

  6. #6
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I notice you have several of the lftBar IDs throughout. Have you tried changing these to class? (IDs are supposed to be unique within each document - only one instance of each).

    Mind you I'd be surprised that older IE is picking that up and other browsers aren't, but worth a try

    (I don't have IE5.5 or earlier handy so can't really do much more than that and I can't follow table layouts at all!.)

  7. #7
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Greensboro, NC
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I keep trying!

    I have stripped this down to bare bones and still it doesn't work. I have no idea where to go from here! I agree about the class instead of id, but even when there is only one it doesn't work. Here is my code:

    The relevant css:
    Code:
    #maintable {
    	padding: 10px;
    	width: 100%;
    }
    .left {
    	background-image: url(images/cloth3.jpg);
        background-repeat: repeat-y;
    	width: 23%;
    }
    .right {
    	width: 23%;
    	background-color: #94AEBD;
    }
    .middle {
    	font: normal 9pt/11pt  verdana, arial, sans-serif;
    	padding-left: 25px;
    	padding-right: 25px;
    	width: 56%;
    	margin-top: 10px;
    }
    #navcol {
        padding: 0;
        width: 180px;
        float: left;
    }
    #lftBar {
        width: 170px;
        }
    ul#lftBar {
    	list-style: none;
    	font: bold 8pt/4pt verdana, arial, sans-serif;
    	font-color: #000;
    	margin: 0;
    	padding: 0;
    }
    ul#lftBar li a:link, ul#lftBar li a:visited {
    	display: block;
    	border: 1px solid #79899A;
    	text-decoration: none;
    	width: 86%;
    	padding: 5px 6%;
    	margin-left: 5px;	
    	background-color: #Cfd5d4;
    	font: bold 8pt/10pt verdana, arial, sans-serif;
    	color: #465460;
    }
    The program:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="cardinalcc">
    <meta name="description" content="Cardinal Golf and Country Club in Greensboro, NC.">
    <title>Cardinal Golf and Country Club</title>
    <link rel="stylesheet" type="text/css" href="bird4.css">
    
    </head>
    
    <body>
    
    
      <div id="topBar"></div>
    
      <div id="blueBar" style="height: 45px">
        <ul>
          <li><a href="index.php">HOME</a></li>
          <li><a href="newsletter.php">Newsletter</a></li>
          <li><a href="memonly.php">Members Only</a></li>
          
          <li id="current"><a href="golf.php">Golf</a></li>
          <li><a href="swim.php">Swim</a></li>
          <li><a href="tennis.php">Tennis</a></li>
          <li><a href="admin.php">Admin.</a></li>
          <li><a href="clubhouse.php">Clubhouse</a></li>
          <li><a href="aboutus.php">About Us</a></li>
          <li><a href="contactus1.php">Contact Us</a></li>
          
        </ul>   
      </div>
      <!--  End top navigation bar -->
    <table id="maintable">
    
    
    <tr>
    <td class="left">
    <div id="navcol">
              <ul id="lftBar">
                <li><a href="golf.php">Golf Home Page</a></li>
              </ul>
         
              <br />
                <table width="157" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td colspan="2">
                      <h5 align="center">Reciprocal Agreements</h5>
                      </td>
                    </tr>
                    <tr>
                      <td width="130" align="left">Bermuda Run</td>
                      <td width="27">$14</td>
                    </tr>
                    <tr>
                      <td width="130" align="left">Deep Springs</td>
                      <td width="27">$15</td>
                    </tr>
                  </table> 
    </div>
     <!--  #####################   End LEFT nav   #################### -->
     </td>   
    <td valign="top" class="middle">
    <!--  #####################   Begin Main Content Area   #################### -->    
         
         
    <p>This is a test</p>         
    <!--  #####################   End Main Content Area   #################### -->
    </td>
    <td valign="top" class="right">
          <!--  #####################   Begin Right col   #################### -->
    		<p>text text text</p>
     </td>
    </tr>
    </table>   
    <?php
    include('./includes/cardinalfooter.php');
    ?>

  8. #8
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance of a screen shot on the offending browsers? (I just tried Browserola and it looks the same?)

  9. #9
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Greensboro, NC
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally found the offending code! I removed the 6% marked and it works just fine.
    Code:
    ul#lftBar li a:link, ul#lftBar li a:visited {
    	display: block;
    	border: 1px solid #79899A;
    	text-decoration: none;
    	width: 86%;
    	padding: 5px 6%;
    	margin-left: 5px;	
    	background-color: #Cfd5d4;
    	font: bold 8pt/10pt verdana, arial, sans-serif;
    	color: #465460;
    }
    Thanks to all who looked at this!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •