CSS - Ie Wont Display Background-image Unless There Are Borders?

Quick problem:

Page he h**p://topofferspage*com
(I don't want Google indexing the url here.)

Background image is displaying in FF but not IE6. I don't think I've had this problem before. Can anyone tell what I'm missing here?

HTML

Code:

<div id="block-user-1" class="block block-user">

  <h2>Navigation</h2>

  <div class="content">
<ul class="menu">
<li class="leaf"><a href="/" title="Top Offers Home Page" class="active">Home</a></li>
<li class="leaf"><a href="/about" title="About the Top Offers Page website">About us</a></li>
<li class="leaf"><a href="/privacy" title="Privacy Policy">Privacy Policy</a></li>

<li class="leaf"><a href="http://topofferspage.com/contact" title="Contact page">Contact Us</a></li>

</ul>
</div>
</div>

CSS

Code:

/* Masthead Navigation */

#block-user-1 h2{
    text-indent: -9999em;
}

#block-user-1 ul{
    float: right;
    position: relative;

}

#block-user-1 ul li{
    float:right;
    position:relative;
    right:80px;
    top:75px;
    background: none;
}

#block-user-1 ul li a{
    color: #FFF;
    text-transform: lowercase;
}

/*--- /Masthead Navigation ---*/

You win many internets of love for your help.

Hello. Can someone please help me understand why this page looks fine in IE7 and Firefox, but not in IE6:

http://www.shootingblanks.net/TEMP/Nevermind/bio.php

You can see that the background image is completely cut off on the left in IE6, and I'm not understanding why. Here's the CSS code for that div:

Code:

#bioContent {
	background: url(../images/bkgnds/bio.jpg) no-repeat top left;
	width: 140px;
	min-height: 550px;
	float: left;
	margin: 0;
	padding: 0;
}

Also, there's one other page on the same site that's also behaving oddly only in IE6. The picture is not on the bottom-right like it should be, and it's getting cut off:

http://www.shootingblanks.net/TEMP/Nevermind/news.php

Here is the code for that div, if anyone has suggestions on that one too. Thanks!!!:

Code:

#newsContent {
	background: url(../images/bkgnds/news.jpg) no-repeat bottom right;
	min-height: 400px;
	text-align: left;
}

Hi everyone,

I'm experiencing an unusual problem that I could use some help with.

I've a layout that uses three background images (in separate divs) - a top bg, a bottom bg, and an overall bg.

The bottom and overall background images are causing a problem. The top bg and bottom bg are supposed to line up. And they do! My layout looked fine on my computer (PC using Firefox 3.5.7 and IE8). I uploaded it to my personal website - and it looked fine there also. I validated the code successfully.

The problem happened when I uploaded it to my client's web server. The top bg displayed ok. However, the overall and bottom background images did not display correctly. They seemed "squeezed". The overall should be center and extend to both ends of the browser window (the image is large enough).

I can't seem to identify why it would do this. I even did a test by removing all of the code except for the div containing the background image. I added another div and placed the image directly into it (so that I could compare the size). Here's the css:

Code:

html, body	{
	margin: 0;
	padding: 0;
	background-color: #CCC;
	}

#botDrop	{
/*	margin: auto; 
*/	background: url('../images/bgDropBot.jpg') no-repeat left top;
/*	width: 971px; 
	height: 50px; 
*/	background-color: #CCC;
	}

Again, looked fine on my computer, looked fine on my web server - displayed incorrectly on the client's server. On the client's server it again displayed (horizontally) smaller than it's actual size.

My background image was initially about 1200 pixels wide. I reduced it, and that seemed to make it a little better, but didn't quite fix the issue. I suspect there's some sort of calculation going on depending on the screen size. However, I don't get why it doesn't do that for me when I view it locally or on my personal web server.

Here's a screenshot showing the problem: http://www.stephencamper.com/screenshot/screenshot.jpg


I just want the background image to display at it's actual size.

Any help's appreciated.

Thanks.

-Stephen

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

Hi All,

Here's my issue... I have decided to try an all css-based layout which will incorporate:

1. a background image (770px wide) that repeats on the y axis in the BODY tag

2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image

The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ]

The problem is as follows:

Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time.

To see the problem: http://publictrust.ca/css/default.htm

The css is as follows:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #260D0D;
font-size: 0.8em;
background-color: #260D0D;
margin: 0px;
padding: 0px;
background-image: url(../images/body-bg.jpg);
background-repeat: repeat-y;
background-position: center center;
}
#divHeader {
margin: 0px;
width: 750px;
color: #260D0D;
}
#divMain {
background-color: #EDCCA1;
background-image: url(../images/container-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 750px;
color: #260D0D;
}
#divFooter {
text-align: center;
font-size: 0.7em;
margin: 25px 0 0 0;
}
#divHeader, #divMain, #divFooter {
width:750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #260D0D;
}
#leftMenu {
float:left;
margin:130px 0 0 5px;
padding: 0px;
width:150px;
}
#divMainContent {
float:right;
width:500px;
margin: 150px 5px 50px 5px;
border-top: 1px solid #260D0D;
}

The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css

Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter.

Thanks in Advance,

mne

I have a gradient background image that goes from dark to light. At the bottom of the table if the body of text grows too large the table will stretch past the length of the background gradient image exposing the bgcolor for the page (not acceptable). If I change the bgcolor of the table the color is applied over the background image. Isn't there a way to fix this with CSS?

Thanks for any help!!!

An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options:

Option 1:
One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image.

You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html
example

Code:

/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;

/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

Option2:
I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE.

example
Code:

/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}

I would really appreciate some insight. I am pulling my hair out.

Thanks

Hi all see here http://www.gaming4linux.com/index.php

On the top bit for "latest news" there is a space below the background where the border is on windows, but on linux there isn't, any ideas?

I have a layout made up of divs, and held together by another div. That holder div is supposed to have a background image, but it wont show on every browser that I've tried, except IE7.

Here's the id:

#holder {
background-image: url(/files/images/CSS/header.png);
width: 750px;
margin-left:auto;
margin-right:auto;
margin-bottom: 10px;
margin-top: 10px;
}

Backgrounds show on other divs, so why not this one?

Hi all,

I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE!

I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels.

This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically).

Here is the code: PHP Code:
<iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' 
style='background-color:gray;width:500px;height:150px;'></iframe> 



And the document in the IFRAME is trivial PHP Code:
<div style='padding:8px;border:1px solid black;background-color:white;'>
This is a bunch of txt THis is a bunch of txt ... (repeat this 
text a bunch so you have a scrollbar) 
</div> 



As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find.

Thanks in advance for the help.

-- Jon

Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine.

The page is http://holiday.mrpunkin.com/about.php

My classes are as follows: they all modify the "mid" div as you can see:

Code:

#mid.about {background: transparent url("/img/headers/mid_about.gif");}

#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}

#mid.food {background: transparent url("/img/headers/mid_food.gif");}

#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}

#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}

#mid.health {background: transparent url("/img/headers/mid_health.gif");}

#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}

#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}

#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}

#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}

Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks.

I have a bit of CSS that wraps a border around an image, it works in IE but not in FF. What am I doing wrong?
Code:

.book_box {	
	width: 95%;
	padding: 10px 5px 5px 5px;
	border: 2px solid white;
	background-color: #eef7ff;
	text-align : left;
	overflow: auto;
}
.book_box_img {
	float: left;
	margin: 5px;
	border: 1px;	
	border-color: #003366;
}

Hi,

Someone I know is trying to find a way of putting a border round an image (say 1px white) followed by another border around that (say 1px blue).

Anyone done this or have a good idea of a way to do it?

thanks