how do create a min-width for the whole page so i can get a scroll bar on the bottom on resize? here is my code: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <style> </style> <link href="jvdt.css" rel="Stylesheet" type="text/css" /> </head> <body> <title>JVDT - CSS Test</title> <div id="menu"><center>yellow</center></div> <div id="tree">green blahbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br /> valh <br /> afadfdfa <br /> dffad <br /> fadf <br /> dafa <br /> dfadfaf <br /> dafadf <br /> afdfad <br /> fadfa <br /> dfadfad <br /> fdf <br /> fdfadfdaf <br /> d <br /> fda <br /> fad <br /> f <br /> ad <br /> fad <br /> f <br /> ad <br /> fa <br /> d <br /> fa <br /> df <br /> ad fd fa d f daf afd adsf </div> <div id="input">orange adkfljadl;f <br /> adfadfdaf <br /> adfadfadfad <br /> afdafdfdaf <br /> hthgjyud <br /> agdfgfagfafg <br /> adfadffdafgasghg<br /> <br /> afdedf <br /> <br /> adfadfadfdhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj <br /> adfadffhfgd <br /> adfahgrfd <br /> fddagf <br /> dfadfag <br /> afdafafsc <br /> adfdadfdfa <br /> daffaaf </div> <div id="description">lightblue dafdfdsxd<br /> <br /> dfdafdfhhhhhhhhhhhhhhhhhhhhhhhhhhggggggggggggggggggggdffddddddddddddddddddddddddddddddddd <br /> afadffad <br /> adfadfadfd <br /> adfafadfgdaf <br /> adfafdfa <br /> afdfadfdag <br /> dafdffdadfag <br /> dfa <br /> dfad <br /> dagafg <br /> dfgfhghh <br /> dfadhfhsf <br /> fagafhafg <br /> fdgdfgagg <br /> agshhgfghs <br /> gffdgfhgfh <br /> agfhhgs <br /> dgadgharf <br /> dgfdgh <br /> dgdagfgdagda </div> </body> </html> Code (markup): CSS: html,body{ height: 100%; width: 100%; min-height:600px; min-width:300px; } * { margin: 0; padding: 0; } #container { height:100%; width: 100%; background: #000000; min-width:300px; } #menu { width: 100%; height:10%; position:relative; background: yellow; overflow:auto; } #tree { float:left; width: 30%; height: 90%; background: green; overflow:auto; } #input { width: 70%; height: 60%; float: right; position:relative; background: orange; overflow:auto; } #description { width: 70%; height: 30%; float: right; position:relative; background: lightblue; overflow:auto; } Code (markup): i know there is alot of nonsense going on in the html but i was using that to test the scroll bars
Using min-width is how you do it. However, older versions versions of ie ignore the min-width statement. For those browsers you can use something like this: width:expression(document.body.clientWidth < 300? "300px" : "auto"); Code (markup):
does anyone know a css hack that will make the min-height and min-width work on IE6 and below??? and also how and where in my code to put it bc im really not good at this stuff
I assume he means that you replace all the instances of "min-width" with variations of the code he provided.
You can: A) place it in your external css file along with all of your other css declarations B) place it in an ie only external css file like this <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" charset="utf-8" href="ie6.css" media="screen" /> <![endif]--> Code (markup): C) You can place it in your html file like this <!--[if lt IE 7]> <style type="text/css"> #element { width:expression(document.body.clientWidth < 300? "300px" : "auto"); } </style> <![endif]--> Code (markup): HTH
Hmmm, I use this technique to implement a max-width myself. I did get this to sort of work for min-width but ie acts quirky. Here is the code I use for max-width that works fine <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--[if lt IE 7]> <style type="text/css"> p { width: expression(document.body.clientWidth > 300 ? "300px" : "auto"); } </style> <![endif]--> <title>IE max-width</title> </head> <body> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> </body> </html> Code (markup): Here is is the code for min-width that sort of works <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--[if lt IE 7]> <style type="text/css"> p { width: expression(document.body.clientWidth < 300 ? "300px" : "auto"); } </style> <![endif]--> <title>IE min-width</title> </head> <body> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> </body> </html> Code (markup): Wierd, I assumed if it worked fine for a max-width setting that it should work equally as well for a min-width settings. Sorry.
ya its weird like the max-height thing works but not the min. and its diff for mine bc i got multiple divs and stuff
Yeah, I did some reading up and it only looks like it's really supported with newer versions of IE. That kinda sucks.
Not really. It's a Bad Idea® It's mixing behavior (javascript) into presentation (css). A better practice would be to put the scripting in its own .js file, and that's a PITA for this. I just use the expression value. too. What kinda sucks is having had to wait so long for IE to support this bit of css. Whoopee! IE7 now supports about 47% of css2. cheers, gary