Min and max width coding (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

spinningjennie -> Min and max width coding (9/22/2006 3:44:22)

I'd like to create a min and max width on this page.

Here's the stylesheet.

Ideally I'd also like the #nav div to also have a minimum width so the logo doesn't stick out when the window is resized.

I've tried to put some javascript into my page for IE, and some code in #container div for other browsers.

It doesn't seem to work.

I'd appreciate any advice.

Regards,
spinningjennie





jaybee -> RE: Min and max width coding (9/22/2006 4:41:38)

Try this

http://www.cameronmoll.com/archives/000892.html

it's one of those things you have to play around with until you get it right. The one you want for min and max is right at the bottom but read why first. It works for me on a containing div that has no direct content of its own but gets pushed into place by other content divs.

On my site, if you looked at the css you need to be careful as I have different ones in all of my sheets. I set the max width to 300px for handhelds but then I have to override it in the other sheets or the browser hangs onto 300px when you switch to the default or hi-vis sheets.



spinningjennie -> RE: Min and max width coding (9/26/2006 2:51:27)

Thanks very much Jaybee for your advice. I'm afraid, however that I'm not getting it to work in either IE or FireFox.

Despite the Cameron Moll link saying that the technique would fix the IE window freezing on resize, it does freeze.

And in FireFox there appears to be no minimum limit on the screen size.


Here's the page.
Here's the stylesheet.

Any advice on this vexing issue much appreciated!
spinningjennie



jaybee -> RE: Min and max width coding (9/26/2006 4:59:40)

The width: expression is for IE only.

You need to specify the normal HTML
min-width:
max-width:
statements as well for the compliant browsers.



spinningjennie -> RE: Min and max width coding IE freeze (9/27/2006 3:17:14)

Sorry Jaybee. I thought I'd added the min-width and max-width. Plain careless. I've now added this and the min width works in FireFox but in IE the screen freezes when I reduce the width, despite the code seeming to be following the Cameron Moll link instructions.

Here's my stylesheet code:

#container, #footer {
width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
min-width:740px;
max-width:1200px;
}


Any thoughts on this much appreciated!
spinning jennie



jaybee -> RE: Min and max width coding IE freeze (9/27/2006 4:48:43)

I've got it as two separate lines on a site I'm doing now and it seems to work as long as you're not using frames, Frames screw it up completely as I found out when my client decided to forward several parked domains to the main site.

Try
max-width:1200px;
width:expression(document.body.clientWidth > 1206? "1200px": "auto" );

min-width:740px;
width:expression(document.body.clientWidth < 746? "740px": "auto" );

What I don't get is why you want to do this on that site. Set your widths as fluid, %ages, and let it move in and out. The only reason I'm doing it is because on one site I have a handheld style sheet I wanted to force and on the other I have a 5 column design that screws up if the window is resized by so much as a pixel and I can't persuade the client to change the layout.

Given the option I wouldn't be touching expressions. The whole thing will go to pot anyway if someone has javascript turned off in their browser.



spinningjennie -> RE: Min and max width coding IE (9/27/2006 23:50:31)

Thanks again for the input Jaybee. I've now separated the expressions as you suggest, which does stop the IE6 freezing when I reduce the window size. However there is no longer any limit on my ability to reduce the screen size.

Here's the page again.

Here's the stylesheet again.

As to the reasons for including max/min width on this draft site, I was trying to make a miniumum width to stop the logo from poking out from its column when the screen size is reduced. And I was trying to make a max width because I was alerted by Tailslide that it's a good idea to make a max width limit to improve readability. Very long lines of text are hard to read.

I take your point about the javascript being able to be disabled. I don't know if this is a major concern, other than it means that the expression won't work for those people. Does it mean the site may not be viewed at all?

Thanks again.
spinningjennie



jaybee -> RE: Min and max width coding IE (9/28/2006 4:42:51)

IMO the logo poking out doesn't cause a major problem as it is in a different coloured background.

The expression thing is not something I'm familiar with, I just got it to work on my site. It may be because I have it on a single div which encompasses the entire page. Like I said before it's a case of playing around with it. In your case I wouldn't bother. If people size everything down to the point where it becomes silly they'll soon size it back up again. You have to come to a point where you make people take responsibility for their own actions.




spinningjennie -> RE: Min and max width coding IE (9/28/2006 23:30:36)

Thanks again Jaybee! You're probably right that I don't need to worry about it in this case. With your help I have now managed at least to get the max width to work in IE!

Cheers,
spinningjennie



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125