Table-cell VS ie7

Necuno

Necuno

Court Jester
Joined
Sep 27, 2005
Messages
58,566
Reaction score
3,437
I want to do this in IE7.

The table is a generated element in the div, but total width can be set to something larger than view area. I've used a dummy table with continuous x to simulate it. Now the problem is with IE7 that table-X is not supported and when using a float the second column wraps underneath the table. Only other option I can see is to drop the divs and just use table.

If you are wondering about the borders, it's just to show what the elements are up too :)

...or force users on IE7 to update to something better :twisted:

Code: 
<!DOCTYPE>
<html>
<body>

<div style="border:thin solid blue;">


	<div style="border:thin solid red;display: table-cell">
	
	<table>
	<tr>
	<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
	</tr>
	</table>
	
	</div>

	<div style="border:thin solid blue;display: table-cell">
	[text]
	</div>
	
	
</div>


</body>
</html>
 
maybe use overflow:hidden or overflow:scroll on the div?
 
Tachyon said:
First start by explaining what you are trying to achieve?
Click to expand...

This is explained with an example code in the OP. Unfortunately it is for IE7 browsers:

[table generated element] | [text on right]

but renders as (using float)

[table generated element in div]
[text]

This happens because of the table being wider than the view area and the text collapses underneath it in the same container. However when using table-cell it renders correctly, but this isn't supported option in IE7.



iblade said:
maybe use overflow:hidden or overflow:scroll on the div?
Click to expand...
That is the initial setup, but then the content on the table is cut off and you see at a certain the text overlapping it:

[ table con[ text on right ]

instead of:

[ table content ] | [ text on right ]
 
Last edited:
Can you change your table to a div? You can always give your Div scrollbars too, so people can navigate larger text pieces, though its not always user friendly.
 
Can you not do something like this?

Styles inline for ease of explanation:
Code: 
<div style="border:thin solid blue;">
   <div style="float: left;width: 500px;border: 1px solid red;">
      vvvvvvv
   </div>
   <div style="float: left;width: 200px;border: 1px solid blue;">
      vsdsfsfsdfsd
   </div>
  <div style="clear:both;height:0;font-size:1px;line-height:0;"></div>
</div>

I haven't tested it but it should work with some minor adjustments.

Or if you want people to upgrade from ie7 try this just change lt IE 7 to lt IE 8:

Code: 
  <!--[if lt IE 7]><p>Your browser is OLD <a href="http://browsehappy.com/">Please upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a>.</p><![endif]-->

Chrome frame is nice as it can be installed into IE without admin privileges. I have not tested it with IE7 but does the trick for IE6.
 
Hi Prophet,
Not being a HTML coder myself I asked one of my colleagues who knows a fair bit.
Their suggestion was the following:
div
{
width:150px;
height:150px;
overflow:scroll;
}

You may also want to look here
which seems a good source of info.

Regards

Tim
 
thescubadude said:
Or if you want people to upgrade from ie7 try this just change lt IE 7 to lt IE 8:

Code: 
  <!--[if lt IE 7]><p>Your browser is OLD <a href="http://browsehappy.com/">Please upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a>.</p><![endif]-->

Chrome frame is nice as it can be installed into IE without admin privileges. I have not tested it with IE7 but does the trick for IE6.
Click to expand...

I went with <!--[if lte IE 7]> to override display:table-cell with display:inline and zoom. :sick: :D

@Nefertiti, I'll see what the other dev did when he generates the table.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X