Forum Moderators: not2easy
In Opera and FF it shows up fine, but IE does some weird things with positioning.
The code is below, and I have prominently commented the problem DIV with "THIS IS THE PROBLEM DIV". This is the one that shows up in stark red when viewed in the browser.
Would appreciate any ideas or tweaks, thanks!
----------- CODE FOLLOWS ------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head profile="http://geotags.com/geo"><title>Testing Page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">
#wrap { width: 818px; margin: 0px auto; padding: 0}
#header { width: 818px; height: 120px; padding: 0; background: #eee; margin: 0; margin-top: -1px;}
#sidebar { width: 200px; float: right; font-size:12px; padding:5px 0px 5px 24px; background: #f1f1f1}
#main-body { float: left; width: 570px; }
#content { margin: 5px 0; padding: 0 24px; }
#title { margin: 0px 1px; clear: left; padding: 24px; background: #ccc ; border-bottom: 1px solid #aaa; border-top: 2px solid #fff; height: 20px; font-family: Arial, Helvetica, Sans-serif; font-size: 12px; color: #f6f6f6; font-weight: bold }
</style>
<!-- Head and body etc -->
</head><body><div id="wrap"><div id="header"></div><div id="title" class="musings"><h2>Heading comes here</h2></div>
<!-- Main content -->
<div id="main-body"><div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In in arcu in eros aliquam congue. Fusce dictum, dui rutrum tristique laoreet, metus massa consequat sapien, eu viverra risus metus nec nisl. Nam velit urna, blandit ut, tincidunt eget, malesuada quis, lorem. Donec sit amet lorem sed est euismod rhoncus. Donec diam mi, fermentum vel, dictum in, tincidunt vel, turpis. Morbi tincidunt nisl iaculis leo nonummy ultricies. Suspendisse volutpat. Integer arcu. Vestibulum scelerisque odio imperdiet ipsum. Sed vehicula feugiat lorem. Sed pulvinar. Praesent laoreet lorem et justo. Mauris nulla turpis, feugiat eu, condimentum et, hendrerit eget, enim. Aliquam iaculis pharetra massa. Duis condimentum erat vel neque. Sed neque velit, facilisis facilisis, varius vel, laoreet eu, est. Nulla euismod scelerisque lacus. Sed non velit. Aliquam sed ipsum non orci aliquam volutpat. Quisque justo. </p><p>Nullam quam lorem, viverra non, pellentesque sed, pretium at, dolor. Praesent molestie, massa a pellentesque bibendum, urna quam egestas nunc, sit amet tempus wisi quam non lectus. Fusce tempor aliquet mi. Nulla suscipit pede in massa. Integer arcu lectus, convallis sit amet, pretium vel, pretium in, mi. Fusce ac metus. Etiam eget nulla. Duis at arcu vel magna molestie luctus. Nunc accumsan aliquet ligula. Pellentesque congue tristique nunc. Maecenas purus quam, egestas nec, ornare vitae, volutpat vel, turpis. </p>
</div></div>
<!-- Sidebar -->
<div id="sidebar">This will be sidebar. </div>
[b]<!-- =========================================================
THIS IS THE PROBLEM DIV, COLORED IN STARK RED
=======================================================-->
<div style="background: #f00; position: absolute; width: 808px; text-align: left; margin: 0px auto; top: 24px; ">
<form id="search_form" method="get" action="/search.php">
<div style="float: right; ">
<label for="search" accesskey="9" style="display: none">Search this site:</label><br />
<input type="text" id="search" name="q" size="20" style="width: 150px" /><input type="hidden" name="w" value="" /><br />
<input type="submit" name="s" value="Search" />
</div></form>
<form id="subs_form" action="/subscribe.php" method="get">
<div style="float:right; margin-right: 24px; ">
<label for="dig" accesskey="10" style="display: none">Enter your email address:</label><br />
<input type="text" id="dig" name="u" size="20" style="width: 150px" value="http://" /><br />
<input type="submit" name="do" value="Subscribe" />
</div></form>
</div>
[/b]
</div>
</body>
</html>
<body>
<div id="wrap">
<div id="header">
<!-- =========================================================
THIS IS THE PROBLEM DIV, COLORED IN STARK RED
=======================================================-->
<div style="background: #f00; position: absolute; width: 808px; text-align: left; margin: 0px auto; top: 24px; "><form id="search_form" method="get" action="/search.php">
<div style="float: right; ">
<label for="search" accesskey="9" style="display: none">Search this site:</label><br />
<input type="text" id="search" name="q" size="20" style="width: 150px" /><input type="hidden" name="w" value="" /><br />
<input type="submit" name="s" value="Search" />
</div></form><form id="subs_form" action="/subscribe.php" method="get">
<div style="float:right; margin-right: 24px; ">
<label for="dig" accesskey="10" style="display: none">Enter your email address:</label><br />
<input type="text" id="dig" name="u" size="20" style="width: 150px" value="http://" /><br />
<input type="submit" name="do" value="Subscribe" />
</div></form>
</div>
It seems to fix IE, and doesn't affect Firefox or Opera.
The reason I want absolute positioning is because I want to move the forms way down in the content heirarchy so that when someone connects to my site without CSS functionality (e.g., simple PDAs) then they dont have to click through those forms. They should see the heading first. This is also good practice for search engines, I think.
<div style="background: #f00; position: absolute; width: 808px; text-align: left; margin: 0px auto; top: 24px; clear: left;">
But now, any idea why Firefox and Mozilla show one of these forms as a bit below in height than the other form?
EDIT: Thanks, figured it out. The form tags needs to be INSIDE the div tags. Cheers!
