littlefoible
06-21-2008, 01:33 PM
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>
<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>
Here's the 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>