Solved

Background image slides to left of page

Posted on 2009-05-08
9
1,615 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
  • 5
  • 4
9 Comments
 
LVL 30

Expert Comment

by:renazonse
Comment Utility
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:renazonse
Comment Utility
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
Comment Utility
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
 
LVL 30

Expert Comment

by:renazonse
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:max7
Comment Utility
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:
renazonse earned 500 total points
Comment Utility
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
Comment Utility
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:renazonse
Comment Utility
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
Comment Utility
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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)

763 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

8 Experts available now in Live!

Get 1:1 Help Now