CSS Background image probs in IE6 [Archive]

double_agent

07-07-2006, 05:38 PM

Hello -

I’m just learning CSS and I’ve been developing a site for my friend. I’m a Mac user (Safari) and everything seemed hunky-dory until I went to show it to my friend in IE6 on her PC.

Wow.

Talk about embarrassed. The repeating background which had been so lovely on my Mac was completely absent, as was the background image of her masthead. Now I could fix this if I were to throw the CSS out the window, but I’m trying hard to do this right. So far as I can tell, everything validated OK.

Can anyone shed some light on the situation? I'm sure it's an easy fix. The page background is simply that red image I’m using as an image holder. The masthead background is a black-to-gray gradient.

The page URL is http://nancy.djflip.com/ and the CSS is at http://nancy.djflip.com/global-v3.css

(I know there's a lot of extra stuff in there right now. I only have the layout for the homepage done, but there will be many more pages that use these 'extra' elements.)

Please don’t be too hard on me!! I’m teaching myself.

Many Thanks!

Em

mylegoh

07-07-2006, 06:05 PM

Hey,

Had a quick look at your site with firefox and IE. I suspect that using the id in the body has confused IE into looking for an id format effect in the CSS.
Try taking it out and see what happens.

by the way i was still able to view your html source. Using javascript to disable mouse action is not a good idea because it hampers other functionality; if people cannot use your site they will go else where!
To protect your code use a copyright.

double_agent

07-07-2006, 06:38 PM

Thanks for the tip - I will try it and let you know how it worked.

The reason I've disabled the right mouse click is because my friend/client requested it to help protect her images. She does know that you can still drag & drop them onto the desktop. I will take your comment into consideration, though. I'll talk with her.

double_agent

07-07-2006, 06:45 PM

Just had a friend check it and he said it was still not working.

Any other suggestions?

Thanks!

mylegoh

07-07-2006, 06:50 PM

You are welcome.

On the images - How about embedding copyright statments in the images.
I would strategically place in images, so that if copied they will have to tamper (using some photo editor) to remove thus distorting the original.
I am sure there are more sophisticated methods, such as embedding invisible bytes, but i do not know how to do this successfully.

mylegoh

07-07-2006, 06:51 PM

Just seen your last, after sending mine ... will do a dummy and get back to you, if no-one-else does. Will take a while ... about to have dinner :)

double_agent

07-07-2006, 06:59 PM

You're wonderful!

I appreciate your help. (Enjoy dinner!)

mylegoh

07-07-2006, 07:30 PM

Ok, i am back.

I have just run your code through TopStyle and it was fine for both firefox and IE emulators. I suspect your image paths may be the problems.
I usually put my stylesheet images in the same directory as my stylesheet and then just name xx.png with no path and it is fine. Or use the absolute path name. Relative can be tricky especially for Netscape 4.

I also noticed you are using px to size your boxes. I would suggest using % for sizes because IE calculates differently than complaint browsers. But, for padding/margins use px. At the moment in IE your sidebar is being pushed to the bottom.

This is all from painful experience.

Let me know ... Good luck!

ps. dinner was good.

double_agent

07-08-2006, 07:10 AM

OOH!

Good advice!

I will give your recommendations a shot. Maybe tomorrow or Monday, tho. :)

I'll let you know how it goes.

Again, thanks!

Em

_Aerospace_Eng_

07-08-2006, 07:48 AM

Try this for your markup, its now valid XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>World Without End Corsetry</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="World Without End handmade corsets and custom corsetry." />
<meta name="author" content="AisleDesign" />
<meta name="copyright" content="WWEend.org" />
<meta name="Keywords" content="corset, corsetry, fashion corests, waist cincher, cumberbund" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
@import url(/global-v3.css);
</style>
<link rel="stylesheet" type="text/css" media="print" href="/c/print.css" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script type="text/javascript">

</script>
</head>
<body>
<div id="container">
<div id="masthead2">
<h2>World Without End Corsets</h2>
</div>
<div id="header">
<ul id="tabs">
<li><span class="hidden"><a href="#content">Skip to main content</a></span></li>
<li><a href="/index.html">0.1: Home</a></li>
<li><a href="/about/">0.2: About Us</a></li>
<li><a href="/policy/">0.3: Policies & Pricing</a></li>
<li><a href="/options/">0.4: Options & Materials</a></li>
<li><a href="/contact/">0.5: Contact</a></li>
</ul>
</div>
</div>
<div id="container2">
<div id="content">
<p class="subnav"></p>
<h2>Everyday Fashion: <em>Corsets</em></h2>
<div class="pgallerycont">
<ol class="pgallery">
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p><a href="#">Style1: Beatrice</a></p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p><a href="#">Style2: Lauren</a></p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p><a href="#">Style3: Flames</a></p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p><a href="#">Style4: Blackest Black</a></p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p><a href="#">Style5:Army</a></p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="115" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p>Style<a href="#">6</a>:Romance</p>
</li>
<li>
<p><a href="#"><img src="../../img/deepred.jpg" width="435" height="115" alt="Click thumbnail to view larger image." /></a></p>
<p>Style7<a href="#"></a>: Custom Corsets</p>
</li>
</ol>
</div>
<p class="clear"><a href="/copyright.html">All Images (c) Copyright World Without End, Inc.</a></p>
</div>
<div id="sidebar">
<div class="indexgallery">
<h2 class="weddings">The Ultimate in Sex Appeal</h2>
</div>
<p>This is where Nancy puts her keyword-packed general description etc.
It's important to describe what exactly your business does and what your
goals are. This makes your website friendlier to web-crawling bots and
will contribute to higher web ranking.</p>
<p>It's probably a good idea to make it clear that you make corsets by appointment
only and that all projects should include multiple meetings for measurements
and fittings. <a title="Addition information" href="#">[Learn
more]</a></p>
<p>Next Page: <a href="#">Policies</a></p>
</div>

<div id="footer"> <a href="/index.html">Home</a> · <a href="/about.html">About Us</a> · <a href="/policy.html">Policies & Pricing</a> · <a href="/options.html">Options & Materials</a> · <a href="/contact.html">Contact</a> <br />
<a href="/copyright.html">Copyright</a> © World Without End, Inc. 2006. All Rights Reserved.<br />
</div>

</div>
</body>
</html>
Try this for your CSS, the CSS contains fixes for your background images and the sidebar being pushed to the bottom in IE6. One of your divs was too wide.
/* ===========================
Welcome to the World Without End global CSS file.

This CSS, the layout design, and content are all copyright
World Without End, LLC. 2006.
=========================== */
body {
background:#FFF;
margin:10px 0 0;
padding:10px 0 0;
text-align:center;
font-family:Georgia,Arial,Verdana,Helvetica,sans-serif;
background-image:url(/img/deepred.jpg);
background-position:center top;
background-repeat:repeat;
}

/******************************
* PRIMARY NAVIGATION
******************************/
#tabs {
margin:0;
padding:0;
}

#tabs li {
margin:0;
padding:2px;
display:inline;
list-style:none;
}

#tabs a {
float:none;
margin:0;
text-decoration:none;
color:#C9C3AB;
font:bold 70%/12px Georgia,Arial,Verdana,Helvetica,sans-serif;
}

#tabs a.active,#tabs a:hover {
border-bottom:4px solid #600;
padding-bottom:2px;
color:#FFF;
}

/******************************
* THE BODYLINKS
******************************/
a:link {
color:#9B9B9B;
background-color:transparent;
text-decoration:none;
font-weight:400;
}

a:visited {
color:#708090;
background-color:transparent;
text-decoration:none;
font-weight:400;
}

a:active {
color:#000;
background-color:transparent;
font-weight:400;
}

a:hover {
color:#990100;
text-decoration:underline;
font-weight:400;
}

/******************************
* THE STRUCTURE
******************************/
#container {
width:700px;
width:700px;
width:700px;
border-top:1px solid #E4E4E4;
margin:0;
margin-left:auto;
margin-right:auto;
padding:0;
}

#header {
padding:6px;
background-color:#343434;
background-image:none;
background-repeat:repeat-x;
height:30px;
}

#masthead2 {
padding:0;
margin:0;
background-color:#FFF;
background-image:url(/img/masthead.jpg);
height:145px;
}

/* Container for full photo pages */
#container-photo {
width:698px;
background-color:#FFF;
border-right:1px solid #E4E4E4;
border-bottom:1px solid #E4E4E4;
border-left:1px solid #E4E4E4;
margin:0;
margin-left:auto;
margin-right:auto;
padding:0;
}

#navwrapper {
padding:0;
margin:0;
background-color:#000;
height:52px;
}

#container2 {
width:698px;
background-color:#FFF;
border-right:1px solid #E4E4E4;
border-bottom:1px solid #E4E4E4;
border-left:1px solid #E4E4E4;
margin:0;
margin-left:auto;
margin-right:auto;
padding:0;
background-image:url(file:///Master/Projects/Web/WWE/g/sidebg.jpg);
background-repeat:repeat-y;
}

#banner1,#banner2,#banner3,#banner4 {
padding:0;
margin:0;
height:110px;
border-right:1px solid #D3D3D3;
}

#banner1 {
background-image:url(file:///Master/Projects/Web/WWE/g/topbg-blue.jpg);
background-repeat:repeat-x;
background-color:#4F6886;
}

#banner2 {
background-image:url(file:///Master/Projects/Web/WWE/g/topbg-g.jpg);
background-repeat:repeat-x;
background-color:#84925F;
}

#banner3 {
background-image:url(file:///Master/Projects/Web/WWE/g/topbg-b.jpg);
background-repeat:repeat-x;
background-color:#434343;
}

#banner4 {
background-image:url(file:///Master/Projects/Web/WWE/g/topbg-r.jpg);
background-repeat:repeat-x;
background-color:#990100;
}

#content {
float:left;
width:395px;
background-color:#FFF;
}

#content-photo {
width:690px;
background-color:#FFF;
}

#sidebar {
float:right;
width:183px;
padding:0;
background-color:transparent;
}

#footer {
clear:both;
padding:10px 0 5px;
margin-top:0;
/* appears to be required for ie5.5 */
height:42px;
background-color:#FFF;
background-image:url(file:///Master/Projects/Web/WWE/g/basebg.jpg);
background-repeat:no-repeat;
background-position:bottom;
border-top:1px solid #DFDFDF;
font-size:70%;
color:gray;
}

/******************************
* FONTS AND TEXT
******************************/
.sectiontext {
font-family:Georgia,Arial, Verdana, Helvetica, sans-serif;
font-size:110%;
color:#919191;
font-style:italic;
padding:15px 0 25px;
margin:0;
}

/******************************
* THE HEADLINES
******************************/
h1,h2,h3 {
font-weight:400;
text-align:left;
font-family:georgia,arial,verdana,helvetica,sans-serif;
color:#818181;
}

h1 {
margin:0 10px 0 33px;
font-size:120%;
padding-top:0;
color:#4F4F4F;
}

h2 {
margin:0 30px 0 35px;
padding-top:10px;
font-size:125%;
}

#sidebar h2 {
margin:0 20px 0 33px;
padding:0;
font-size:115%;
}

h3 {
margin:10px 30px 0 35px;
color:#4A5254;
padding:0;
font-size:105%;
}

h4 {
margin:10px 30px 0 35px;
color:#4A5254;
padding:0;
font-size:80%;
}

.weddings {
color:#696969;
}

.abilities {
color:#4F6886;
}

.hair {
color:#84925F;
}

.tech {
color:gray;
}

/******************************
* MORE TEXT
******************************/
p {
margin:0 35px 15px;
line-height:175%;
color:#5F5F5F;
font-size:75%;
text-align:left;
}

#sidebar p {
margin:0 35px 15px;
line-height:175%;
color:#5F5F5F;
font-size:70%;
text-align:left;
}

.subnav {
font-size:70%;
font-weight:400;
color:gray;
padding:10px 0 0;
}

.first {
padding:10px 0 0;
color:#333;
font-size:70%;
text-align:center;
}

/******************************
* THE PORTFOLIO AREAS
******************************/
.folionumber1 {
background-image:url(file:///Master/Projects/Web/WWE/g/portfolio1.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.indexgallery {
background-image:url(file:///Master/Projects/Web/WWE/g/portfolio2.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.folionumber3 {
background-image:url(file:///Master/Projects/Web/WWE/g/portfolio3.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.tech {
background-image:url(file:///Master/Projects/Web/WWE/g/tech.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.about {
background-image:url(file:///Master/Projects/Web/WWE/g/about.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.gallery {
background-image:url(file:///Master/Projects/Web/WWE/g/gallery.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

.contact {
background-image:url(file:///Master/Projects/Web/WWE/g/contact.jpg);
background-position:top;
background-repeat:no-repeat;
padding-top:85px;
}

/******************************
* IMAGES
******************************/
/* left aligned image borders with hover */
.imgborder {
border:1px solid #E7E7E7;
padding:20px;
margin:30px 0 0;
background-color:#FFF;
}

a:hover .imgborder {
border:1px solid maroon;
}

/******************************
* THE LOGO IMAGE REPLACEMENT THINGY
******************************/
#logob,#logog,#logoblue,#logor {
display:block;
height:50px;
width:320px;
background-repeat:no-repeat;
background-position:left;
margin-top:0;
padding:50px 0 0;
}

#logoblue {
background-image:url(file:///Master/Projects/Web/WWE/g/logo-blue.gif);
}

#logog {
background-image:url(file:///Master/Projects/Web/WWE/g/logo-g.gif);
}

#logob {
background-image:url(file:///Master/Projects/Web/WWE/g/logo-b.gif);
}

#logor {
background-image:url(file:///Master/Projects/Web/WWE/g/logo-r.gif);
}

/* turns off gaps around images */
img {
border:0;
}

/******************************
* OLD BROWSER WARNING
******************************/
span.hidden,.hide,div.hr hr {
display:none;
}

/******************************
* THE PHOTO GALLERY
******************************/
.pgallery {
list-style-type:none;
padding:0 0 10px;
margin:0;
}

/* Spacing around each image */
.pgallery li {
float:left;
display:inline;
margin:0 0 30px;
padding:0;
width:160px;
height:120px;
}

.pgallery li a {
text-decoration:none;
color:#333;
}

.pgallery li p {
padding:0;
margin:0;
color:#333;
}

.pgallery li img {
border:1px solid #DCDCDC;
padding:5px;
background:transparent;
}

.pgallery li a:hover img {
border:1px solid #717171;
}

/* Gallery Container */
.pgallerycont {
width:480px;
padding:20px 0 0 35px;
}

.clear {
clear:left;
padding-top:10px;

}

/* turns off gaps around images */
img {
border:0;
}

.img1 {
padding:5px;
background-color:#FFF;
margin:5px 10px 0 0;
float:right;
}

.img2 {
padding:5px;
border:1px solid #BBB;
background-color:#FFF;
margin:5px 12px 0 0;
float:left;
}

/******************************
* THE FORMS
******************************/
.fieldset {
margin:0;
padding:0 0 5px 35px;
border:0;
text-align:left;
font-size:75%;
font-weight:400;
color:#505050;
}

.input {
background:transparent;
width:320px;
border:1px #CACACA solid;
color:#6A6A6A;
font-size:11px;
padding:2px;
margin:2px 0;
}

.button {
background:#990100;
color:#FFF;
border:1px solid #CACACA;
font-size:10px;
padding:1px;
margin:0;
}

.textarea {
font-family:arial,verdana,Georgia,sans-serif;
font-size:9pt;
color:#5B5B5B;
height:127px;
width:320px;
background:#FFF;
border:1px #CACACA solid;
padding:2px;
}

/******************************
* ADDRESS
******************************/
address {
margin:10px 35px 10px 38px;
line-height:175%;
font-size:75%;
font-style:normal;
text-align:left;
color:#5F5F5F;
}

address span {
display:block;
}

/******************************
* Lists
******************************/
.simplelist {
padding:0 35px 15px 55px;
margin:0;
line-height:165%;
font-size:75%;
text-align:left;
color:#5F5F5F;
}

.imgborder2 {
border:1px solid #F0F0F0;
padding:10px;
margin:10px 0 0;
background-color:#FFF;
}

/******************************
* FADER
******************************/
#photoholder {
background:#fff url(file:///Master/Projects/Web/WWE/html/%27g/loading.gif%27) 50% 50% no-repeat;
}

#thephoto {
width:342px;
height:442px;
}

/******************************
* End
******************************/
And it will work. I noticed that you have a lot of your background images still linked to your harddrive. That no right click thing IMO is also a waste of time. Firefox has the option to not allow the script to work and there is always view-source. I guess IE got confused when you told it to go back one level by using '../' then you told it to go to root by using the leading '/' in the front. You also don't need values on 0 values unless its line-height.

double_agent

07-17-2006, 08:50 PM

Good info.

I will definitely implement some of the changes.

Thank you so much!!