why <fieldset> not working properly ??


Hi ,

if i am <fieldset> inside <div > yag means .... <fieldset> tag not working properly ?
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

 <style type="text/css">  
<!--  
.box {  
        position:absolute;  
        width:50px;  
        height:170px;  
        z-index:11;  
}  
.yellow {  
        background-color:#FF0;  
}  
.orange {  
        background-color:#FC6;  
}  
.green {  
        background-color:#9F9;  
}  
.blue {  
        background-color:#3CC;  
}  
#appDiv1 {  
        left:340px;  
        top:150px;  
}  
#appDiv2 {  
        left:420px;  
        top:150px;  
}  
#appDiv3 {  
        left:500px;  
        top:150px;  
}  
#appDiv4 {  
        left:580px;  
        top:150px;  
}  
#appDiv5 {  
        left:660px;  
        top:150px;  
}  
#appDiv6 {  
        left:340px;  
        top:350px;  
}  
#appDiv7 {  
        left:420px;  
        top:350px;  
}  
#appDiv8 {  
        left:500px;  
        top:350px;  
}  
#appDiv9 {  
        left:580px;  
        top:350px;  
}  
#appDiv10 {  
        left:660px;  
        top:350px;  
}  
.divider {  
        position:absolute;  
        background-color: #FF0000;  
}  
#d1 {  
        left:310px;  
        top:326px;  
        width:440px;  
        height:0px;  
        z-index:22;  
        padding:0px;
}  
#d2 {  
        left:565px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:0px;  
}  
#d3 {  
        left:465px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:0px;  
}
.controls {  
        position:absolute;  
        width:60px;  
        height:30px;  
        z-index:3;  
}  
#c1 {  
        left:103px;  
        top:287px;  
}  
#c2 {  
        left:545px;  
        top:555px;  
}  
 

-->  
</style> 
</head>
<body>
<fieldset>
<div id="appDiv1" class="box yellow"></div>  
				<div id="appDiv2" class="box yellow"></div>  
				<div id="appDiv3" class="box yellow"></div>  
				<div id="appDiv4" class="box green"></div>  
				<div id="appDiv5" class="box green"></div>  
				  
				<div id="appDiv6" class="box orange"></div>  
				<div id="appDiv7" class="box orange"></div>  
				<div id="appDiv8" class="box orange"></div>  
				<div id="appDiv9" class="box blue"></div>  
				<div id="appDiv10" class="box blue"></div>  
			 
			    <div id="d1" class="divider" ></div>  
				<div id="d2" class="divider" ></div>  
                <div id="c1" class="controls">  
			  
				</div>  
				<div id="c2" class="controls">  
				  <input type="button" value="<" size="2" onclick="back();"> 
			      <input type="button" value=">" size="2" onclick="front();">
			      <input type="hidden" id="divCount" name="divCount" vaule="3">
				</div>
				</fieldset> 
				
</body>
</html>

Open in new window

LVL 20
Sathish David  Kumar NArchitectAsked:
Who is Participating?
 
Sudaraka WijesingheConnect With a Mentor Web Application ProgrammerCommented:
It's because your .box elements are absolute positioned.
Try using an absolute/relative positioned DIV instead.
0
 
ulysseyCommented:
Hi!

The fieldset tag is made to be used in a form, nothing more.
0
 
ulysseyCommented:
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Sathish David Kumar NArchitectAuthor Commented:
If i use <form> also same result coming ....
y can try in my code ?
0
 
Sathish David Kumar NArchitectAuthor Commented:
what is absolute positioned ?
what is relative  positioned  ?
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
I mean like this
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

 <style type="text/css">  
<!--  
.box {  
        position:absolute;  
        width:50px;  
        height:170px;  
        z-index:11;  
}  
.yellow {  
        background-color:#FF0;  
}  
.orange {  
        background-color:#FC6;  
}  
.green {  
        background-color:#9F9;  
}  
.blue {  
        background-color:#3CC;  
}  
#appDiv1 {  
        left:340px;  
        top:150px;  
}  
#appDiv2 {  
        left:420px;  
        top:150px;  
}  
#appDiv3 {  
        left:500px;  
        top:150px;  
}  
#appDiv4 {  
        left:580px;  
        top:150px;  
}  
#appDiv5 {  
        left:660px;  
        top:150px;  
}  
#appDiv6 {  
        left:340px;  
        top:350px;  
}  
#appDiv7 {  
        left:420px;  
        top:350px;  
}  
#appDiv8 {  
        left:500px;  
        top:350px;  
}  
#appDiv9 {  
        left:580px;  
        top:350px;  
}  
#appDiv10 {  
        left:660px;  
        top:350px;  
}  
.divider {  
        position:absolute;  
        background-color: #FF0000;  
}  
#d1 {  
        left:310px;  
        top:326px;  
        width:440px;  
        height:0px;  
        z-index:22;  
        padding:0px;
}  
#d2 {  
        left:565px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:0px;  
}  
#d3 {  
        left:465px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:0px;  
}
.controls {  
        position:absolute;  
        width:60px;  
        height:30px;  
        z-index:3;  
}  
#c1 {  
        left:103px;  
        top:287px;  
}  
#c2 {  
        left:545px;  
        top:555px;  
}  
 

-->  
</style> 
</head>
<body>
<div style="position:relative; border:1px solid gray; width:100%; height:100%;">
<div id="appDiv1" class="box yellow"></div>  
                                <div id="appDiv2" class="box yellow"></div>  
                                <div id="appDiv3" class="box yellow"></div>  
                                <div id="appDiv4" class="box green"></div>  
                                <div id="appDiv5" class="box green"></div>  
                                  
                                <div id="appDiv6" class="box orange"></div>  
                                <div id="appDiv7" class="box orange"></div>  
                                <div id="appDiv8" class="box orange"></div>  
                                <div id="appDiv9" class="box blue"></div>  
                                <div id="appDiv10" class="box blue"></div>  
                         
                            <div id="d1" class="divider" ></div>  
                                <div id="d2" class="divider" ></div>  
                <div id="c1" class="controls">  
                          
                                </div>  
                                <div id="c2" class="controls">  
                                  <input type="button" value="<" size="2" onclick="back();"> 
                              <input type="button" value=">" size="2" onclick="front();">
                              <input type="hidden" id="divCount" name="divCount" vaule="3">
                                </div>
                                </fieldset> 
                                
</body>
</html>

Open in new window

0
 
Sathish David Kumar NArchitectAuthor Commented:
Ok ...

what is absolute positioned ?
what is relative  positioned  ?  
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
0
 
Sathish David Kumar NArchitectAuthor Commented:
Thanks
0
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Glad to help. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.