Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: float help

  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    float help

    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/!...test/test.html


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

    Code:
    <!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>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
    <![endif]-->      
     
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
    <![endif]-->  
    </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>
    
    
        
        
       
    <!--closes wrap-->
    <div style="clear: both;"></div>
    </div>
    <!-- footer -->
    <!--#include virtual="includes/footer.html" -->
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
    <![endif]-->

    <!--[if IE 7]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
    <![endif]-->
    </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>





    <!--closes wrap-->
    <div style="clear: both;"></div>
    </div>
    <!-- footer -->
    <!--#include virtual="includes/footer.html" -->
    </body>
    </html>

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •