brady.k — Thu, 05 Aug 2004 04:12:12 +0000

use regular width...not min-widthwidth: 25px;'

Thu, 05 Aug 2004 03:03:19 +0000

Abhishek Reddy wrote: Tables for layout is probably not a good idea. In the move towards a Semantic Web [1][2][3], it makes more sense to use with CSS. Rather than a liquid layout, consider using an elastic layout.

Amen to that! But, using CSS and DIVs, how can I get the min-width property to work in IE since it does not use that property. I've heard that there might be some JavaScript, but I don't want to use JS if it's avoidable.

Abhishtek, got a solution for that?

TIA...

Yianni — Mon, 12 Jul 2004 21:24:43 +0000

Thanks for all of the information! I hadn't read anything about the Semantic Web before. This pretty much means a complete overhaul of my site, but that's not a bad thing.

Abhishek Reddy — Mon, 12 Jul 2004 18:22:32 +0000

Tables for layout is probably not a good idea. In the move towards a Semantic Web [1][2][3], it makes more sense to use with CSS. Rather than a liquid layout, consider using an elastic layout.

If you do go the route of an elastic layout, don't worry about min-widths (or max-widths) too much. The intent is to get it to work about two sizes up and down from "normal" (so a range of five sizes). Any more or less is simply unrealistic on screen media.

Yianni — Mon, 12 Jul 2004 18:05:05 +0000

Thanks Abhishek! Here's the exact situation, and how I fixed it.

I was making a liquid design, but I decided that the lowest resolution I would design for is 800*600. For this reason, I wanted to set the minimum width of the elements so they wouldn't squish themselves onto a 640*480 screen. Here's the simplified code.

<table border="1" height="100" width="100%">
<tr>
      <td >
	Elastic table!
      </td>
</tr>
<tr>
      <td height="30" width="500">
	<div align="center">Menu</div>
      </td>
</tr>
</table>

<br />

<table  width="650" border="1">
<tr>
       <td >
	This is a cemented 650px table.
       </td>
</tr>
</table>

As you can see, it's 2 tables, one with 2 rows, and one with 1. I wanted the Elastic and Menu table to be 100% wide so it would stretch, but I didn't want it to go below, for example, 650px (the width of the other table) if the window was resized. I was so set on finding a line of code to do this that I complicated things by using the expression() property. The easiest and most practical solution was to do the following.

I created a container for my menu with a width of 650px and placed it in the menu row. If the window was resized, this forced the table to stay at 650px, exactly where I wanted it. It also held the menu together quite nicely.

Moral of the story, keep it simple. Thanks for everyone's help!

Abhishek Reddy — Mon, 12 Jul 2004 14:35:23 +0000

Browsers default to buggy/quirks mode (or at least IE does) when you don't declare a doctype. When you do, it switches to whatever mode is specified in the doctype declaration. Some functionality is exclusive to one or a few of the modes.

I've read about expression being used as a min-width fix, but I can't recall any alternatives. Did you use a block of <script> instead of styling it?

You could use PHP or any other server-side language to sniff for the validator and choose not to serve up that bit of CSS or Javascript.

Renegade — Mon, 12 Jul 2004 09:46:29 +0000

Would you like to kindly post the solution so others may learn?

Yianni — Mon, 12 Jul 2004 03:40:44 +0000

Yeah, it's Internet Explorer's expression() property. There's Javascript in the brackets.

Example in a style tag,

p {
width:expression(some javascript goes here);
}

Okay, so that explains why the line won't validate on it's own. I'm still curious as to why this line stops working when I declare the !DOCTYPE. Also, any alternate ideas?

Edit -

I didn't want to double post. I found another way to fix the problem, it was actually quite simple and obvious. It eluded me for days! Anyways, I'm still wondering about why the line stopped working when the !DOCTYPE was declared. I'm just interested.

gohankid77 — Mon, 12 Jul 2004 02:41:25 +0000

Is that JavaScript? I'm just wondering because I've never seen "width:expression(...)" JavaScript will not validate in a CSS document.