so it seems that after all this code that i have been using that i am either retarted and dont understand borders or there is a special way to do them. does anyone want to show me how to put a border around my code. i tried using border:white; border-width:1px; but for some reason its not workin. html, body { height: 100%; width: 100%; } * { margin: 0; padding: 0; } #container { height:100%; width: 100%; background: #000000; min-width: 1024px; min-height: 768px; border:white; border:width: 1px; } #menu { width: 100%; height:10%; position:relative; background-color: #ffff00; border:#FFFFFF; border-width:thin; } #tree { float:left; width: 30%; height: 90%; background-color: #008000; border:white; border-width: 1px; } #input { width: 70%; height: 60%; float: right; position:relative; background-color: #ffa500; overflow:auto; border:white; border-wdith: 1px; } #description { width: 70%; height: 30%; float: right; position:relative; background-color: #add8e6; overflow:auto; border:white; border-width: 1px; } Code (markup): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <link href="jvdt.css" rel="Stylesheet" type="text/css" /> <!--[if IE 6]> <link href="jvdtie.css" rel="Stylesheet" type="text/css" /> <![endif]--> <body> <title>JVDT - CSS Test</title> <div id=container> <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> </div> </body> </html> Code (markup):
For the colour, it should be "border-color" instead of just border. Perhaps the other thing works as well, if you apply that.
This is a 1 pixel solid white border. border: 1px solid #ffffff; Code (markup): This is a 2 pixel dashed black border. border: 2px dashed #000000; Code (markup):
hey thanks for he help. now i finally understand the syntax of borders! but im still having major probs. for some reason firefox wanted to be lilke IE and is screwing up now too. when i put borders around my divs it like moves the div down and puts a huge black hole in the middle. and also my if IE6 thing isnt working either. if anyone could help that would be great. 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> <link href="jvdt.css" rel="Stylesheet" type="text/css" /> <!--[if IE 6]> <link href="jvdtie.css" rel="Stylesheet" type="text/css" /> <![endif]--> <body> <title>JVDT - CSS Test</title> <div id=container> <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> </div> </body> </html> Code (markup): CSS for IE html,body{ height: 100-1px%; /*width: 99%*/ min-height:600px; /*width:expression(document.body.clientWidth < 300? "300px" : "auto"); */ } * { margin: 0; padding: 0; min-height:600px; } #container { height:100-1px%; width: 100-1px%; background: #000000; min-height:600px; } #menu { width: 100%; height:10%; position:relative; background: yellow; } #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): and my CSS for everything else: html, body { height: 100%; width: 100%; } * { margin: 0; padding: 0; } #container { height:100%; width: 100%; background: #000000; min-width: 1024px; min-height: 768px; border: 2px solid white; } #menu { width: 100%; height:10%; position:relative; background-color: #ffff00; border-left: 2px solid white; } #tree { float:left; width: 30%; height: 90%; background-color: #008000; border-bottom: 2px solid white; border-top: 2px solid white; border-right: 1px solid white; } #input { width: 70%; height: 60%; float: right; position:relative; background-color: #ffa500; overflow:auto; border-bottom: 2px solid white; border-top: 2px solid white; } #description { width: 70%; height: 30%; float: right; position:relative; background-color: #add8e6; overflow:auto; border-bottom: 2px solid white; border-top: 2px solid white; } Code (markup):