Min & Max Width in IE6

Forum Moderators: open

Message Too Old, No Replies

Min & Max Width in IE6

Need script to apply these rules in IE6

erdy

9:46 pm on Apr 11, 2007 (gmt 0)

Hello,

I need to set 'min-width' & 'max-width' rules to two divs and aren't sure about the Java Script for it to make it work in IE6 and below.

The two divs in question have a width 0f 75% and are centered on top of each other. My Javascript is in a seperate CSS file with the following rule on it:

#container, #base {
width: expression(document.body.clientWidth < 680? "680px" : document.body.clientWidth > 980? "980px" : "auto");
}

When this is applied I think it only applies these rules to the body?

How do I apply these rules to the #container and #base divs to be set at 75% of the body until they reach below 680px of over 980px?

Please help.

Regards

Erdy

Achernar

12:48 pm on Apr 12, 2007 (gmt 0)

When this is applied I think it only applies these rules to the body?

It applies the rules to the tags with id "container" or "base", not to the <body> tag (unless it has one of these IDs).

erdy

1:25 pm on Apr 12, 2007 (gmt 0)

Do you mean specifically the tags 'container' and 'base' or just the outer most divs on a page?

Achernar

1:30 pm on Apr 12, 2007 (gmt 0)

I've done a test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<style> 
  #container, #base { 
  border: solid 1px red; 
  min-width: 680px; 
  max-width: 980px; 
  width: 75%; 
  _width: expression( document.body.clientWidth < 926? '680px': 
  document.body.clientWidth > 1325? '980':'75%' 
); 
} 
</style> 
</head> 
<body> 
body 
<div id="container">container</div> 
<div id="base">base</div> 
</body> 
</html>

You'll have to fine-tune the exact trigger values depending on your document type and the style of your body and #container #base blocks.

There is also the alternative to use a specially crafted script (I can find the url if needed) instead "expression()" rules.

Achernar

1:34 pm on Apr 12, 2007 (gmt 0)

I've forgot a 'px'

1325? '980':'75%'

should be

1325? '980px':'75%'

erdy

2:07 pm on Apr 12, 2007 (gmt 0)

I'm a bit confused here, sorry.
Only I'm a comlete novice when it comes to JS.
I noticed you changed the values before the? in the script to other values. What does this do?
You have also changed the Auto at the end to 75%.
What I wanted is for my centered div to be at 75% width unless it was greater than 980px or less than 480px.

If you explain why you changed those values I could possibly work it out myself.

Thanks

Erdy

Achernar

2:56 pm on Apr 12, 2007 (gmt 0)

The point here is to get a width value from an element, and decide from this value if your div has reached a min or a max. For this you can't use the value of the div itself, since once it is set to its min or max value (instead of 75%), its width will not change anymore ; it will stay on the boundary value (min or max).
So the correct element to base the behavior on is generaly body (or at least a parent container whose width is not fixed).

Now, to get the correct value of body.width that will trigger the min/max value for the div, you have to compute it.
Something like this:

max value of div: 980
rule between div.width and container.width (in our case body.width): div.width= 0.75 x container.width (0.75 is 75%)

What is the max value of container.width at which point div.width reach its max-width?

div.max-width = 980
container.max = 980/0.75 +/- a fixed number of pixels for borders margins and paddings associated with these elements

div.min-width = 680
container.max = 680/0.75 +/- a fixed number of pixels for borders margins and paddings associated with these elements

You can fine-tune the value of the "fixed number of pixels" by changing the size of the window and seeing if the change in the width of the div is continuous, or if at one point it jumps to its min/max value.

erdy

8:48 pm on Apr 12, 2007 (gmt 0)

Thanks Achernar.