By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

CSS background...

P: 11
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:
Expand|Select|Wrap|Line Numbers
  1. *{
  2. border:0;
  3. margin:0;
  4. padding:0;
  5. text-align:center;
  6. }
  7.  
  8. p, ul li{
  9. font-family:'Trebuchet MS', Tahoma,  Arial;
  10. font-size:12pt;
  11. font-weight:normal;
  12. padding:5px;
  13. text-align:left;
  14. }
  15.  
  16. ul{
  17. list-style:none;
  18. }
  19.  
  20. a{
  21. font-weight:bold;
  22. text-decoration:none;
  23. color:#0000FF;
  24. }
  25.  
  26. a:visited{
  27. font-weight:bold;
  28. text-decoration:none;
  29. color:#0000FF;
  30. }
  31.  
  32. a:hover{
  33. text-decoration:underline;
  34. }
  35.  
  36. h1{
  37. font-family:'Trebuchet MS', Tahoma,  Arial;
  38. font-size:32pt;
  39. text-align:left;
  40. padding:0 10px;
  41. color:#0000FF;
  42. }
  43.  
  44. h2{
  45. font-family:'Trebuchet MS', Tahoma,  Arial;
  46. font-size:24pt;
  47. text-align:left;
  48. padding:0 5px;
  49. color:#000000;
  50. }
  51.  
  52.  
  53. h3{
  54. padding:0 5px;
  55. font-family:'Trebuchet MS', Tahoma,  Arial;
  56. font-size:16pt;
  57. text-align:left;
  58. color:#000000;
  59. }
  60.  
  61. /* body */
  62. body{
  63. background:url(images/back-chip.jpg) repeat top left;
  64. text-align:center;
  65. }
  66.  
  67. /* Container */
  68. #container{
  69. background:url(images/main-back.jpg) repeat-y top left;
  70. width:800px;
  71. position:relative;
  72. text-align:left;
  73. margin:0 auto 0 auto;
  74. }
  75.  
  76. #header{
  77. background:url(images/cards-and-blue-chips.jpg) no-repeat bottom left;
  78. border-bottom:1px solid blue;
  79. text-align:right;
  80. }
  81.  
  82. #inner-wrapper{
  83. width:800px;
  84. }
  85.  
  86. #content{
  87. float:right;
  88. padding-top:10px;
  89. margin:10px 5px 0 0;
  90. width:500px;}
  91.  
  92. #content h2{
  93. border-bottom:1px solid blue;
  94. }
  95.  
  96.  
  97. #menu{
  98. float:left;
  99. margin:10px 45px 0 5px;
  100. padding-top:10px;
  101. width:245px;
  102. }
  103.  
  104. #menu h2{
  105. text-align:right;
  106. border-bottom:1px solid blue;
  107. }
  108.  
  109. #menu p, #footer p{
  110. text-align:right;
  111. }
  112.  
  113. #footer{
  114. width:790px;
  115. margin:0 5px;
  116. float:left;
  117. }
  118.  
[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">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>&copy; <a href="../default.asp" target="_self">The Ark</a>, 2008</p>

</div> <!--end of footer-->

</div> <!--end of container-->

</body>
</html>
[/html]
Thanks
Mark
Apr 1 '08 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
This is a bug in IE. Parent containers are never to expand to contain floated items and modern browsers like Firefox follow the rules.

To get Firefox/Opera/Safar to follow IEs bug, add 'overflow:auto' to the parent container of the floated element.
Apr 1 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.