Tableless WebParts and WebPartZones

Challenge:

Before couple of days, I was working on WebParts and Webpartzones..Obviously for creating personalized portal for users. I finished it and now it is going for getting some cosmetic touch[CSS :)]..But we found that WebPart is rendered as TABLE.. But we wanted to render it as <DIV>…I tried the whole web. i found so many ways like

1.control adapters — Not a 100% Solution 😦

2. http://eksith.wordpress.com/2008/06/26/tableless-webparts/ — I was unable to implement it for me 😦 — But thanks from his comment part – i found the solution from there only.

Before looking at solution let us dig more how webaprts works;

When I add a WebPartZone on my page, this control will rendered using <table>
like this :

<table cellspacing="0" cellpadding="0" border="0" id="WebPartZone1">
<tr>
<td style="height: 100%;">
<table cellspacing="0" cellpadding="2" border="0" style="width:
 100%; height: 100%;">
<tr>
<td style="height: 100%;"></td>
</tr>
</table>
</td>
</tr>
</table>

and then I add a label as a webpart we will see the source code like this

<table cellspacing="0" cellpadding="0" border="0" id="WebPartZone1">
<tr>
<td style="height: 100%;">
<table cellspacing="0" cellpadding="2" border="0" style="width:
 100%; height: 100%;">
<tr>
<td>
<table cellspacing="0"
 cellpadding="2" border="0" id="WebPart_gwpLabel1"
 style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0"
 border="0" style="width: 100%;">
<tr>
<td id="WebPartTitle_gwpLabel1"
 style="width: 100%; white-space: nowrap;">
 <span
 title="Untitled">Untitled</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
 <span
 id="WebPartManager1_gwpLabel1_Label1">Hello World</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0; height: 100%;"></td>
</tr>
</table>
</td>
</tr>
</table>

As you can see that Webpart — Label is placed under <td>

I am looking for something like this:

</div>
<div>
<div id="WebPartZone1">
<div id="WebPart_gwpstuff1">
<div id="WebPart_gwpstuff1">
<div>
 <span>Untitled</span></div>
<div>
<div>
<span id="WebPartManager1_gwpLabel1_Label1">Hello World</span></div>
</div>
</div>
</div>
</div>
</div>
<div>

Solution:

After investing so much of my time..i found something which works 100% for me…I hope it will work for you also..

It is here :

http://www.coderesearchcenter.com/post/TFRPortal-CSS-friendly-web-parts.aspx

Thanks/hats off to Jeff for such a nice piece of work..

Above one will not work with FireFox but it has steps how you can use the control within your application..And for firefox he only fixed the problem —

http://www.coderesearchcenter.com/post/TFRPortal-is-now-FireFox-friendly.aspx

So just grab it with source code and enjoy!! — Pls don’t forget to say thanks to Jeff for such a brilliant work!!

I have modified Jeff’s code for CustomVerbs — other than that it works like a charm!!

Hope this helps….

Links :

http://www.coderesearchcenter.com/post/TFRPortal-is-now-FireFox-friendly.aspx

http://forums.asp.net/t/987744.aspx?PageIndex=1

http://eksith.wordpress.com/2008/06/26/tableless-webparts/