Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Background images misbehaving in IE7

Posted on 2008-06-19
9
Medium Priority
?
268 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:
Mark Steggles 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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:Mark Steggles
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

Technology Partners: 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!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

604 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