0

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>
Attachments final.jpg 9.15 KB
3
Contributors
2
Replies
3
Views
8 Years
Discussion Span
Last Post by MidiMagic
0


First, check your page with the validator at validator.w3.org. If there are still problems after you have corrected the errors, post a URL so that we can see what you are really doing.

0

Please do NOT do this. Many of us have trouble reading text when it is on top of an image. It is an accessibility problem.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.