Hi, I have a fieldset and I am styling the legend tag within that fieldset with css. I got the text to overlay over the image, but it only works in IE, Chrome and firefox didn't like it. The end result I am looking for is to have a fieldset with gray dotted lines 1px in size with my image in the upper left hand corner with text overlayed. Can anyone give me any suggestions? An image is attached showing the final results I would like to have that is compatible across all browsers. Thanks in advance.
Here is the code I have:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
fieldset{
border: 1px dashed #CDCDCD;
padding:20px;
}
}
#test{
text-align:center;
background-image: url('data2.gif') ;
height:60px;
width:50px;
background-repeat:no-repeat;
}
}
</style>
</head>
<body>
<fieldset name="Group1" style="width: 509px; height:245px;">
<legend id="test">Hi</legend>
</fieldset>
</body>
</html>