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 3 of 3
  1. #1
    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

    Exclamation Unusual result of div. Unwanted rectangle appears. RESOLVED

    Trying to help another on this forum, I modified the code to the one below. The three small red divs at the top left have a rectangluar insert which I have not (knowingly) programmed in.
    Any explanations would help.

    Frank

    Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    html,body{
    height:100%;
    }
    #wrap{
    height:100%;
    width:800px;
    margin:0 auto;
    position:relative;
    }
    #right1{
    float:right;
    right:0;
    width:300px;
    height:300px;
    border:1px solid #000;
    
    }
    #right2{
    float:right;
    width:200px;
    height:200px;
    border:1px solid #00f;
    clear:both;
    }
    .ull{
    float: left;
    width: 60px;
    background-color:red;
    border: 1px solid #999;
    margin: 0 15px 15px 0;
    padding: 5px;
    
    
    }
    ul li{
    border:1px solid #0f0;
    width:50px;
    float:left;
    }
    h1{
    margin-bottom:10px;
    margin-top:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    	
    	
    	
    	<div id="right1"></div>
    	
    	<div id="right2"></div>
    	<h1>Head</h1>
    	<ul>
                <div class="ull">
    		<li>A</li></div>
                <div class="ull">
                <li>B</li></div>
                <div class="ull">
    		<li>C</li></div>
    	</ul>
     
    	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  
    	  </p>
    	
    </div>
    </body>
    </html>
    Last edited by effpeetee; 02-23-2008 at 06:34 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by effpeetee
    <ul>
    <div class="ull">

    <li>A</li></div>
    <div class="ull">
    <li>B</li></div>
    <div class="ull">
    <li>C</li></div>
    </ul>
    div can't be the first child of ul, it should be li
    Last edited by abduraooft; 02-23-2008 at 03:22 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #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 what you mean.
    My knowledge of css still has a long way to go.

    Many thanks.

    Frank

    Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    html,body{
    height:100%;
    }
    #wrap{
    height:100%;
    width:800px;
    margin:0 auto;
    position:relative;
    }
    #right1{
    float:right;
    right:0;
    width:300px;
    height:300px;
    border:1px solid #000;
    
    }
    #right2{
    float:right;
    width:200px;
    height:200px;
    border:1px solid #00f;
    clear:both;
    }
    .ull{
    float: left;
    width: 60px;
    background-color:red;
    border: 1px solid #999;
    margin: 0 15px 15px 0;
    padding: 5px;
    
    
    }
    ul li{
    border:1px solid #0f0;
    width:50px;
    float:left;
    }
    h1{
    margin-bottom:10px;
    margin-top:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    	
    	
    	
    	<div id="right1">right 1</div>
    	
    	<div id="right2">right 2</div>
    	<h1>Head</h1>
    	<ul>
                
    		<li class="ull">A</li>
             
                <li class="ull">B</li>
                
    		<li class="ull">C</li>
    	</ul>
     
    	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  
    	  </p>
    	
    </div>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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