CSS, Tables, and weird Errors... (DailyTunes)

[arn]

Hey all..

i'll be the first to admit that I'm a CSS novice. I don't know what the heck is going on.

Anyhow... there are some weird problems I've been having with the interaction between CSS div's and tables.

I've got <div>'s which make up the center portion of the Dailytunes site.

And Table's embeeded in the divs.

If I set the table at 100% width, it does some strange things on Windows IE.

compare:

http://www.dailytunes.com/

http://www.dailytunes.com/winie.php

The only diff is that winie has the first table with 100% width -- which is what I want actually. I managed to work around the problem on this page... but have been told of similar problems on other pages.

My solution for this page was to set the first <td> to 100% instead, and the <table> without a width (so it was auto).

But in other pages, I can't set the first <td> to 100%... it messes up the way the table looks.

arn

 

[Rower_CPU]

Have you tried replacing the table with <div>s? The only catch would be floating the album cover right, since you'd get rid of the <td> that puts it over there.

In my experience, using 100% width on tables or parts of tables is interpreted in very different ways by browsers. Some just take 100% of the area they are, some want 100% of the whole browser window.

If you want some help trying it out, let me know. I'll be home all day (work cancelled again due to the fires).

 

[Rower_CPU]

Have you had any luck fixing it up, yet?

I know you've been busy on it.

 

[Lz0]

Placing a table width of 100% in a layer will throw IE (Mac & Win) out every time, I'm not sure why, but almost certainly it's a bug.

The only work around is to use pixel widths - not much help to you if you want a liquid page.

But then I can't see why you would want to use div tags in your design.

 

[Rower_CPU]

Originally posted by Lz0
Placing a table width of 100% in a layer will throw IE (Mac & Win) out every time, I'm not sure why, but almost certainly it's a bug.

The only work around is to use pixel widths - not much help to you if you want a liquid page.

But then I can't see why you would want to use div tags in your design.

Well, if you're trying to replace tables, you use divs and CSS.

 

[putmanh]

Workaround: add a div...

Setting the table width=100% doesn't work right in Internet Explorer on Windows. But if you wrap the table in a div and set that width to 100% and the table width to 100%, it seems to work...

 

[Punboy]

In the table's tag, put "style='width:100;'"

That may work

 

[Rower_CPU]

Originally posted by Punboy
In the table's tag, put "style='width:100;'"

That may work

You need some sort of size parameter (px, %, etc.) on widths. The only number that doesn't need (and shouldn't have) a unit measure is 0.

 

[Punboy]

ya, whoops forgot the % sign

put THIS "style='width:100%;'"

Sorry 'bout that

 

[Codemonkey]

Arn - any closer?

Doesn't look like it based on those links...

Anyway, it's a fairly well known bug, iirc. Try changing your width to something other than 100% and see if that fixes it. If so, can you live with 99%?

Also, as stated before, try style="width:100%" in the offending tag - that should do it.