Topic: Border around DIV when DIV is inside a cell $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24904" title="Pages that link to Topic: Border around DIV when DIV is inside a cell" rel="nofollow" >Topic: Border around DIV when DIV is inside a cell\$

Author	Thread
viol Maniac (V) Inmate From: Lago Paranoá Insane since: May 2002	posted 02-03-2005 21:35 How can I get rid of the "border" when I use a DIV inside a cell table, like in the example below? code: <HTML> <HEAD> <TITLE>DIV in a Cell "Border" Problem</TITLE> </HEAD> <BODY> <table style="background-color:#f0f; border-collapse:collapse; margin:0; padding:0;"> <tr> <td> <div style="width:200px; height:100px; background-color:#ff0; margin:0; padding:0;"> How can I get rid of this 1 pixel magenta border around the DIV and see only the yellow color, I mean, how to make the DIV take all the cell space? </div> </td> </tr> </table> </BODY> </HTML> TIA.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-03-2005 22:40 the border is not part of the cell space, so any element inside the cell will never take up the border space - it doesn't work that way. You'll need to specify a class for the cell that has no border most likely. Not clear on what it is you're trying to do though... Seems like you may be trying to hack away at something that you can't get to work without a table?
Nathus Bipolar (III) Inmate From: Minnesota Insane since: Aug 2003	posted 02-03-2005 22:51 You need to set the padding of the table cell to 0 by specifying the padding using css in the table tag you are only affecting the tables "box" it doesn't set the properties of the cells like if you were using the padding attribute. For example code: <HTML> <HEAD> <TITLE>DIV in a Cell "Border" Problem</TITLE> </HEAD> <BODY> <table style="background-color:#f0f; border-collapse:collapse; margin:0; padding:0;"> <tr> <td style="padding:0;"> <div style="width:200px; height:100px; background-color:#ff0; margin:0; padding:0;"> How can I get rid of this 1 pixel magenta border around the DIV and see only the yellow color, I mean, how to make the DIV take all the cell space? </div> </td> </tr> </table> </BODY> </HTML> (Edited by Nathus on 02-03-2005 22:51)
viol Maniac (V) Inmate From: Lago Paranoá Insane since: May 2002	posted 02-03-2005 23:13 Thanks, Nathus, that really solved the problem. DL-44, yes, you are right. I am trying to make a tableless design, this one: http://www.viol.com/temp/index.htm that I mention in this recent post: http://www.ozoneasylum.com/24902 I need the navigation DIV to go down all the way, up to the footer area, just as the Contents DIV goes (because the latter is fluid). I think that I can do that only by using javascript. The code would read the contents DIV height and would apply it to the navigation DIV height, when loading or resizing the window. Another possibility that I am working on is to use a good and old table to force the structure and then use DIV's inside the table cells. My first problem was to solve the border problem, that Nathus has just solved. But I still have a big problem to solve, that is to make a DIV take the entire space of a cell, regardless of the height of the DIV (that should not be fixed), when the table is resized. I think that the javascript solution should be the best one.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-04-2005 03:12 That's always a tricky thing. I don't have specific links at the moment, but go check out the CSS forum at the GN - there are a couple of guys there who have posted some really great solutions to a variety of problems, and I know this has come up there. Can't really be of more concrete help at the moment, but it's definately worth the time to read through some threads over there.
viol Maniac (V) Inmate From: Lago Paranoá Insane since: May 2002	posted 02-04-2005 03:59 Well, after some more hours of Google'ing and reading and experimenting, I may say that there is nothing that four lines of javascript can't cure. I am going for the DIV layout. Here is the final raw structure (the colors are just for clues). It's very clean now. http://www.viol.com/temp/index_oval.htm and it's working in IE6sp2, Opera 754, Netscape 7.2, Mozila 175 and Firefox 1.0, so, it's good enough for me. Thanks guys.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-04-2005 14:05 nifty little javascript. didn't know it was so easy =)
viol Maniac (V) Inmate From: Lago Paranoá Insane since: May 2002	posted 02-05-2005 01:10 I didn't know either. Found a site in Internet and modified the code to my needs. Here's a new version, now taking the shape I wanted. It's still under development. Don't try to change font size. The corners are generated on-the-fly using Hard Grok's script. http://www.viol.com/temp/oval.php EDIT: link changed (Edited by viol on 02-05-2005 01:43)

Topic: Border around DIV when DIV is inside a cell\$

Author

Thread

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

posted 02-03-2005 21:35

How can I get rid of the "border" when I use a DIV inside a cell table, like in the example below?

code:

<HTML>

<HEAD>

<TITLE>DIV in a Cell &quot;Border&quot; Problem</TITLE>

</HEAD>



<BODY>



<table style="background-color:#f0f;

                       border-collapse:collapse;

                       margin:0;

                       padding:0;">

  <tr>

    <td>

      <div style="width:200px;

                          height:100px;

                          background-color:#ff0;

                          margin:0;

                          padding:0;">

  

                How can I get rid of this 1 pixel

                magenta border around the DIV and

                see only the yellow color, I mean,

                how to make the DIV take all the

                cell space?

      </div>

    </td>

  </tr>

</table>



</BODY>

</HTML>

TIA.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-03-2005 22:40

the border is not part of the cell space, so any element inside the cell will never take up the border space - it doesn't work that way.

You'll need to specify a class for the cell that has no border most likely. Not clear on what it is you're trying to do though...

Seems like you may be trying to hack away at something that you can't get to work without a table?

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

posted 02-03-2005 22:51

You need to set the padding of the table cell to 0

by specifying the padding using css in the table tag you are only affecting the tables "box" it doesn't set the properties of the cells like if you were using the padding attribute.

For example

code:

<HTML>

<HEAD>

<TITLE>DIV in a Cell &quot;Border&quot; Problem</TITLE>

</HEAD>

<BODY>



<table style="background-color:#f0f;

                       border-collapse:collapse;

                       margin:0;

                       padding:0;">

  <tr>

    <td style="padding:0;">

      <div style="width:200px;

                          height:100px;

                          background-color:#ff0;

                          margin:0;

                          padding:0;">

  

                How can I get rid of this 1 pixel

                magenta border around the DIV and

                see only the yellow color, I mean,

                how to make the DIV take all the

                cell space?

      </div>

    </td>

  </tr>

</table>



</BODY>

</HTML>

(Edited by Nathus on 02-03-2005 22:51)

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

posted 02-03-2005 23:13

Thanks, Nathus, that really solved the problem.

DL-44, yes, you are right. I am trying to make a tableless design, this one:
http://www.viol.com/temp/index.htm

that I mention in this recent post:
http://www.ozoneasylum.com/24902

I need the navigation DIV to go down all the way, up to the footer area, just as the Contents DIV goes (because the latter is fluid).

I think that I can do that only by using javascript. The code would read the contents DIV height and would apply it to the navigation DIV height, when loading or resizing the window.

Another possibility that I am working on is to use a good and old table to force the structure and then use DIV's inside the table cells. My first problem was to solve the border problem, that Nathus has just solved.

But I still have a big problem to solve, that is to make a DIV take the entire space of a cell, regardless of the height of the DIV (that should not be fixed), when the table is resized.

I think that the javascript solution should be the best one.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-04-2005 03:12

That's always a tricky thing.

I don't have specific links at the moment, but go check out the CSS forum at the GN - there are a couple of guys there who have posted some really great solutions to a variety of problems, and I know this has come up there.

Can't really be of more concrete help at the moment, but it's definately worth the time to read through some threads over there.

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

posted 02-04-2005 03:59

Well, after some more hours of Google'ing and reading and experimenting, I may say that there is nothing that four lines of javascript can't cure.

I am going for the DIV layout. Here is the final raw structure (the colors are just for clues). It's very clean now.

http://www.viol.com/temp/index_oval.htm

and it's working in IE6sp2, Opera 754, Netscape 7.2, Mozila 175 and Firefox 1.0, so, it's good enough for me.

Thanks guys.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-04-2005 14:05

nifty little javascript.

didn't know it was so easy =)

viol
Maniac (V) Inmate

From: Lago Paranoá
Insane since: May 2002

posted 02-05-2005 01:10

I didn't know either. Found a site in Internet and modified the code to my needs.

Here's a new version, now taking the shape I wanted. It's still under development. Don't try to change font size. The corners are generated on-the-fly using Hard Grok's script.

http://www.viol.com/temp/oval.php

EDIT: link changed

(Edited by viol on 02-05-2005 01:43)

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Border around DIV when DIV is inside a cell

Insert Slimies »

Insert UBB Code »

Topic: Border around DIV when DIV is inside a cell $Pages that link to <a href="https://ozoneasylum.com/backlink?for=24904" title="Pages that link to Topic: Border around DIV when DIV is inside a cell" rel="nofollow" >Topic: Border around DIV when DIV is inside a cell\$