Member Avatar for WhYuLoOkIn

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>
final.jpg 9.15 KB
  • 3 Contributors
  • 2 Replies
  • 134 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Recommended Answers

All 2 Replies

Member Avatar for cfajohnson


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.

Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.