Solved

Background images misbehaving in IE7

Posted on 2008-06-19
9
250 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
  • 4
  • 3
  • 2
9 Comments
 
LVL 30

Accepted Solution

by:
Steggs earned 350 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 150 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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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.…

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now