Unusual result of div. Unwanted rectangle appears. RESOLVED

effpeetee

02-23-2008, 02:53 PM

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) :confused: programmed in.
Any explanations would help.:D

Frank

<!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>

abduraooft

02-23-2008, 03:04 PM

<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

effpeetee

02-23-2008, 03:15 PM

This what you mean.:D
My knowledge of css still has a long way to go.

Many thanks.

Frank

<!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>