Solved

why <fieldset> not working properly ??

Posted on 2010-11-08
10
388 Views
Last Modified: 2012-05-10

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

0
Comment
  • 4
  • 4
  • 2
10 Comments
 
LVL 2

Expert Comment

by:ulyssey
Comment Utility
Hi!

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

Expert Comment

by:ulyssey
Comment Utility
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
Comment Utility
If i use <form> also same result coming ....
y can try in my code ?
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
Comment Utility
It's because your .box elements are absolute positioned.
Try using an absolute/relative positioned DIV instead.
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
Comment Utility
what is absolute positioned ?
what is relative  positioned  ?
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
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
 
LVL 20

Author Comment

by:Sathish David Kumar N
Comment Utility
Ok ...

what is absolute positioned ?
what is relative  positioned  ?  
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
0
 
LVL 20

Author Closing Comment

by:Sathish David Kumar N
Comment Utility
Thanks
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
Comment Utility
Glad to help. Thanks for the points.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now