Grouping table attributes in css?

Hi folks,
i have a website. in which there is lot of cellspacing, cellpadding and border are 0. i m now a days optimizing my code. so i wanted to know what element/property shld i use in css file for cellspacing,cellpadding and border? another thing i got my css error free still there r warning like 18 of them. somehow i don’t feel relaxed until i know my css is valid. basically its more of warning about colors. as i used/repeated colors in many elements but they have different property other than color. so how do i group them or shld i let warning go?

Let those warnings go lol. Can’t do anything about that.

Use this code on the table:)

border-collapse:separate;
border-spacing:0

Hi,

For most tables and modern browsers this is fine.


table{border-collapse:collapse}
td{padding:0}

Tables don’t have a borders by default so you don’t need to address them.

If you are getting warnings from the validator then they are just that and once you’ve checked they aren’t relevant you can ignore them. It doesn’t mean they are invalid but something that you need to manually check is ok.

If you dont want the color warnings then you would need to ensure that every time you set a color you set a background also. Which in most sites would be difficult as you may have elements defined with a color that sit on various backgrounds and you’d end up with loads of classes almost the same.

The validator just wants you to check that you haven’t set white text on a white background. (Remembering also that user stylesheets may have set defaults for background and colour and when you define one it could upset the other.)

i m working on fieldset/legend and IE 6 totally ruined its shape. whereas in FF and chorme its working. here is the code


         <table width="100%" border="0" cellspacing="2" cellpadding="0">
           <tr>
             <td width="25">&nbsp;</td>
             <td width="312">
          <fieldset class="tbl_prop">
              <legend class="searchbar">General</legend>
          <table width="160" style="margin:auto">
               <tr>
                 <td><input class="buttons" type="submit" value="Priority" onclick="createPopup('Priority.php','350','600');"/></td>
                 <td><input class="buttons" type="submit" value="Status" onclick="createPopup('Status.php','350','600');"/></td>
              <td><input class="buttons" type="submit" value="Category" onclick="createPopup('Category.php','350','600');"/></td>

               </tr>
<br />
              <tr>
                 <td><input class="buttons" type="submit" value="Type" onclick="createPopup('Type.php','350','600');"/></td>
                 <td><input class="buttons" type="submit" value="Region" onclick="createPopup('Region.php','350','600');"/></td>
              <td><input class="buttons" type="submit" value="Maintain" onclick="createPopup('Maintained.php','350','600');"/></td>

               </tr>
              </fieldset>
             </table>

:frowning:

Hi,

Your structure is incorrect and there are missing tgas.

It should be like this.


<table width="100&#37;" border="0" cellspacing="2" cellpadding="0">
    <tr>
        <td width="25">&nbsp;</td>
        <td width="312">
        <fieldset class="tbl_prop">
            <legend class="searchbar">General</legend>
            <table width="160" style="margin:auto">
                <tr>
                    <td><input class="buttons" type="submit" value="Priority" onclick="createPopup('Priority.php','350','600');"/></td>
                    <td><input class="buttons" type="submit" value="Status" onclick="createPopup('Status.php','350','600');"/></td>
                    <td><input class="buttons" type="submit" value="Category" onclick="createPopup('Category.php','350','600');"/></td>
                </tr>
                <tr>
                    <td><input class="buttons" type="submit" value="Type" onclick="createPopup('Type.php','350','600');"/></td>
                    <td><input class="buttons" type="submit" value="Region" onclick="createPopup('Region.php','350','600');"/></td>
                    <td><input class="buttons" type="submit" value="Maintain" onclick="createPopup('Maintained.php','350','600');"/></td>
                </tr>
            </table>
            </fieldset>
        </td>
    </tr>
</table>
</body>
</html>

Remember that you can’t put things like breaks between a tr and td tag. Everything in a table (apart from table elements of course) must be inside a td pair.

Also note that there is no “width” attribute in strict doctypes and you should use a class instead to supply the appropriate width.

i see that fieldset tag shows small border in IE?

The fieldset “element” shows a border in all browsers by default although the shape of the border is rounded in IE unless you change the border property.

i did the syntax right this time by hand coding :slight_smile: but in IE 6 the property which i gave to field set i.e blue color get out of top border of field set

   <table width="480">
        <tr>
            <td>
    <fieldset>
              <legend class="searchbar">General</legend>

               <input class="buttons" type="submit" value="Priority" onclick="createPopup('Priority.php','350','600');"/>
             <input class="buttons" type="submit" value="Status" onclick="createPopup('Status.php','350','600');"/>
             <input class="buttons" type="submit" value="Category" onclick="createPopup('Category.php','350','600');"/>
              <input class="buttons" type="submit" value="Type" onclick="createPopup('Type.php','450','600');"/>
               <input class="buttons" type="submit" value="Region" onclick="createPopup('Region.php','350','600');"/>
            <input class="buttons" type="submit" value="Maintain" onclick="createPopup('Maintained.php','350','600');"/>
             </fieldset>
              </td>
              </tr>
              </table>
fieldset{background-color:#d5e6f0; border:1px #0064a2 solid;}

Hi,

The fieldest and legend is almost impossibble to style consistently cross browser.

You would need to do something like this example:


<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.mainform fieldset {
    background: #ecf8d7;
    border:1px solid #608f22;
    margin:10px 0 10px;
    position:relative;
    padding:10px;
}
.mainform legend {
    font-weight: bold;
    color: #608f22;
    border:1px solid #608f22;
    padding:1px 10px;
    background:#fff;
}
</style>
<!--[if IE ]>
<style type="text/css">
.mainform legend{top:-10px;position:relative;}
.mainform fieldset{
    top:10px;
    padding:0 10px 10px;
    margin:10px 0 20px;
}
</style>
<![endif]-->
</head>
<body>
<form class="mainform" name="form1" id="form1" method="post" action="">
    <fieldset>
    <legend>Testing</legend>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    </fieldset>
</form>
</body>
</html>


More information here.

i will try it btw paul. congratulations on your sitepoint award :cool: