asked on

Background images misbehaving in IE7

Hi experts,

www.fobgfc.org/index22.php

We're talking about the bottom of the page.

In FF it shows fine. In IE7, It MAY show ok on first load; however, if I move to another IE7 tab and then back, the base of the outline box is missing. Or if it isn't, I can make it misbehave by scrolling up and back down.

The easiest way to demonstrate is for you to try it yourself! What a shame the points limit is 500...this is driving me crazy!!

I'd appreciate any help.

Thanks, Col

<!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>
 
<script type="text/javascript" src="swfobject.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- <link href="Reset.css" rel="stylesheet" type="text/css"> --> 
<link href="FOBG22.css" rel="stylesheet" type="text/css" media="screen" /> 
<style type="text/css">
body {
    background-color: white;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
    margin: 0;
    padding: 0;
}
 
#container
{
    background-image: url(Gifs/yellowblock130.jpg);
    background-repeat: repeat-y;
    margin: 0;
    padding: 0;
    width: auto;
}
 
#container2
{
 /*   background-image: url(Gifs/yellowblock3.jpg); */
    background-image: url(Gifs/yellowblock181.gif);
    background-repeat: repeat-y;
    background-position: right; 
}
 
#top
{
    background-color: yellow;
	text-align: center;
    color: black;
    padding: 0;
    margin: 0;
	height: 150px;
	width: 100%;
}
 
#banner_pic
{
    background-color: yellow;
    color: black;
    padding: 0;
    margin-left: -40px;
	height: 150px;
}
 
#awmAnchor-FOBG_menu_4V
{
    background-color: yellow;
    color: black;
    float: left;
    margin: 0;
    padding: 0;
    width: 130px;
}
 
#awmAnchor-FOBG_menu_4H
{
    background-color: white;
    color: black;
    margin: 0 0 0 0; 
    padding: 0;
	height: 40px;
	width: 60%;
}
 
#awmAnchor-FOBG_menu_4Hnew
{
    background-color: white;
    color: black;
    margin: 0 0 0 0; 
    padding: 0;
	height: 40px;
	width: 60%;
}
 
.dheadlines
{
    background: url(gifs/borders/images/h4_topl.gif) top left no-repeat;
	/* background-color: #FFFF99; */
    border: none;
	color: black;
    font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
    margin: 0 181px 0 0;
    padding: 0;
	text-align: center;
	position: relative;
}
 
.dheadlines h3
{
	background: url(gifs/borders/images/h4_topr.gif) top right no-repeat;
	color: #990000;
/*	font-size: 2.2em;  */
	font-size: 1.5em;  
	font-weight: bold;
	line-height: 115%;
	margin: 0;
	padding-top: 20px;	
	padding-right: 30px;	
	padding-left: 15px;	
	padding-bottom: 10px;	
	position: relative;
	text-align: center;
}
 
.dheadlines h4
{
	color: #336699;
	font-size: 1.5em;
/*	font-size: 1.8em;  */
	margin: 0;
	padding: 5px 25px;
	position: relative;
}
 
.dheadlines h5
{
	margin: 3px 0;
	padding: 5px 0;
	position: relative;
}
 
div.hor_rule
{
	border: 1px red dashed;  
	background-color: #990000;
	font-size: 0;
	height: 1px;
    margin: 0 auto;
	text-align: center;
	padding: 0;
	position: relative;
	width: 15%;
}
 
div.hor_rule hr 
{
	display: none;
}
 
div.headlineBody 
{
	background: url(gifs/borders/images/h4_rborder.gif) top right repeat-y;
}
 
div.headlineFooter 
{
  	background: url(gifs/borders/images/h4_botl.gif) bottom left no-repeat;
	margin: 0;
  	padding: 0;
}
 
div.headlineFooter p {
  	background: url(gifs/borders/images/h4_botr.gif) bottom right no-repeat;
	margin: 0;
  	padding: 0;
}
 
#content
{
	margin: 0 0 0 0;
    padding: 0 0 0 140px;
	position: relative;
}
 
#footer
{
    background-color: yellow;
    color: black;
    clear: both;
    margin: 0;
    padding: 0;
    width: 100%;
}
 
/* For Righthandside div */
 
#Righthandside
{
    background-color: yellow;
    color: red;
	clear: both;
	float: right;
    font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0;
	text-align: center;
	width: 181px; 
	/* position: absolute; top: 200px; right: 0; */
}
 
#Righthandside b
{
    font-size: 1.8em;
}
 
#Righthandside strong
{
    font-size: 1.4em;
}
</style>
 
<title>FOBG home</title>
 
</head>
 
<body>
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR FOBG_menu_4H ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="FOBG_menu_4H",awmBN="704";awmAltUrl="";</script><script charset="UTF-8" src="FOBG_menu_4H.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR FOBG_menu_4H ******** -->
 
<!-- ******** BEGIN ALLWEBMENUS CODE FOR FOBG_menu_4V ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="FOBG_menu_4V",awmBN="704";awmAltUrl="";</script><script charset="UTF-8" src="FOBG_menu_4V.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR FOBG_menu_4V ******** -->
 
<script type="text/javascript" src="doSwitchThenPrint.js" ></script>
<?php  
set_time_limit(500);
include("fobgdb.inc");
include_once("classes/fobg_database.php");
$db = new Fobg_database( $host, $user, $password, $database );
					
//$connection=mysql_connect($host,$user,$password) or die("The connection to the mySQL server failed.");
//$db=mysql_select_db($database,$connection) or die("The link to the FOBG database failed.");
 
$sql = "SELECT importance, item FROM headlines_new WHERE trim(item) <> '' ORDER BY importance";
//$result_hd = mysql_query($query_headlines) or die("The new headlines query failed.");
//$sql_query = mysql_query($sql) or die("Database class: MySQL_ Error: The new headlines query failed." . mysql_error() );
$sql_query = $db->DB_executeQuery( $sql, $db>dbLink ); 
$counter = 0;
 
while ($row = $db->fetch_Array($sql_query))
{ 
	$counter++;
	extract($row);
	$headline[$counter] = $item;
}	
?>
<!-- ******** END ALLWEBMENUS CODE FOR FOBG_menu_4 ******** -->
<div id="container">
  <div id="container2">
	<div id="top" align="center">
	  <div id="banner_pic" align="center"><img src="Montage/montage_2007_S.jpg" alt="Banner" width="714" height="150"/></div>
	</div> 
	<!-- end div top -->	
	
	<div id="awmAnchor-FOBG_menu_4V">
	   <!-- <noscript><h2>Sorry, you must enable javascript to view this site.</h2></noscript> -->
	</div> <!-- end div awmAnchor-FOBG_menu_4V (looks empty but it's needed for the lhs menu!! -->	
	
	<div id="content">
	 
	  <div id="awmAnchor-FOBG_menu_4H"> 	  
		<noscript><h2>Sorry, you must enable javascript to view this site.</h2></noscript>
	  </div> <!-- end div awmAnchor-FOBG_menu_4H (looks empty but it's needed for the lhs menu!! -->	
	  
	 <? include 'Include_Righthandside.php'; ?>	
 
		<div class="dheadlines">
			<h3>Welcome to the website of Farnborough Old Boys Guild Football Club.</h3>
			   <div class="headlineBody">
<div style="margin: 0 50px 0 30px; padding: 0; font-size: 1.4em; color: #000066; text-align: justify;">Situated in the centre of Farnborough village, between the more populous areas of Bromley and Orpington, FOBG is a very friendly yet ambitious football club.  We run four senior Saturday teams which all play competitive league football, and two Sunday teams: one senior, playing league football, and a Vets (over 35) team which plays around 30 friendly fixtures per season.</p>
<p>In three of the last four seasons we have had a Sunday youth XI, and are looking for a suitable side to represent us at junior level for the 2008-09 season. <span style="font-weight: bold; color: #990000;"> If you know of a junior side that would like to play under the FOBG identity then please
<script language=javascript>
	  <!--
	  var contact = "email us"
	  var email = "mailbox"
	  var emailHost = "fobgfc.org"
	  document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "</a>" + ".")
	  //-->
</script></span></p>
<p>
The club is well established, founded in 1932, and has a large clubhouse and two excellent pitches.  The first team has just been promoted to the Vandanel Kent County League Division One (West), and has had two Sevenoaks Charity Cup successes in the last four seasons.  It is managed by young, ambitious, FA qualified coaches who are determined to bring the playing standard up to match some of the best facilities in the area.  The club's organisation is second to none, with a dedicated, hard working committee led by one of Kent's most respected club secretaries, and a weekly emailed or posted newsletter with team selections and other information.</p>
<p style="margin-bottom: 0;">
We are always looking for new players for all teams, so if you, or someone you know, would like to play for, or find out more about the club then by all means visit us on a matchday or bring some kit and come to a training session - times and details are posted on the website.</p></div></div> <!-- end div.headlineBody --> 
			
		  <div class="headlineFooter"><p><br/><br/><br/></p></div>
	  </div> <!-- end div dheadlines -->	
	</div> <!-- end div Content -->	
	
	<div id="footer">&nbsp;
	</div> <!-- end div footer -->	
  </div> <!-- end div container2 -->	
</div> <!-- end div container -->	
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

bluefezteam

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Colin Brazier

ASKER

Hi Steggs,

I can't give it a width cos it's supposed to be flexible.

But....I gave it a height, and fan-blody-tastic, it works! Curiously, when I gave it the same height as the background gifs it misaligned, so I played with it a bit and found that 1px fewer worked fine.

Cheers,

Col

bluefezteam

if it helps - I couldn't reproduce the bug you mention in my IE7 at all, but I notice in instances where you are setting a BGImage in a div, you must define a dimension for the DIV (eg a height) also helps to apply a block tag as that can help assure height and width properties are forced on the browser otyherwise th DOCType you are creating CSS for will react differently.

Colin Brazier

ASKER

Sorry bluefez...just too late. But I gave it 42px (without display-block) and it was fine. It has me worried now that 42px - or whatever height - won't be the solution across all screen-sizes/res. If 44 worked for you.

Col

bluefezteam

eh too late, shared points perhaps ...

Mark Steggles

Hi bluefezteam,

why do u suggest adding display:block when a div is a block level element?

Steggs

bluefezteam

Hi Steggs - post that as a question and I can answer it for 500pts ;0)

Colin Brazier

ASKER

I can't specify a width on any div, the technique would lose its flexibility. The height only worked because the images in the footer will be constant irrespective of the content.

Thanks again for your help.