Imitating a FIELDSET from a DIV [Archive]

ralxz

12-05-2005, 03:47 AM

Hey. I have a small dilema here.

From what I've learned so far, I understand that <fieldset>s have very crappy compatibility with a wide range of browsers.

I am looking to make a DIV imitate a fieldset with a legend. Basicly, this is what I want to do:

http://www.watermark-it.com/images/32697907123.jpg

Does anyone know any way to do this?

Much appreciated,
ralxz.

_Aerospace_Eng_

12-05-2005, 04:16 AM

What browsers would you be talking about? The current browsers out now support fieldsets fine, as does opera 7.54 and IE5.5 and possibly even IE5.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
background:#CCC;
color:#000;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
}
.fieldset {
width:390px;
height:390px;
margin:20px auto;
position:relative;
border:1px solid #000;
padding:5px;
}
.legend {
position:absolute;
left:30px;
top:-10px;
background:#CCC;
color:#000;
font-weight:bold;
padding:0 5px;
}
</style>
</head>

<body>
<div class="fieldset"><div class="legend">Legend</div>
This is similar to a fieldset though not very semantical.
</div>
</body>
</html>