SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table border FF IE8 Chrome

    I've got a simple table and I'd like borders around the rows.
    In Chrome and IE8 it works but not FF.

    I'd appreciate any comments.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title>Table Test</title>
     </head>
    <style type="text/css">
    table.bordered 
    {
    	border-width: 2px;
    	border-spacing: 2px;
    	border-style: ridge;
    	border-color: blue;
    	border-collapse: collapse;
    	background-color: white;
    }
    th 
    {
    	border-width: 2px; 
    	padding: 2px;
    	border-style: ridge;
    	border-color: blue;
    	background-color: white;
    }
    td 
    {
    	border-width: 2px; 
    	padding: 2px;	
    	border-style: ridge;
    	border-color: blue;
    	background-color: white;
    }
    </style>
    <body>
     <div id="table_test"> 
    	<br />	
    	<br />	
    	<br />	   
      <table class="bordered"> 
       <tr> 
        <caption>Table Test</caption>               
       </tr>    	
       <tr>   	
        <th>Name</th> 
        <th>Count</th>                
      </tr>  	             
       <tr> 
    		<td>#1</td><td align="right">467</td> 
       </tr>    	
       <tr> 
    		<td>#2</td><td align="right">28</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#3</td><td align="right">86</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#4</td><td align="right">8</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#5</td><td align="right">8</td>	   	                    	 
       </tr>  
       <tr> 
    		<td>#6</td><td align="right">3</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#7</td><td align="right">2</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#8</td><td align="right">236</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#9</td><td align="right">3</td>	   	                    	 
       </tr> 
       <tr> 
    		<td>#10</td><td align="right">14</td>	   	                    	 
       </tr>     
       <tr> 
    		<td>#11</td><td align="right">808</td>	   	                    	 
       </tr>    
       <tr> 
    		<td>#12</td><td align="right">2</td>	   	                    	 
       </tr>                    
      </table>  
     <br />	        
     </div>   <!-- end of id="table_test" --> 
     </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Are you sure you want border collapse? I think you'd get the same result as you are getting in Chrome etc by replacing all your styles with this:

    Code:
    th, td {
        border: 2px solid blue; 
        padding: 2px;
    }
    PS Did you mean borders around "rows" or "cells"? At the moment you have borders around the cells.

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed, except for the two declarations that Ralph mentioned, all of your other declarations should be inherited from the table automatically. As long as you keep the style rules for the table and the th / td elements in close proximity (and it's a good idea anyway) this is a more robust way to program it and will still be semantically clear how everything is styled.

    As for the cross-browser incompatibility, I have only one procedure for that. Validate the page and correct any errors; that corrects virtually all incompatibility issues. If the compatibility issue remains, start commenting out style rules or sections of the stylesheet until the display is the same in all browsers. Then start boring down into the problem section until you can tell exactly which declaration or combination of declarations is the problem. It sounds like this is a problem with the table display so more than likely - though in CSS its not always that easy - a problem in the table section, so I'd start there.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem is that you have put the table caption within a tr and is killing firefox because it is invalid

    The caption does not go within a table row.

    Code:
     <tr> 
        <caption>Table Test</caption>               
       </tr>
    It should be like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    table.bordered {
        border-width: 2px;
        border-style: ridge;
        border-color: blue;
        border-collapse: collapse;
        background-color: white;
    }
    th {
        border-width: 2px;
        padding: 2px;
        border-style: ridge;
        border-color: blue;
        background-color: white;
    }
    td {
        border-width: 2px;
        padding: 2px;
        border-style: ridge;
        border-color: blue;
        background-color: white;
    }
    </style>
    </head>
    <body>
    <div id="table_test">
        <table class="bordered">
            <caption>
            Table Test
            </caption>
            <tr>
                <th>Name</th>
                <th>Count</th>
            </tr>
            <tr>
                <td>#1</td>
                <td align="right">467</td>
            </tr>
            <tr>
                <td>#2</td>
                <td align="right">28</td>
            </tr>
            <tr>
                <td>#3</td>
                <td align="right">86</td>
            </tr>
            <tr>
                <td>#4</td>
                <td align="right">8</td>
            </tr>
            <tr>
                <td>#5</td>
                <td align="right">8</td>
            </tr>
            <tr>
                <td>#6</td>
                <td align="right">3</td>
            </tr>
            <tr>
                <td>#7</td>
                <td align="right">2</td>
            </tr>
            <tr>
                <td>#8</td>
                <td align="right">236</td>
            </tr>
            <tr>
                <td>#9</td>
                <td align="right">3</td>
            </tr>
            <tr>
                <td>#10</td>
                <td align="right">14</td>
            </tr>
            <tr>
                <td>#11</td>
                <td align="right">808</td>
            </tr>
            <tr>
                <td>#12</td>
                <td align="right">2</td>
            </tr>
        </table>
    </div>
    <!-- end of id="table_test" -->
    </body>
    </html>
    border-spacing only applies in the separated border model.

  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m, Chroniclemaster1 and Paul O'B,

    Thanks you for the advice, it's much appreciated.

    It's making more sense.

    Yes, I was thinking that brought in I'd just about everything and the kitchen sink and needed to pare things down.

    When you get frustrated you start adding things trying to get a result and pretty soon you end up with an overgrown bush

    I'll try to K.I.S.S. from now on.

    John

  6. #6
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jbrasher View Post
    When you get frustrated you start adding things trying to get a result and pretty soon you end up with an overgrown bush

    I'll try to K.I.S.S. from now on.
    That's really common. I can offer a couple tips that work very well for me, though they don't work for everyone; it depends on your style.

    I design in stages. My first page design is just building the XHTML; you don't have to have the content, but you do have to have the framework (ie there's a news section with links to news articles, there's a navbar, there's a main content section, there's a secondary content section, there's a testimonials section, etc. It can be just Lorem Ipsum, but you want all the tags in place.) Wireframes and XHTML prototyping work very effectively with this technique. My second just works on the positioning in CSS-P, no floats, no styling, nothing else. Then I paint everything in colors. Then I give the design some texture and apply some first blush placeholder images. Then typography. And last finalizing the images.

    I copy all the files (the webpage and CSS files) and rename them at the end of each stage so that each stage is preserved. This allows you delete any file in the current stage if it becomes unsalvageable and start over by copying the version from the previous stage. It also gives you "save points" where you can easily go back to an earlier point in the design and start from there rather than starting from scratch. (I build all my Photoshop files in layers to give me the same flexibility; as long as they're willing to pay for the extra work, I'm happy to let a client change their mind, but I still don't want to redo any more work than I have to. It's a waste of my time and their money.)

    Once I'm done with that process, I then build the production files from scratch, because your final files from the design process are an "overgrown bush"... ALWAYS. I'll copy over bits and pieces from my final design testing which I know I need, but it's always amazing how much crap was in there from testing. There've actually been cases where I had to go through this step a second time, because there was so much garbage to weed out.

    Doing these things have helped to give me the freedom to experiment in the design without being afraid that I'm going to waste a lot of time. It also allows me to build a completely "overgrown bush" and I don't have to care. It's never going to see the light of production. It's just testing. (and I'm religious about using that verbiage with clients, "Here's your completed test site. If you like it I can have the production site up and running in X days."
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  7. #7
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the great info.

    I'll take your suggestions to heart.

    John


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
  •