100% of window -- how?
I'd really appreciate it if anyone could help me with this problem -- I've been trying just to make two css boxes in my page the full size of the browser window, and when I set them to width: 100% it makes them too big (with scrollbars) in Firefox, and too small in IE. Even if I can't get it perfect in IE I feel like I should be able to in FF...but I can't figure out what I'm doing wrong! I'm new to CSS, this is the first page I've made.
Here's the code:
HTML Code:<html> <head> <title>colleen macIsaac's comics and illustrations and other stuff</title> <style media="all" type="text/css"> <!-- body { background-color: #ffffff; color: #AA8D69; margin: 25px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;} a:link { color: #9ABC65; text-decoration: none; background-color: transparent } a:visited { color: #D0D9C1; text-decoration: none; background-color: transparent } a:hover { color: #8DCA30; text-decoration: underline; background-color: transparent } a:active { color: #6FB700; text-decoration: underline; background-color: transparent } } #header { color: #AA8D69; background-color: #4F2B00; padding: 15px; position: absolute; top: 0px; left: 0px; height: 255px; width: 100%; } .style1 {color: #999933; font-family: Arial, Helvetica, sans-serif; font-size: x-small;} #images { color: #AA8D69; background-color: #4F2B00; padding: 10px; position: absolute; top: 0px; left: 0px; width: 100%; height: 255px; } #imagemap { color: #000000; padding: 0px; position: absolute; top: 272px; left: 0px; width: 100%; } .style2 { font-family: Arial, Helvetica, sans-serif; font-size: small; color: #AA8D69; } #footer { color: #4F2B00; background-color: #75552E; padding: 9px; position: absolute; top: 765px; left: 0px; height: 50px; width: 100%; } --> </style> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <style type="text/css"> <!-- .style3 {color: #4F2B00; font-family: Arial, Helvetica, sans-serif; font-size: x-small; } --> </style> </head> <body> <div id="imagemap"> <center><img src="http://www.littlefoible.net/header-1.jpg" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="107,17,153,37" href="news.html"> <area shape="rect" coords="168,14,255,39" href="http://littlefoible.net"> <area shape="rect" coords="273,17,339,40" href="comics.html"> <area shape="rect" coords="352,15,462,39" href="http://galsan.livejournal.com"> <area shape="rect" coords="474,16,510,37" href="bio.html"> <area shape="rect" coords="524,15,594,39" href="contact.html"> <area shape="rect" coords="607,15,653,38" href="shop.html"> </map></center> </div> <div class="style1" id="images" > <p align="center" class="style2"> </p> <p align="center" class="style2"><a href="http://littlefoible.net/art/socks.jpg" title="City Socks, personal work" rel= lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-socks.jpg" width="55" height="55"></a> <a href="http://www.littlefoible.net/art/birchtie.jpg" title="Birches, personal work" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-birch.jpg" width="55" height="55"></a> <a href="http://www.littlefoible.net/art/sketch/6088Coburg.jpg" title="Coburg Road, personal work" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-6088.jpg" width="55" height="55"></a> <a href="http://colleen.radarfriends.net/art/colleen-halloween-small.jpg" title="The Spook, Pique Newsmagazine cover" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-ghost.jpg"></a> <a href="http://www.littlefoible.net/art/handbirds-gulls.jpg" title="Handbirds: Gulls, series" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-handgull.jpg" width="55" height="55"></a> <a href="http://colleen.radarfriends.net/art/2008/ibex-reststop.jpg" title="Rest Stop, personal work" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-ibex.jpg" width="55" height="55"></a> <a href="http://colleen.radarfriends.net/art/2008/redkite.jpg" title="The Red Kite, personal work" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-kite.jpg" width="55" height="55"></a> <a href="http://colleen.radarfriends.net/folio/workingholiday.jpg" title="Working Holiday, Pique Newsmagazine" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-work.jpg"></a> <a href="http://www.littlefoible.net/art/sketch/yowza.jpg" title="Yow; Za, personal work" rel="lightbox[roadtrip]"><img src="http://www.littlefoible.net/art/thumbs/th-yow.jpg" width="55" height="55"></a> </p> <p align="center" class="style2"> </p> <p align="center" class="style2">welcome to<strong> little foible</strong>. we're just in the middle of some construction here, but we should be up and running shortly!</p> <p align="center" class="style2">please visit <a href="http://colleen.radarfriends.net">http://colleen.radarfriends.net</a> until then. </p> </div> <div class="style1" id="footer" > <div align="right"> <p align="center">best viewed on mozilla firefox <br> all content © colleen macIsaac 2008 </p> </div> </div> <!-- Start of StatCounter Code --> <script type="text/javascript"> sc_project=3603002; sc_invisible=1; sc_partition=41; sc_security="3f7bb1c9"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c42.statcounter.com/3603002/0/3f7bb1c9/1/" alt="free hit counter script" ></a> <!-- End of StatCounter Code --> </div></noscript> </body> </html>
CSS Codes
Reply With Quote
Bookmarks