?
Solved

Background image slides to left of page

Posted on 2009-05-08
9
Medium Priority
?
1,693 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
Industry Leaders: 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 2000 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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

765 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