float help

finstah1

10-31-2007, 02:08 PM

I'm trying to get the blue box (03.gif) on the page below to move up to the top of the red box (00.gif). Right now blue is inside of the green (01.gif) div so that is as high as it will go. However when I try to add it to the red div, it breaks the layout. Am I missing a clear: both or something? What am I doing wrong? BTW, yellow is 02.gif

Here's the page:
http://www.mis2.udel.edu/~cleonard/!copland/athleticsgifts/test/test.html

Here's the code (ignore the ie stylesheets. They are not used for this portion of the design):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>

html {height: 100%; overflow: auto;}
body {height: 100%; font: normal 12px/1.2 Arial, Helvetica, san-serif; color: #666; background: #063060 url("images/bgd_body.png"); padding:36px 0 36px 0;}
* {margin: 0;padding: 0;}
#wrap {width: 770px; height: auto; min-height: 98%; margin: 0 auto; /*padding-bottom: 40px;*/ text-align: left;}
* html #wrap {height: 98%;}

#headertop {width: 770px; height: 388px;}
h1#toptopImg {background: url("02.gif") no-repeat left top; height: 42px; text-indent: -2000px;}

h1#topImg {background: url("00.gif") no-repeat left top; height: 127px; text-indent: -2000px;}
#midImg {background: url("01.gif") no-repeat left top; height: 219px; width: 770px;}

#randomImg {float: right; height: 349px; width: 276px; border: none; margin: 0; padding: 0; z-index: 9000;}
</style>



</head>
<body>
<div id="wrap">

<div id="headertop">
<h1 id="toptopImg">this</h1>
<h1 id="topImg">that</h1>

<div id="midImg">
<div id="randomImg">
<script type="text/javascript">
images = new Array(1);

images[0] = "<img src='03.gif' alt='Athletes'>";
index = Math.floor(Math.random() * images.length);

document.write(images[index]);
</script>
</div>
</div>
</div>


<div style="clear: both;"></div>
</div>


</body>
</html>

finstah1

10-31-2007, 03:40 PM

since I can't edit the post for some reason. Here is the updated code. I got it to work in IE7 and FF but IE6 is still broken.

Here's the page:
http://www.mis2.udel.edu/~cleonard/!...test/test.html

Here's the code (ignore the ie stylesheets. They are not used for this portion of the design):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>

html {height: 100%; overflow: auto;}
body {height: 100%; font: normal 12px/1.2 Arial, Helvetica, san-serif; color: #666; background: #063060 url("images/bgd_body.png"); padding:36px 0 36px 0;}
* {margin: 0;padding: 0;}
#wrap {width: 770px; height: auto; min-height: 98%; margin: 0 auto; /*padding-bottom: 40px;*/ text-align: left;}
* html #wrap {height: 98%;}

#headertop {width: 770px; height: 42px;}
#headersubtop {width: 770px; height: 127px;}
h1#toptopImg {background: url("yellow.gif") no-repeat left top; height: 42px; text-indent: -2000px;}

#topImg {background: url("red.gif") no-repeat left top; height: 127px; width: 495px;}
#midImg {background: url("green.gif") no-repeat left top; height: 219px; width: 495px; }

#randomImg {height: 349px; width: 276px; border: none; margin-left: 495px; padding-left: 0; z-index: 9000;}
</style>



</head>
<body>
<div id="wrap">

<div id="headertop"><h1 id="toptopImg">this</h1> </div>
<div id="topImg">
<div id="randomImg">
<script type="text/javascript">
images = new Array(1);

images[0] = "<img src='blue.gif' alt='Athletes'>";
index = Math.floor(Math.random() * images.length);

document.write(images[index]);
</script>
</div>
</div>

<div id="midImg">

</div>
</div>


<div style="clear: both;"></div>
</div>


</body>
</html>

effpeetee

10-31-2007, 04:30 PM

This is the result of the W3 Validator.

Validation Output: 6 Errors
Line 5, Column 6: required attribute "type" not specified.
<style>✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Line 39, Column 50: document type does not allow element "img" here.
images[0] = "<img src='blue.gif' alt='Athletes'>";✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

Line 39, Column 51: end tag for "img" omitted, but OMITTAG NO was specified.
images[0] = "<img src='blue.gif' alt='Athletes'>";✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Line 39, Column 16: start tag was here.
images[0] = "<img src='blue.gif' alt='Athletes'>"; Line 58, Column 5: end tag for element "div" which is not open.
</div>✉
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occurred in a script section of your document, you should probably read this FAQ entry.

Line 43, Column 12: XML Parsing Error: Opening and ending tag mismatch: img line 39 and script.
</script>✉
Line 44, Column 15: XML Parsing Error: Opening and ending tag mismatch: script line 36 and div.
</div> ✉

Frank

finstah1

10-31-2007, 04:36 PM

some things are missing (because this is a test page only) that I added back in to validate. But it still doesn't fix the problem.