HTML Help

grafista · Joined: 02 Oct 2009 Posts: 2

I created an online form and embedded the html snippet in my iweb webpage. Everything works fine for me in Firefox, but in IE7 the form extends vertically off the page so you can't see or click the submit button. I greatly appreciate any help.
http://www.citychristianpress.com/Contact.html

Here is my code for the page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 2.0.4" />
<meta name="iWeb-Build" content="local-build-20091002" />
<meta name="viewport" content="width=700" />
<title>Contact</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Contact_files/Contact.css" />
<style type="text/css">
/*<![CDATA[*/
@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="Contact_files/Contact.js"></script>
</head>
<body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: #ffffff; text-align: left; width: 700px; " id="body_content">
<div style="float: left; margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 128px; width: 700px; height: 128px; left: 0px; position: absolute; top: 8px; width: 700px; z-index: 1; " class="tinyText style_SkipStroke stroke_0 shadow_0">
<a href="Home.html" title="Home.html"><img src="Images/header.jpg" alt="" style="border: none; height: 128px; width: 700px; " /></a>
</div>

<div id="id1" style="height: 52px; left: -3px; position: absolute; top: 144px; width: 707px; z-index: 1; " class="style_SkipStroke_1">
<div class="text-content style_External_707_52" style="padding: 0px; ">
<div class="style"></div>
</div>
</div>

<div id="id2" style="height: 33px; left: 300px; position: absolute; top: 154px; width: 85px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_85_33" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style"><a class="class1" href="Submissions.html" title="Submissions.html"><span class="style_2">Submissions</span></a></p>
</div>
</div>
</div>

<div id="id3" style="height: 48px; left: 395px; position: absolute; top: 148px; width: 86px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_86_48" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_1"><a class="class2" href="Doctrinal_Statement.html" title="Doctrinal_Statement.html"><span class="style_2">Doctrinal Statement</span></a></p>
</div>
</div>
</div>

<div style="height: 441px; width: 699px; height: 441px; left: 1px; position: absolute; top: 204px; width: 699px; z-index: 1; " class="tinyText stroke_1">
<div style="position: relative; width: 699px; ">
<img src="Contact_files/shapeimage_1.jpg" alt="" style="height: 441px; left: 0px; position: absolute; top: 0px; width: 699px; " />
</div>
</div>

<div id="id4" style="height: 48px; left: 496px; position: absolute; top: 148px; width: 54px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_54_48" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_1"><a class="class3" href="Online_Store.html" title="Online_Store.html"><span class="style_2">Online Store</span></a></p>
</div>
</div>
</div>

<div id="id5" style="height: 33px; left: 564px; position: absolute; top: 154px; width: 48px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_48_33" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style"><a class="class4" href="FAQ.html" title="FAQ.html"><span class="style_2">FAQ</span></a></p>
</div>
</div>
</div>

<div id="id6" style="height: 2px; left: 0px; position: absolute; top: 195px; width: 699px; z-index: 1; " class="style_SkipStroke_3">
<div class="text-content style_External_699_2" style="padding: 0px; ">
<div class="style"></div>
</div>
</div>

<div style="height: 277px; width: 333px; height: 277px; left: 63px; position: absolute; top: 209px; width: 333px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 333px; ">
<img src="Contact_files/shapeimage_2.jpg" alt="" style="height: 277px; left: 0px; position: absolute; top: 0px; width: 333px; " />
</div>
</div>

<div id="id7" style="height: 224px; left: 76px; position: absolute; top: 223px; width: 179px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_179_224" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_2">Contact Us</p>
</div>
</div>
</div>

<div id="id8" style="height: 61px; left: 618px; position: absolute; top: 144px; width: 83px; z-index: 1; " class="style_SkipStroke_4">
<div class="text-content style_External_83_61" style="padding: 0px; ">
<div class="style"></div>
</div>
</div>

<div id="id9" style="height: 49px; left: 6px; position: absolute; top: 148px; width: 117px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_117_49" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_3"><a class="class5" href="John_Calvin_Goes_to_Berkeley.html" title="John_Calvin_Goes_to_Berkeley.html">John Calvin Goes to Berkeley</a></p>
</div>
</div>
</div>

<div id="id10" style="height: 31px; left: 624px; position: absolute; top: 154px; width: 67px; z-index: 1; " class="style_SkipStroke_2">
<div class="text-content style_External_67_31" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style"><a class="class6" href="" title=""><span class="style_2">Contact</span></a></p>
</div>
</div>
</div>

<div id="id11" style="height: 48px; left: 127px; position: absolute; top: 148px; width: 164px; z-index: 1; " class="style_SkipStroke_5">
<div class="text-content style_External_164_48" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_3"><a class="class7" href="The_University_Christian_Fellowship_Series.html" title="The_University_Christian_Fellowship_Series.html"><span class="style_2">The University Christian Fellowship Series</span></a></p>
</div>
</div>
</div>

<div id="id12" style="height: 382px; left: 43px; position: absolute; top: 525px; width: 445px; z-index: 1; " class="style_SkipStroke_6 stroke_2">
<div class="text-content graphic_shape_layout_style_default_External_443_380" style="padding: 1px; ">
<div class="graphic_shape_layout_style_default"></div>
</div>
</div>

<div id="id13" style="height: 354px; left: 76px; position: absolute; top: 483px; width: 294px; z-index: 1; " class="style_SkipStroke_5">
<div class="text-content style_External_294_354" style="padding: 0px; ">
<div class="style_1">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_2">Send Us An Email</p>
</div>
</div>
</div><form>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 373px; left: 66px; position: absolute; top: 528px; width: 568px; z-index: 1; ">
<iframe id="widget0-frame" src=".//Contact_files/widget0_markup.html" frameborder="0" style="width: 100%; height: 100%;" scrolling="no" marginheight="0" marginwidth="0" allowTransparency="true"></iframe>
</div>
<script type="text/javascript"><![CDATA[//><!]]></script>
<div id="id14" style="height: 64px; left: 76px; position: absolute; top: 913px; width: 294px; z-index: 1; " class="style_SkipStroke_5">
<div class="text-content style_External_294_64" style="padding: 0px; ">
<div class="style_1"></div>
</form>

<p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_4">Send Us An Email</p>
</div>
</div>
</div>
<div style="height: 977px; line-height: 977px; " class="spacer"> </div>
</div>
<div style="height: 100px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>

sticks464 · Joined: 31 Dec 2006 Posts: 2627

You need to increase the height of the widget container until the submit button can be viewed or better yet don't set a specific height and let the form content push the bottom of the container down.
Code: <div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 373px;

grafista · Joined: 02 Oct 2009 Posts: 2

Thanks for the help!