Solved

IE6 stretching the bg image and other nightmares

Posted on 2009-03-31
5
1,268 Views
Last Modified: 2013-12-08
I am building a new css page and as usually, ie6 is exploding things.
I have a background image tiled vertically/centered that it is stretching to the width of the container.
The header div is pushed down.
A left menu depth is exploding


<!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>CIA</title>
 
<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
 
body {
  background-color: #C3C5C4;
  background-image: url(images/exteriortile.jpg);
  background-position: top;
  background-repeat: repeat-x;
  border-width: 0px; /* Sets the border width properties for an element using shorthand notation */
  color: #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 14px;
  margin: 0 0 0 0; 
  padding: 0 0 0 0;
  text-align: center; 
}
/* Commonly used to style page titles. */
h1 {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
}
 
h2 {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
}
/* Sets the style for unvisited links. */
a,  a:link {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
  color: #000;
  text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
  color: #000;
}
 
a:active {
  color: #000;
}
 
#outerWrapper {
background-image: url(images/blue_bg_tile_new.png);
  background-repeat: repeat-y;
  background-position: center top;
  background-attachment:fixed;
  border-bottom: solid 4px #666666; 
  border-left: solid 4px #666666;
  border-right: solid 4px 
  max-width: 808px;
  min-width: 808px;
  text-align: left; 
  width: 808px;
  position: relative;
}
 
#outerWrapper img {
	position: absolute;
	top: 62px;
	left: 71px;
}
 
#outerWrapper #header {
  background-image: url(images/header-new.png);
  background-position: top 50%;
  background-repeat: no-repeat;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  height: auto;
  line-height: 15px;
  margin: 0 auto 0 auto;
  padding-top: 15px;
  width: 808px;
}
 
#page_id {
	font: italic bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	visibility: visible;
	position: relative;
	margin: 0 15px 0 500px;
	padding-bottom: 5px;
	border: solid 2px #EBB98B;
	width: 271px;
	height: 50px;
}
 
#page_id div {
	margin-top: 3px;
}
 
#subhead  {
	font: italic bold 14px Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	position: relative;
	padding: 10px 0 0 25px;
	width: 350px;
  	margin: 0 30px 0 360px;
	color: #CCCCCC;
	list-style: disc;
	z-index: 2;
}
 
#outerWrapper #contentWrapper {
  height: auto;
  overflow: hidden;
  width: 808px;
  height: 560px;
  min-height: 560px;
}
 
 
#page_image  {
	position: absolute;
	margin-left:
	left: 65;
	top: 79px;
	left: 43px;
	z-index: 3;
	height: 245px;
	width: 312px;
}
 
#outerWrapper #contentWrapper #leftColumn1 {
  float: left;
  padding: 0; 
  width: 240px;
  height: 100%;
  padding-top: 6px;
}
 
#menu {
	position: relative;
}
 
#frequentlyaskedbutton a:hover,
#industryresourcesbutton a:hover,
#generalliabilitybutton a:hover,
#insuranceagentbutton a:hover,
#umbrellaliabilitybutton a:hover,
#aboutciabutton a:hover,
#employmentpracticesbutton a:hover,
#workerscompensationbutton a:hover,
#contactinformationbutton a:hover,
#insuranceapplicationsbutton a:hover,
#homebutton a:hover {
   background-position: -239px 0%;
}
 
#industryresourcesbutton a,
#frequentlyaskedbutton a,
#employmentpracticesbutton a,
#aboutciabutton a,
#workerscompensationbutton a,
#insuranceapplicationsbutton a,
#homebutton a,
#contactinformationbutton a,
#umbrellaliabilitybutton a,
#generalliabilitybutton a,
#insuranceagentbutton a {
   background: url(images/generalliabilitybutton.png) no-repeat 0% 0px;
   display: block;
   width: 239px;
   height: 43px;
   text-decoration: none;
   color: #FFFFFF;
}
 
#homebutton a {
   height: 68px;
   background-image: url(images/homebutton.png);
}
 
#insuranceagentbutton a {
   height: 72px;
   background-image: url(images/insuranceapplicationsbutton.png);
}
 
#employmentpracticesbutton,
#industryresourcesbutton,
#frequentlyaskedbutton,
#generalliabilitybutton,
#insuranceagentbutton,
#homebutton,
#contactinformationbutton,
#umbrellaliabilitybutton,
#workerscompensationbutton,
#aboutciabutton,
#insuranceapplicationsbutton  {
	font: italic bold 13px/14px Verdana, Arial, Helvetica, sans-serif;
	visibility: visible;
	left: -1px;
	width: 239px;
	height: 43px;
	text-align: right;
}
 
#homebutton  {
	height: 68px;
	z-index: 14;
	top: 206px;
}
 
#insuranceagentbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 168px;
   height: 21px;
   margin-right: 35px;
}
 
#insuranceapplicationsbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 168px;
   height: 21px;
   margin-right: 35px;
}
 
#workerscompensationbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 171px;
   height: 21px;
   margin-right: 35px;
}
 
#employmentpracticesbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 163px;
   height: 20px;
   margin-right: 35px;
}
 
#contactinformationbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 144px;
   height: 18px;
   margin-right: 35px;
}
 
#umbrellaliabilitybutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 123px;
   height: 21px;
   margin-right: 35px;
}
 
#industryresourcesbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 139px;
   height: 21px;
   margin-right: 35px;
}
 
#generalliabilitybutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 115px;
   height: 21px;
   margin-right: 35px;
}
 
#frequentlyaskedbutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 125px;
   height: 21px;
   margin-right: 35px;
}
 
#aboutciabutton a ins  {
   text-decoration: none;
   position: relative;
   top: 15px;
   width: 82px;
   height: 17px;
   margin-right: 35px;
}
 
#homebutton a ins  {
   text-decoration: none;
   position: relative;
   top: 40px;
   width: 40px;
   height: 17px;
   margin-right: 35px;
}
 
#homebutton  {
	height: 68px;
	z-index: 14;
	top: 19px;
}
 
#insuranceagentbutton   {
	height: 100px;
	z-index: 5;
	top: 473px;
}
 
#insuranceapplicationsbutton  {
	height: 43px;
	z-index: 5;
	top: 431px;
}
 
#workerscompensationbutton  {
	z-index: 12;
	top: 130px;
}
 
#employmentpracticesbutton  {
	z-index: 11;
	top: 173px;
}
 
#frequentlyaskedbutton  {
	z-index: 7;
	top: 345px;
}
 
#aboutciabutton  {
	z-index: 9;
	top: 259px;
}
 
#contactinformationbutton  {
	z-index: 8;
	top: 302px;
}
 
#umbrellaliabilitybutton  {
	z-index: 10;
	top: 216px;
}
 
#industryresourcesbutton  {
	z-index: 6;
	top: 388px;
}
 
#generalliabilitybutton  {
	z-index: 13;
	top: 87px;
}
 
#footermenu  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: -0.5px;
	margin: 0 auto 0 auto;
	padding-top: 20px;
	height: 15px;
	list-style: none;
	text-align: center;
	color: #CBCBCB;
	position: relative;
	display: block;
	z-index: 5;
	width: 100%;
}
#footermenu a:hover  {
   color: #F5D07D;
}
 
#footermenu ul li a  {
   border: 0px none #000000;
   padding-left: 0px;
   padding-right: 0px;
   text-decoration: none;
   color: #CBCBCB;
   height: 100%;
}
 
#footermenu li  {
   height: 100%;
   display: inline;
   margin: 0px;
}
 
#copyright  {
	font-size: 12px;
	visibility: visible;
	position: relative;
	top: 0;
	margin: 20px auto 0 auto;
	z-index: 5;
	width: 100%;
}
 
#copyright p  {
   font: 12px Verdana, Arial, Helvetica, sans-serif;
   margin: 0px;
   text-align: center;
   color: #CBCBCB;
}
 
#outerWrapper #contentWrapper #content {
  height: 100%;
  margin: 0 0 0 240px;
  padding: 0; 
  width: 569px;
}
 
#outerWrapper #contentWrapper #content h1 {
  margin: 0 25px 0 35px;
}
 
#outerWrapper #footer {
  background-image: url(images/footer-bar-new.jpg);
  background-position: center;
  background-repeat: no-repeat;
  height: 93px;
  padding: 0; 
  width: 100%;
}
 
#content_bg {
  background-image: url(images/content_tile_new.png); 
  background-repeat: repeat-y;
  background-position: left;
  width: 569px;
}
 
#content_bg p {
  margin: 0 25px 0 35px;
}
 
#content_bottom {
	background: url(images/content_bottom_new.png) no-repeat right top;
  height: 28px;
}
-->
</style>
<style type="text/css" media="print">
<!--
 
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
 
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
 
#outerWrapper #contentWrapper #leftColumn1 {
  width: 230px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
  zoom: 1;
}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css"> 
img, div {
  behavior: url(images/iepngfix.htc");
}
</style>
<![endif]-->
 
<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
 
</head>
 
<body>
 
<div id="outerWrapper"><img src="images/guard_1.png" />
		<div id="header"><div id="page_id">
						<div align="center">Our Mission: To Provide Superior Insurance  Service and Protection for the Security Guard Industry <br />
						</div>
						</div>
  		
  		<div id="subhead">
										<ul>
												<li>Serving the Security Guard, Investigator, Alarm, Polygraph and other Security Industry Services for over 20 Years </li>
												<li>Lowest Insurance Rates in the Industry </li>
												<li>Highest-rated Carriers in the Security Services Industry</li>
										</ul>
				</div>
  </div>
  <div id="contentWrapper">
    <div id="leftColumn1">
<div>
										<div id="homebutton"><a href="index.html"><ins>home</ins></a></div>
										<div id="generalliabilitybutton"><a href="general_liability_insurance.html"><ins>general liability</ins></a></div>
										<div id="workerscompensationbutton"><a  href="workers_compensation_insurance.html"><ins>worker&#8217;s compensation</ins></a></div>
										<div id="employmentpracticesbutton"><a  href="employment_practices_liability_insurance.html"><ins>employment practices</ins></a></div>
										<div id="umbrellaliabilitybutton"><a href="umbrella_liability_insurance.html"><ins>umbrella liability</ins></a></div>
										<div id="aboutciabutton"><a href="about_security_guard_insurance.html"><ins>about c.i.a.</ins></a></div>
										<div id="contactinformationbutton"><a href="contact_us_about_security_guard_insurance.html"><ins>contact information</ins></a></div>
										<div id="frequentlyaskedbutton"><a href="frequently_asked_about_security_guard_insurance.html"><ins>frequently asked</ins></a></div>
										<div id="industryresourcesbutton"><a href="security_guard_insurance_resources.html"><ins>industry resources</ins></a></div>
										<div id="insuranceapplicationsbutton"><a href="security_guard_insurance_applications.html"><ins>insurance applications</ins></a></div>
										<div id="insuranceagentbutton"><a href="security_guard_insurance_agents.html"><ins>agent information</ins></a></div>
</div>
    		</div>
    <div id="content">
<div style="height: 28px; background: url(images/content_top_new.png) no-repeat right top;"></div><div id="content_bg"><h1><font color="#333333" size="+1">5 Reasons Why We Can Save You More Money and Give You Superior Insurance Coverage: </font><br />
														<font size="-1">on your Security Guard Insurance, Alarm Company Insurance, Private Investigator Insurance or Other Security Services Insurance.</font></h1><p>Content for  id "content_bg" Goes HereLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio</p>
</div>
<div id="content_bottom">&nbsp;</div>
    </div>
  </div>
  <div id="footer"></div>
</div>
 
</body>
</html>

Open in new window

0
Comment
Question by:weknowjack
[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
  • 3
5 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24034730
I notice you have some validation errors on your site, try pasting your code here to see what I mean:
http://validator.w3.org/#validate_by_input

You are using an XHTML Strict Doctype but also using things like 'size="+1">' which is in no way XHTML valid.
0
 
LVL 2

Expert Comment

by:Talamasca
ID: 24070385
MS in its infinite wisdom/marketing, convinces people that it is flawless. If that were true&there would be no need for this website!

Why are you still writing for version 6?  IE 8 is out!

Other browsers handle CSS perfectly, and leave IE trying to catch up. Leaving IE going...'ok, that works'... and PRESTO... stuff wotks.
0
 

Author Comment

by:weknowjack
ID: 24072695
Talamasca, I just launched a dev site for my client to view his new site. So happens he used IE 6 and everything went to pieces. Not dead yet, sorry to say.
0
 

Author Comment

by:weknowjack
ID: 24132270
level9wizard:

The page validates with one warning. The css validates with several warnings that don't seem to be problems.

http://andrewsontheweb.com/newcia

IE6 appears to be stretching the width of a vertically tiled bg image. The url shows a dark blue bg with a 3px border on the left/right, which is the tile.

The tiled image is 811px wide. The div is 817px wide with a 3px border left/right.

There should be about 60px of transparent area left and right of the background tile, between it and the outside left and right borders.

Is there an IE6 conditional statement I can use perhaps?

It displays correctly in IE7, Firefox 3, Safari and FF 3 Mac

I found several posts about wanting to stretch something in IE6, but none who want to stop it.

Three css stylesheets: /cia-new.css , ie6.css , ie7.css

Jack
0
 

Accepted Solution

by:
weknowjack earned 0 total points
ID: 24175343
After many hours, I finally determined it was the transparent png with the png fix applied. I added an IE 6 conditional style and substituted a jpeg. Now it works.
0

Featured Post

Scamming the Scammers!

Have you ever heard of Scam Baiting?
It's a highly entertaining sport that you can participate in.
Introduction to beating scammers at their own game and how you can help
Share your thoughts, ideas and experiences on the topic.
Links to top Anti-Scam resources provided.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

752 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