Link to home
Start Free TrialLog in
Avatar of max7
max7

asked on

Background image slides to left of page

Greetings Experts,

Attached are two screenies of the problem I'm experiencing.  As you can see, when the browser is expanded completely, the layout displays correctly.  When I resize the browser to smaller dimensions, the background image appears to slide/disappear/shrink (choose your adjective) so that the background color on the left side is exposed and the layout is ruined.  These shots are how it appears in firefox but this problem also occurs in Safari.  The problem does NOT appear in IE7 or Chrome.

Question: what styles must I apply so that the background image does not "shrink" on the left of my layout in either Firefox or Safari?

Fyi, I've also included my style sheets and markup below, but please let me know if more information is needed.

Thanks,
max7
Styles:
 
@charset "UTF-8";
html {
	overflow: scroll;
}
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: url(Images/osi_background2a.png) 50% 232px no-repeat #03407f;
	margin: 0;
	text-align: center;
	color: #000000;
}
.oneColFixCtrHdr #container {
	padding: 0;
	margin-left: .185em;
	display: inline-block;
	width: 1104px;
}
.oneColFixCtrHdr #header {
	background: url(Images/osi_header2a.jpg) no-repeat;
	padding: 65px 0 65px 0;
	margin-top: 20px;
}
.oneColFixCtrHdr #header p {
	color:#FFFFFF;
	font-size:14px;
	text-align: center;
}
.style2 {
	font-size: 10px;
}
.oneColFixCtrHdr #menu {
	background-color: #000000;
	border-top: 2px solid white;
	overflow: hidden;
	padding-right: 50px;
	margin-top: 10px;
}
.product {
	margin: 100px 100px;
}
		
img {
	border: 0;
}
div#hme_img {
	display: inline-block;
	width: 900px;
	margin-left: 0;
	margin-right: 0;
}
div#hme_img_inr img {
	margin-top: 25px;
}
#footer {
	width: 550px;
	clear: both;
	display: inline-block;
}
#footer_inner {
	padding: .5em 1em;
	text-align: justify;
	clear: both;
}
#footer_inner p {
	font-size: .7em;
	clear: both;
	display: inline-block;
	
}
/*******************************************************************************
 
                        MENU BAR STYLES
      LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
 /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 
 
ul.MenuBarHorizontal {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	display: inline-block;
	cursor: default;
	width: 800px;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
 
ul.MenuBarActive {
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
 
ul.MenuBarHorizontal li {
	margin: 0;
	padding: 0;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: center;
	cursor: pointer;
	/*width: 147px;*/
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 
ul.MenuBarHorizontal ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, set left to auto so it comes onto the screen below its parent menu item */
 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
	left: auto;
}
/* Menu item containers are same fixed width as parent */
 
ul.MenuBarHorizontal ul li {
	width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 
ul.MenuBarHorizontal ul ul {
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
	left: auto;
	top: 0;
}
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
 
ul.MenuBarHorizontal ul {
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
 
ul.MenuBarHorizontal a {
	display: block;
	cursor: pointer;
	padding: 0.5em 0.75em;
	color: #FFFFFF;
	text-decoration: none;
	background: #000000;
}
/* Menu items that have mouse over or focus have a red background and white text */
 
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
	background-color: #FF0000;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
	background-color: #FF0000;
	color: #FFF;
}
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
	background-image: url(MenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
	background-image: url(MenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
	background-image: url(MenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
	background-image: url(MenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe {
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
	display: inline;
	float: left;
	background: #FFF;
}
 
#wrapper {
		width: 850px;
		margin-left: 100px;
		display: inline-block;
		
}
 
#why {
	width: 575px;
	height: 700px;
	margin: 50px 0 0 0px;
	float: left;
	}
#why_inner {
 
}
#why_inner h1 {
	text-align: justify;
	margin-bottom: -10px;
}
#why_inner p {
	text-align: justify;
	font-weight: bold;
	font-size: .9em;
}
 
#why_inner ol {
	margin-top: 30px;
	text-align: left;
	font-size: .8em;
}
#why_inner li {
	line-height: 1.4;
	margin-top: 20px;
}
#clothes {
	width: auto;
	float: left;
	overflow: hidden;
}
 
#clothes_inner {
	
}
 
 
Markup:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sports</title>
<link type="text/css" rel="stylesheet" href="main2a.css" />
<link type="text/css" rel="stylesheet" href="why.css"  />
<script src="../menubar/MenuBar.js" type="text/javascript"></script>
<body class="oneColFixCtrHdr">
<div id="container">
  <div id="header">
    <p>
      Great Customer Service!
    </p>
  </div>
 
  <div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.php" class="style2">HOME</a></li>
      <li><a href="about.php" class="style2">ABOUT US</a></li>
      <li><a href="products_tshirts.php" class="style2">PRODUCTS</a></li>
      <li><a href="designs.php" class="style2">DESIGNS</a></li>
      <li><a href="referral.php" class="style2">REFERRAL LIST</a></li>
      <li><a href="why.php" class="style2">WHY UNIFORMS</a></li>
      <li><a href="orders.php" class="style2">PLACE ORDER</a></li>
      <li><a href="approvals.php" class="style2">ART APPROVALS</a></li>
      <li><a href="contact.php" class="style2">CONTACT US</a></li>
    </ul>
  </div>
  <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../menubar/MenuBarDownHover.gif", imgRight:"../menubar/MenuBarRightHover.gif"});
 
//-->
</script>
</div>
<div id="wrapper">
<div id="why">
  <div id="why_inner">
    <h1>WHY P.E. UNIFORMS?</h1>
    <p>SIX BENEFITS TO OFFERING UNIFORMS VS FREE DRESS FOR YOUR PHYSICAL EDUCATION PROGRAM</p>
    <ol>
      <li>Uniforms bring discipline to the program because all students are dressed alike and have the same dress standards</li>
      <li>Our state of the art designs are very popular with both students and staff and promote school spirit</li>
      <li>The micromesh shorts are the first shorts that we have ever offered that <span>students really want to buy</span></li>
      <span>
      <li>The cost of a set of SPORTS P.E. clothes is far less than the cost at a sporting goods store</li>
      </span> <span>
      <li>By law, you cannot force a student to buy what the school sells but you can set a dress code which establishes a set color of shirt and shorts to be worn by student.  Therefore, a parent has the choice of purchasing off campus but usually will not do so because of both price and convenience</li>
      </span> <span>
      <li>Profits above your P.E. wear costs can be used as a fundraiser to help the school in many ways</li>
      </span>
    </ol>
  </div>
</div>
<div id="clothes">
<div id="clothes_inner">
<img src="Images/why_clothes.png" alt="6 Reasons Uniforms are the Superior choice" width="242" height="320" />
</div>
</div>
</div>
 
<div id="footer">
  <div id="footer_inner">
    <p><b>SPORTS &#044 INC&#046 &copy; <?php echo date('Y'); ?></b> - 1000 Main Street ANYTOWN &#044 USA 55555<br />
      <b>CONTACT US&#058</b> TOLL FREE &#040 800 &#041 555&#045 5555</p>
  </div>
</div>
 
</body>
</html>

Open in new window

ffbad.jpg
ffok.jpg
Avatar of Britt Thompson
Britt Thompson
Flag of United States of America image

If your actual page is the same as that code it could be that your head tag isn't closed...you need to add </head> between these:

<script src="../menubar/MenuBar.js" type="text/javascript"></script>
<body class="oneColFixCtrHdr">


If that doesn't work this will probably fix your problem.


CSS:
 
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	text-align: center;
	color: #000000;
	background-color:#03407f;
}
.wrapperContainer {
	width: 1104px;
	background: url(Images/osi_background2a.png);
}
 
 
MARKUP:
 
</div>
<div class="wrapperContainer">  <!-- ADDED A CONTAINER HERE -->
<div id="wrapper">
<div id="why">
  <div id="why_inner">
    <h1>WHY P.E. UNIFORMS?</h1>
    <p>SIX BENEFITS TO OFFERING UNIFORMS VS FREE DRESS FOR YOUR PHYSICAL EDUCATION PROGRAM</p>
    <ol>
      <li>Uniforms bring discipline to the program because all students are dressed alike and have the same dress standards</li>
      <li>Our state of the art designs are very popular with both students and staff and promote school spirit</li>
      <li>The micromesh shorts are the first shorts that we have ever offered that <span>students really want to buy</span></li>
      <span>
      <li>The cost of a set of SPORTS P.E. clothes is far less than the cost at a sporting goods store</li>
      </span> <span>
      <li>By law, you cannot force a student to buy what the school sells but you can set a dress code which establishes a set color of shirt and shorts to be worn by student.  Therefore, a parent has the choice of purchasing off campus but usually will not do so because of both price and convenience</li>
      </span> <span>
      <li>Profits above your P.E. wear costs can be used as a fundraiser to help the school in many ways</li>
      </span>
    </ol>
  </div>
</div>
<div id="clothes">
<div id="clothes_inner">
<img src="Images/why_clothes.png" alt="6 Reasons Uniforms are the Superior choice" width="242" height="320" />
</div>
</div>
</div>
<div style="clear:both;"></div>  <!-- CLEAR IT OUT TO EXPAND IT -->
</div> <!-- CLOSING wrapperContainer -->
<div id="footer">

Open in new window

Avatar of max7
max7

ASKER

Hi renazonse, thanks for the response and thanks also for pointing out that my <head> tag was not closed.  Unfortunately, neither fix worked to resolve this issue.  Any other ideas?
Can you attach the background image  your trying to use so I can work the code out correctly. Difficult since I don't have that. I do recommend using the background image in a div instead of using it in the page body...simpler that way.
Avatar of max7

ASKER

You got it; see attachment.  Also I am absolutely open to putting the background image in a div, whatever works best.



osi-background2a.png
ASKER CERTIFIED SOLUTION
Avatar of Britt Thompson
Britt Thompson
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of max7

ASKER

Good news and Bad news.

Good news: the background image no longer shrinks away on the left in FF or Safari and when resizing the browser to smaller dimensions.

Bad News: upon expanding my browser window fully, the background image shifts to the left once again breaking the layout.  This happens in every browser EXCEPT IE7, which displays the layout correctly.

 I've attached a screenie so you can see the new problem.


ffnewbad.JPG
Ok...paste your new markup and css so I can have a look. Seems like you may be missing a closing tag somewhere. Also, If you enclose everything from #container to the closing tag in #footer with a div and give a class, try this:

.content {
  margin: 0 auto 0 auto;
  width: 1104px
  position: relative;  <!--- YOU MAY OR MAY NOT NEED THIS -->
}
Avatar of max7

ASKER

Actually I figured it out: if put another cleared div near the end of the markup, it all snaps into place.  Here's what I did:




<?php include "footer.php"; ?>




Thanks very much for your tenacity with this!