Forums

jbope

I am working on a mac using firefox. The brown rectangle under the menu should be taller. The top in being cut off in FF bu tlooks right in IE. Can't figure out how to change it. I would be grateful for any help or direction. The page is <http://www.bopedesign.com/freemp3.php>

/* Reset & Page Setup */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica, sans-serif;
		background: url(images/body-bg.jpg) top center no-repeat;
		background-attachment: fixed;
		background-position: 50% 15%; 
		 }

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a { outline: none; }
a img { border: none; }
/* End Reset */

/* Floats and Clear */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* End Floats and Clears */

/* Sructure */
#page-wrap {
	width: 840px;
	margin: 0 auto;
	background: url(images/brown-content-bg.jpg) repeat-y;
}

#header {
	width: 840px;
	height: 216px;
	margin: 0 auto;
	background: url(images/header.jpg) center no-repeat;
	}
	
#logo_link {
	height: 75px;
	width: 254px;
	padding: 30px 0px 0px 65px;
	}	
	
#listen {
	height: 24px;
	width: 125px;
	padding: 60px 0px 0px 82px;
	}

ul#nav {
	
	}
	ul#nav li {
		display: inline;
		}
		ul#nav li a {
			display: block;
			height: 44px;
			text-indent: -9999px;
			float: left;
			}
			ul#nav li.schedule a {
				width: 132px;
				background: url(images/schedule2bt.jpg) top center no-repeat;
			}
			ul#nav li.contact a {
				width: 79px;
				background: url(images/contactb.jpg) top center no-repeat;
			}
			ul#nav li.store a {
				width: 57px;
				background: url(images/storeb.jpg) top center no-repeat;
			}
			ul#nav li.music a {
				width: 98px;
				background: url(images/musicb.jpg) top center no-repeat;
			}
			ul#nav li.news a {
				width: 55px;
				background: url(images/newsb.jpg) top center no-repeat;
			}
			ul#nav li.booking a {
				width: 127px;
				background: url(images/bookingb.jpg) top center no-repeat;
			}
			ul#nav li.about a {
				width: 79px;
				background: url(images/aboutb.jpg) top center no-repeat;
			}
			ul#nav li.support a {
				width: 71px;
				background: url(images/supportb.jpg) top center no-repeat;
			}
			ul#nav li.newsletter a {
				width: 142px;
				background: url(images/newsletterb.jpg) top center no-repeat;
			}
			ul#nav li a:hover {
				background-position: bottom center;
			}
			
#brownbox {
	width: 840px;
	height: 275px;
	margin: 0 auto;
	background: url(images/brown-body-bg.jpg) center no-repeat;
	}
	
ul#brownnav {
	padding: 160px 0px 0px 408px;
	}
	
	ul#brownnav li {
		display: inline;
		}
		ul#brownnav li a {
			display: block;
			height: 28px;
			text-indent: -9999px;
			float: left;
			}
			ul#brownnav li.listen a {
				width: 62px;
				background: url(images/listen.jpg) bottom center no-repeat;
			}
			ul#brownnav li.download a {
				width: 115px;
				background: url(images/download.jpg) bottom center no-repeat;
			}
			ul#brownnav li.send a {
				width: 120px;
				background: url(images/send.jpg) bottom center no-repeat;
			}
			ul#brownnav li a:hover {
				background-position: top center;
			}
			
#left {
	width: 400px;
	height: 365px;
	padding: 0px 0px 0px 0px;
	background: url(images/moresongs.jpg) top center no-repeat;
	}			
	
#songs {
	font-size: 1.6em;
	color: #666666;
	line-height: 1.6em;
	padding: 80px 0px 0px 60px;
	}	
	
	ul#listennav {
		padding: 3px 0px 0px 57px;
		}
		
		ul#listennav li {
			display: inline;
			}
			ul#listennav li a {
				display: block;
				height: 28px;
				text-indent: -9999px;
				float: left;
				}
				ul#listennav li.listen2 a {
					width: 62px;
					background: url(images/listen3.jpg) bottom center no-repeat;
				}	
				ul#listennav li a:hover {
				background-position: top center;
				}
				
#right {
	width: 400px;
	height: 365px;
	padding: 0px 0px 0px 0px;
	float: right;
	background: url(images/moresongs.jpg) top center no-repeat;
	}
	
	ul#bottomrightlinks {
		padding: 3px 0px 0px 57px;
		}
		
		ul#bottomrightlinks li {
			display: inline;
			}
			ul#bottomrightlinks li a {
				display: block;
				height: 28px;
				text-indent: -9999px;
				float: left;
				}
				ul#bottomrightlinks li.store a {
					width: 62px;
					background: url(images/listen3.jpg) bottom center no-repeat;
				}
				ul#bottomrightlinks li.newsletter a {
					width: 62px;
					background: url(images/listen3.jpg) bottom center no-repeat;
				}
				ul#bottomrightlinks li.myspace a {
					width: 62px;
					background: url(images/listen3.jpg) bottom center no-repeat;
				}	
				ul#bottomrightlinks li a:hover {
				background-position: top center;
				}				
	
/* End Structure */

p.footertext {
padding: 25px 0px 0px 80px;
color: #999999;
}

p.footertext span {
padding: 0px 0px 0px 200px;
}

p.footertext span a {
color: #996633;
text-decoration: none;
}

p.footertext span a:hover {
color: #999999;
text-decoration: none;
}	

#footer {
width: 840px;
height: 71px;
margin: 0 auto;
background: url(images/footer-bg.jpg);
}

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<title>This Hope * Ministry Throug Music * Free MP3</title>
	<link rel=\"shortcut icon\" href=\"http://www.thishope.org/favicon.ico\">
	<link rel=\"stylesheet\" type=\"text/css\" href=\"brown_pages.css\" />
</head>

<body>

	<div id=\"page-wrap\">
	
		<div id=\"header\">
		
			<div id=\"logo_link\"><a href=\"http://www.thishope.org\"><img src=\"images/logo_link.jpg\" alt=\"\" title=\"\" /></a>
			</div>
			
			<script language=\"JavaScript\" type=\"text/JavaScript\">
			<!--
			function wimpyPopPlayer(theFile,id,stuff) {window.open(theFile,id,stuff);}
			//-->
			</script>
				
				<div id=\"listen\"><a href=\"javascript:;\" onClick=\"wimpyPopPlayer('http://www.thishope.org/mp3s/myWimpy.html','wimpyMP3player','width=441,height=385')\">
         		<img src=\"http://www.thishope.org/mp3s/listennowimage.jpg\" border=\"0\" align=\"top\"></a>
		 		</div>

		</div>
				
		<? Include(\"http://www.bopedesign.com/thmenu.php\") ?> 
		
				<div id=\"brownbox\">
					
					<ul id=\"brownnav\">
						<li class=\"listen\"><a href=\"schedule.php\">listen</a></li>
						<li class=\"download\"><a href=\"contact.php\">download</a></li>
						<li class=\"send\"><a href=\"http://www.thishope.org/Merchant2/merchant.mvc?Screen=SFNT&Store_Code=thishope\">send</a></li>
					</ul>
					
				</div>
				
				<div id=\"left\">
					<ul id=\"songs\">
						<li>Stand In Your Presence</li>
						<li>You Are</li>
						<li>How Deep The Father's Love For Us</li>
						<li>Run Farther</li>
						<li>There Is A Heaven</li>
						<li>Give Like He Did</li>
						<li>Enough For Me</li>
						<li>Go With You</li>
						<li>Let Everything That Has Breath</li>
					</ul>
					
					<ul id=\"listennav\">
						<li class=\"listen2\"><a href=\"schedule.php\">listen</a></li>
					</ul>
					
				</div>
				
				<div id\"right\">
					<ul id=\"bottomrightlinks\"
						<li class=\"store\"><a href=\"schedule.php\">store</a></li>
						<li class=\"newsletter\"><a href=\"schedule.php\">newsletter</a></li>
						<li class=\"myspace\"><a href=\"schedule.php\">MySpace</a></li>
					</ul>
				</div>
				
				<div class=\"clear\"></div>
		
		<div id=\"footer\">
			<p class=\"footertext\">
			
			<? Include(\"http://www.bopedesign.com/thfooter.php\") ?>
			
			</p>
		</div>
		
	</div>
	
</body>

</html>

cybershot

well it's hard to help here because we don't know what the image is suppose to look like. it looks the same in I.E 7 and opera and in firefox. So I don't know what it is your asking. maybe you can post a pic of what it's suppose to look like or try adding a margin top to the image to push it down from whatever is above it.

jbope

Thanks the margin top did it. I thought I had tried that in the long list of things I tried. I must not have.

treehouse : what would you like to learn today?

Forums

height of image looks good in IE but not in firefox