asked on

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

ulyssey

Hi!

The fieldset tag is made to be used in a form, nothing more.

ulyssey

see here : http://www.w3schools.com/tags/tag_fieldset.asp

Sathish David Kumar N

ASKER

If i use <form> also same result coming ....
y can try in my code ?

ASKER CERTIFIED SOLUTION

Sudaraka Wijesinghe

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Sathish David Kumar N

ASKER

what is absolute positioned ?
what is relative positioned ?

Sudaraka Wijesinghe

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

Sathish David Kumar N

ASKER

Ok ...

what is absolute positioned ?
what is relative positioned ?

Sudaraka Wijesinghe

I was talking about the CSS positioning of the HTML elements.

http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/Css/pr_class_position.asp

Sathish David Kumar N

ASKER

Thanks

Sudaraka Wijesinghe

Glad to help. Thanks for the points.

why &lt;fieldset&gt; not working properly ??

why <fieldset> not working properly ??