?
Solved

Background images misbehaving in IE7

Posted on 2008-06-19
9
Medium Priority
?
264 Views
Last Modified: 2008-06-19
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

0
Comment
Question by:colinspurs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 1400 total points
ID: 21820727
Hello,

try giving div.headlineFooter a width or a height

Cheers
Steggs
0
 
LVL 10

Assisted Solution

by:bluefezteam
bluefezteam earned 600 total points
ID: 21820906
set
.headlineFooter {
  display:block;
  height:44px;
}
0
 
LVL 3

Author Comment

by:colinspurs
ID: 21820910
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:bluefezteam
ID: 21820921
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.
0
 
LVL 3

Author Comment

by:colinspurs
ID: 21820923
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
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21820929
eh too late, shared points perhaps ...
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21820951
Hi bluefezteam,

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

Steggs
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21820980
Hi Steggs - post that as a question and I can answer it for 500pts ;0)
0
 
LVL 3

Author Comment

by:colinspurs
ID: 21821124
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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month11 days, 1 hour left to enroll

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question