Solved

IE6 stretching the bg image and other nightmares

Posted on 2009-03-31
5
1,261 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
  • 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

747 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

11 Experts available now in Live!

Get 1:1 Help Now