CSS enclose a table 2

[BlindPete]

Hello All,

I have several pages with *cringe* tables of data. Thats right rows and columns of numbers in the <table></table> tags.

However it fouls up my CSS page, and I am really frustrated, because I can't work around it.

The tables are at varying locations in the main content are of the page and wit variable widths. However, other text wraps around it, and the tables shoot past the footers. I am at a total loss as to how to fix it.

I have tried enclosing the tables in other tags but nothing helps, as the tables just move continue down below any enclsoing div,span or p.

Has anyone tackled this before?

Am I an idiot?

All comments welcome.



-Pete
Games the old fashion way with Dice, Paper and Pencils!

 

[ca8msm]

There's nothing wrong with having tables of data. In fact, it's encouraged as that it what they are meant for. However, as we can't see your page it's very difficult to understand what the problem may be let alone suggest a fix. Do you have a URL you can point us to? If not, could you supply all of the HTML and relevant CSS files so that we can set up a test?


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[BlindPete]

Ahhhh you are wise beyond measure, naturally that would help you, help me!

http://www.d100.rolldamage.com/index.html/Rules/Missile

So the table about half down the page, demonstrates what I have poorly described above. The heavy blue band is the enclosing DIV, it is heavy so I can see how it is working. (or not working).

the enclosing class is:

.wikitable {
    width: 100%;
    border: 10px solid #0000ff;
    position: static;
}

The table's CSS is here:

table.firstrow {
    border:3px double #cccccc;
    padding: 0px;
    margin:0px;
}
table.firstrow th {
    border:1px solid #cccccc;
    padding-right: 5px;
    padding-left: 5px;
    background-color:#f9f9f9
}
table.firstrow td {
    border:1px solid #cccccc;
    padding-right: 5px;
    padding-left: 5px;
    margin:0px;
}

-Pete
Games the old fashion way with Dice, Paper and Pencils!

 

[vacunita]

The first thing I would do is fix the validation errors you have:

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Second: I'm assuming this is what you want it to look like correct?:

And not what IE6 does with it:

Firefox renders it like the first picture , probably because its a bit more forgiving of your validation errors, with the table tags.
Fix those and see if IE6 can then render it correctly.


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BlindPete]

Thanks! I'll do that!

-Pete
Games the old fashion way with Dice, Paper and Pencils!

 

[BlindPete]

Thank you both. You were correct about the table. The source content is generated via a wiki at another location. This is snap shot static HTML encapsulated inside another format template. It never even occurred to me to validate the wiki, which as it turns out has an unvalidated template itself.

You saved me much time. A star for each of you!

-Pete
Games the old fashion way with Dice, Paper and Pencils!

 

[vacunita]

Glad to see you sorted it out.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.