css table-less table in IE7 1

[jman78]

I have this code here, that creates a table using a div as a row and spans as table cells (using the appropriate 'display: xxxxxxx') This works excellently in safari, firefox, opera and IE 6, but IE 7 does not render the span widths or heights.

I spent the entire day yesterday working on this issue - anyone have any ideas?

Jason

Here's the code:

<style>
body {
  font-family:  trebuchet ms,tahoma,arial,verdana,monospace;
  font-size:    12px;
}

.bold { font-weight: bold; }

.filter_menu { border-bottom: groove 2px #FFF; }
.filter_menu select { width: 65px; margin-right: 10px;}

.it_head_row {
  display: table-row;
  height: 1.3em;
  border-bottom: groove 3px #4D4E0C;
}

.it_header_field {
   color: #000;
   font-size: 1.25em;
   font-weight: bold;
}

.it_row {
  display: table-row;
  height: 30px;
}

.it_date_col { display: table-cell; width:  75px; text-align: left; vertical-align: top; }
.it_buyer_col { display: table-cell; width: 125px; text-align: left; vertical-align: top; }
.it_shares_col { display: table-cell; width:  75px; text-align: left; vertical-align: top; }
.it_transaction_col { display: table-cell; width: 140px; text-align: left; vertical-align: top; }

</style>

<div class="it_head_row">
	<span class="it_date_col it_header_field">Date</span>
	<span class="it_buyer_col it_header_field">Name</span>
	<span class="it_shares_col it_header_field">Shares</span>
	<span class="it_transaction_col it_header_field" >Transaction</span>
</div>
<div class="it_row">
	<span class="it_date_col"><%=h insider_transaction.date.strftime("%m - %d - %Y") %></span>
	<span class="it_buyer_col"><span class="bold"><%=h insider_transaction.buyer %></span><br />
		<%=h insider_transaction.buyer_description %></span>
	<span class="it_shares_col"><%=h insider_transaction.number_of_shares.to_s.gsub(/(\d)(?=(\d\d\d)+(?!\d))/, "\\1,") %></span>
	<span class="it_transaction_col"><span><%=h insider_transaction.description %></span><br />
		<%=h number_to_currency(insider_transaction.cost, :precision => 2) %></span>
</div>

 

[ca8msm]

Why are you making a table without using a <table> element? It looks to me as though you would actually be displaying tabular data in it (i.e. Date, Name, Shares and Transaction).


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

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]

 

[jman78]

I got carried away with the whole 'table-less design' concept. this is the first time i've had this particular issue. I have another problem with this site involving ajax and IE 7 doesn't want to redraw the screen properly.

You make a good point, I think I'm just going to rewrite this using the table elements and move on to the next challenge.

Thanks!

Jason

 

[ca8msm]

Yes, I think you did get carried away. The idea of not using a table is that you don't use them for page layout. Using them for displaying data is still the recommended method.


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

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]

 

[camyba]

or you can do this

.it_date_col { display: table-cell; float: left; width: 75px; text-align: left; vertical-align: top; }
.it_buyer_col { display: table-cell; float: left; width: 125px; text-align: left; vertical-align: top; }
.it_shares_col { display: table-cell; float: left; width: 75px; text-align: left; vertical-align: top; }
.it_transaction_col { display: table-cell; float: left; width: 140px; text-align: left; vertical-align: top; }

I recommend that when you need to make a table to use "table".

 

[Foamcow]

It's not about not ever using tables, it's about using tables properly.

Don't forget, tables have a few very useful child elements too. thead, tbody, caption etc.

Use the right tags for the job, that's what standards based development is all about.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[jman78]

I tried the floats, also.. that made IE7 pile all the text on top of each other.

Thanks guys!

 

[cLFlaVA]

preach on, mark.

----

 

[iulyan26]

if you wanna give a width and height to the span try this

span {display:block;}/*let's not forget that the span is a inline element */

whend all you need is time

http://www.fleshsoft.eu

 

[jman78]

I did declare the spans as display: table-cell - to create that effect... unfortunately ie 7 didn't render it as such.

I just used the span's and divs cause that is what I've used (and has worked in the past)...


jason