Solved

Background image slides to left of page

Posted on 2009-05-08
9
1,676 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:max7
[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
  • 5
  • 4
9 Comments
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24343485
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">


0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24343582
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

0
 
LVL 1

Author Comment

by:max7
ID: 24344756
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?
0
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!

 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24358335
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.
0
 
LVL 1

Author Comment

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



osi-background2a.png
0
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 500 total points
ID: 24359845
Looks like my previous css was the problem for you...change this

.wrapperContainer {
      width: 1104px;
      background: url(Images/osi_background2a.png);
}

to this:

.wrapperContainer {
      width: 1104px;
      background: url(Images/osi_background2a.png) 0 0 no-repeat;
}

also, you can probably remove this altogether:

html {
      overflow: scroll;
}

0
 
LVL 1

Author Comment

by:max7
ID: 24362090
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
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 24363022
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 -->
}
0
 
LVL 1

Author Closing Comment

by:max7
ID: 31579689
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!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

732 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