graphic not displaying with absolute positioning

johnmerlino · 05-10-2010, 08:20 PM

Hey all,

I have a masthead div which I set as a reference point using position relative. Now I want to display two images, one a login and one a logo. The login graphic is actually two graphics that change position depending on hovering state. The other is just an image of a logo. Now when I try to display the page, the logo doesn't appear at all, and the login graphic displays but it appears another instance of it is hanging off the page. I attached the result. Here is the coding causing the issue:

Code:

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	
	body {
		font: normal normal normal .9em 'Trebuchet MS', Tahoma, Verdana, 'Optima', sans-serif;
		background-color: #fff;
	}
	
	#wrapper {
		width: 1024px;
		position: relative; 
		left: 50%;
		margin-left: -512px;
	}
	
	#masthead {
		height: 130px;
		position: relative;
		background: #b8e5d1 url(mastgrad.png) top left no-repeat;
	}
	
	#logo {
		position: absolute;
		left: 300px;
		top: 30px;
	}
	
	#logo a {
		height: 316px;
		width: 183px;
		display: block;
		background: url(logo.png) top left no-repeat;
		border: none;
	}
	
	#logIn {
		position: absolute;
		left: 875px;
		top: 30px;
	}
	
	#logIn a:link, #logIn a:visited {
		height: 27px;
		width: 114px;
		display: block;
		background: #65c298 url(logingradsprites.png) top left no-repeat;
		border: none;
		text-align: center;
		font: bold normal small-caps .8em Trebuchet, Tahoma, Verdana, 'Optima', sans-serif;
		/* text-transform: uppercase; */
		text-shadow: #3c3c3c 2px 2px 3px;
		color: white;
		text-decoration: none;
	}
	
	#logIn a:hover, #logIn a:active {
		background-position: bottom left;
	}
	
	
</style>
</head>
<body>
	<div id="wrapper">
		<div id="masthead">
			<div id="logIn">
				<a href="contact.htm" title="login">LOGIN</a>
			<div>
				<div id="logo">
					<a href="index.html" title="logo"></a>
				</div>
		</div>
	</div>
</body>
</html>

Thanks for any response

johnmerlino · 05-10-2010, 09:22 PM

Actually it suddenly appeared now. Does element placement in the html matter at all when working with relative and absolute positioning in this way? Is this the best way to lay out a masthead in this case? Keep in mind I ultimately want to place some javascript as well in the masthead to have images rotate repeatedly, showcasing a "product". Initially I was contemplating floats but then I thought given all the stuff I want to have layered on top of the background in the masthead - relative/absolute positioning was the way to go.