Width:Expression
Alright, here's my problem. I want to validate my markup and CSS, but one line of code is preventing me from doing this. Here's the code:
width:expression(document.body.clientWidth < 775? "775px": "100%" );
As you can see, I want to set the minimum width of an element in Internet Explorer. Unfortunately, the W3 markup validator doesn't like this line, and won't validate it. Does anyone have any ideas? My last resort is to create a 775*1 transparent image to force IE to do what I want, but I'd rather not give my website braces and headgear.
Another problem this creates is in declaring a !DOCTYPE. It's XHTML 1.0, but as soon as I declare that, the width:expression line mentioned above, stops functioning. Maybe I am better off with the 775*1 image?
Any thoughts are appreciated.
gohankid77 posted this at 02:41 — 12th July 2004.
They have: 11 posts
Joined: Jul 2004
Is that JavaScript? I'm just wondering because I've never seen "width:expression(...)" JavaScript will not validate in a CSS document.
Yianni posted this at 03:40 — 12th July 2004.
He has: 17 posts
Joined: Jul 2004
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.
Renegade posted this at 09:46 — 12th July 2004.
He has: 3,022 posts
Joined: Oct 2002
Would you like to kindly post the solution so others may learn?
Abhishek Reddy posted this at 14:35 — 12th July 2004.
He has: 3,348 posts
Joined: Jul 2001
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.
Yianni posted this at 18:05 — 12th July 2004.
He has: 17 posts
Joined: Jul 2004
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 posted this at 18:22 — 12th July 2004.
He has: 3,348 posts
Joined: Jul 2001
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.
Anonymous posted this at 03:03 — 5th August 2004.
They have: 5,633 posts
Joined: Jan 1970
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 posted this at 21:24 — 12th July 2004.
He has: 17 posts
Joined: Jul 2004
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.
kb posted this at 04:12 — 5th August 2004.
He has: 1,380 posts
Joined: Feb 2002
use regular width...not min-width
width: 25px;'Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.