11
I am developing a microsite on the end of our current church website. See www.the-ark.net/chooseblue
I built the site using css/html then plugged it in to the existing asp cms we have.
My issue is with css/html... The container background only seems to stretch down as far at the header when viewed in firefox (it is ok with ie7 & dreamweaver preview). I can't fathom why. The css and html seemed to validate ok.
Any ideas?
Here's my CSS & html version of the page:
Expand|Select|Wrap|Line Numbers
- *{
- border:0;
- margin:0;
- padding:0;
- text-align:center;
- }
- p, ul li{
- font-family:'Trebuchet MS', Tahoma, Arial;
- font-size:12pt;
- font-weight:normal;
- padding:5px;
- text-align:left;
- }
- ul{
- list-style:none;
- }
- a{
- font-weight:bold;
- text-decoration:none;
- color:#0000FF;
- }
- a:visited{
- font-weight:bold;
- text-decoration:none;
- color:#0000FF;
- }
- a:hover{
- text-decoration:underline;
- }
- h1{
- font-family:'Trebuchet MS', Tahoma, Arial;
- font-size:32pt;
- text-align:left;
- padding:0 10px;
- color:#0000FF;
- }
- h2{
- font-family:'Trebuchet MS', Tahoma, Arial;
- font-size:24pt;
- text-align:left;
- padding:0 5px;
- color:#000000;
- }
- h3{
- padding:0 5px;
- font-family:'Trebuchet MS', Tahoma, Arial;
- font-size:16pt;
- text-align:left;
- color:#000000;
- }
- /* body */
- body{
- background:url(images/back-chip.jpg) repeat top left;
- text-align:center;
- }
- /* Container */
- #container{
- background:url(images/main-back.jpg) repeat-y top left;
- width:800px;
- position:relative;
- text-align:left;
- margin:0 auto 0 auto;
- }
- #header{
- background:url(images/cards-and-blue-chips.jpg) no-repeat bottom left;
- border-bottom:1px solid blue;
- text-align:right;
- }
- #inner-wrapper{
- width:800px;
- }
- #content{
- float:right;
- padding-top:10px;
- margin:10px 5px 0 0;
- width:500px;}
- #content h2{
- border-bottom:1px solid blue;
- }
- #menu{
- float:left;
- margin:10px 45px 0 5px;
- padding-top:10px;
- width:245px;
- }
- #menu h2{
- text-align:right;
- border-bottom:1px solid blue;
- }
- #menu p, #footer p{
- text-align:right;
- }
- #footer{
- width:790px;
- margin:0 5px;
- float:left;
- }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Choose Blue - A ministry of The Ark</title>
<link rel="stylesheet" href="blue.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<img src="images/intro.gif" width="800" height="253">
</div> <!--End of header-->
<div id="inner-wrapper">
<div id="menu">
<h2><img src="images/menu.jpg" width="88" height="31"></h2>
<p>There will be a basic menu here that has links to a blue chip intro, the prayer, ark info... </p>
<h2><img src="images/latest.jpg" width="213" height="31"></h2>
<P>text goes here</P>
</div> <!--end of menu-->
<div id="content">
<h2><img src="images/welcome.jpg" width="144" height="31"></h2>
<p>This is the website for choose blue - a ministry of <a href="../default.asp">The Ark</a>. </p>
<p>This website is still under construction so please <a href="../story.asp?itemID=1208&pcid=125" target="_self">click here</a> for the choose blue info. </p>
<p>We will announce on the main <a href="http://www.the-ark.net">Ark</a> website when this site is finished, so keep checking there for the details! </p>
<p>You should be able to click on the links on the left for the latest articles. You might want to start with the first article - <a href="story.asp?itemID=1208&pcid=125">Blue Chip</a> </p>
<p>Thanks!</p>
</div> <!--End of content-->
</div> <!--end of innerwrapper-->
<div id="footer">
<p>© <a href="../default.asp" target="_self">The Ark</a>, 2008</p>
</div> <!--end of footer-->
</div> <!--end of container-->
</body>
</html>
[/html]
Thanks
Mark
