CSS Just display an image 1

timgerr · Jan 22, 2008

Is there a way to display an image to a div without haveing any content? Here is what I am trying to:

Code:

<html>
	<head>
		<title>Dynamic Label</title>
		<style type="text/css">
			.show{font-weight:bold; 
				background-image: url([URL unfurl="true"]http://127.0.0.1/apache2-default/dev/Testing/icons/icon1/PNG_256x256/Chat_01.png);[/URL] 
				background-repeat: no-repeat;}
		
		</style>
	</head>
	<body>
		<div id='pHere'></div>
		<script type="text/javascript">
			lbl = document.createElement('div');
			lbl.setAttribute('id','lblOne');
			lbl.className = 'show';
			document.getElementById('pHere').appendChild(lbl);
			document.getElementById('lblOne').innerHTML = ' ';
		</script>

		
	</body>
</html>

I just want to dynamically add a picture.
thanks,
timgerr

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

kaht · Jan 22, 2008

You can do that, but there's one important thing that you're missing. If a div has no content it's dimensions will be 0x0. Explicitly define a width and height for the div and you will be able to see your image.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

timgerr · Jan 22, 2008

Thank you, that worked.
timgerr

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

ChrisHunt · Jan 23, 2008

Using an empty <div> seems a cumbersome way to do what you could do with an <img> element. It also has the disadvantages of not having alt text for the benefit of blind users and search engines, and probably not showing up if the page is printed.

That's not to say that there aren't any occasions when this technique would be appropriate, but they're pretty few and far between. It looks like something done because you can, regardless of whether you should.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Just display an image 1

timgerr

IS-IT--Management

kaht

Programmer

timgerr

IS-IT--Management

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor