Hi,
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:
[code=css]
*{
border:0;
margin:0;
padding:0;
text-align:center;
}
p, ul li{
font-family:'Trebuch et 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:unde rline;
}
h1{
font-family:'Trebuch et MS', Tahoma, Arial;
font-size:32pt;
text-align:left;
padding:0 10px;
color:#0000FF;
}
h2{
font-family:'Trebuch et MS', Tahoma, Arial;
font-size:24pt;
text-align:left;
padding:0 5px;
color:#000000;
}
h3{
padding:0 5px;
font-family:'Trebuch et 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:relati ve;
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;
}
[/code][html]
<!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">Th e Ark</a>. </p>
<p>This website is still under construction so please <a href="../story.asp?itemI D=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&pc id=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
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:
[code=css]
*{
border:0;
margin:0;
padding:0;
text-align:center;
}
p, ul li{
font-family:'Trebuch et 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:unde rline;
}
h1{
font-family:'Trebuch et MS', Tahoma, Arial;
font-size:32pt;
text-align:left;
padding:0 10px;
color:#0000FF;
}
h2{
font-family:'Trebuch et MS', Tahoma, Arial;
font-size:24pt;
text-align:left;
padding:0 5px;
color:#000000;
}
h3{
padding:0 5px;
font-family:'Trebuch et 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:relati ve;
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;
}
[/code][html]
<!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">Th e Ark</a>. </p>
<p>This website is still under construction so please <a href="../story.asp?itemI D=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&pc id=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
Comment