css: same table with colspan and rowspan

I found this really simple but interesting use of colspan and rowspan in the same table example

Here’s a example:

   
   
 

<table style="height: 100px;" border="0" cellspacing="0" cellpadding="0" width="100px">
  <tr>
    <td style="background-color:yellow" colspan="2"> 
    </td>
    <td style="background-color:red" rowspan="2">
    </td>
  </tr>
 <tr>
    <td style="background-color:orange" rowspan="2"> 
    </td>
    <td> 
    </td>
  </tr>
  <tr>
    <td style="background-color:gray" colspan="2">
</td>
  </tr>
</table>

Nice…

Advertisements

Referencing issue with asp.net Master page (where the content page is in a different folder)

Content page works fine when the master page is in the same folder, but when they are not, the content page will just give you the cross or question mark error image because the URL is relevant to the content page. 

There are several ways to deal with this issue, and I found the following book on google scholar really helpful:

Core Internet Application Development with ASP.NET 2.0

For example, if you have a master page called main.master right under the project ‘ TestProject’ and have a content page ‘content.aspx’ under a folder called ‘Folder’.

Suppose an image on the master page is <img src=”images/logo.gif”>, which stores in a folder calls ‘images’ under master folder.

You can choose to use ~ symbol like this
<asp:Image runat=”server” id=”testImage” ImageUrl=”~/master/images/logo.gif”/>

However this only works for server control.

The second way is to use absolute path like the following:

<img src=”/master/images/logo.gif”>

What I tried is to put almost all image references in the master page to css file (which is not many), and then reference my master page using the absolute path, so that the master page use the absolute path to read the css file, while whatever in css file does not need to be changed. 

 

CSS: Gaps between td, div and table

The little gap between td(s) and the gap between the border of a table to a border of a div is just annoying. Here’s the before and after.
Before:
<table border="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
      1st row
   </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
    </td>
  </tr>
</table>

1st row

2nd row

div1

After: if we modify margin, padding, (cellspacing, cellpadding for tables only) properties of table and div to 0, it’ll look fine then:

<table border="0" cellspacing="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
     <div>
        1st row
      </div>
    </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
   </td>
  </tr>
</table>
<div style="border:solid 3px yellow;margin:0;">div 2</div>

1st row

2nd row

div2