CSS - Help-background Image Doesnt Display Correctly Ie

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;
}

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.

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!!!

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

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

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.

Is there a fix?

Hello,
I got a website with a table on it. This is how it looks in firefox 2.0:
http://img139.imageshack.us/img139/9822/helpffkr6.jpg
And here's how it looks in IE6:
http://img111.imageshack.us/img111/9675/helpiehi7.jpg
As you can see, where FF do display the table border, IE does not.

Here's the simplified table code and the related css code:
Table ->
Code:

<table class="listings" style="width: 100%;">
<tr>
   <td colspan="2" class="darkRow">Category 1</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 1</td>
   <td style="width: 70%" class="lightRow">This is thread number 1.</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 2</td>
   <td style="width: 70%" class="lightRow">This is thread number 2.</td>
</tr>
</table>

CSS code -> Code:

<style type="text/css">
table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}
.darkRow{
	background-color: #4D3D4D;
	border-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow{
	background-color: #BFACBF;
	border-color: #4D3D4D;
	color: #4D3D4D;
	padding-left: 4px;
}
</style>

It seems as if IE doesnt support borders around a whole row, because when i add this:
Code:

table.listings td{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}

With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention.

Does anybody have an idea what i can do about this?

thanks in advance.

I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable.

This is my html:

Code:

<div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div>
<div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0"  /></div>

This is my css:

Code:

body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr  {position:static; width:auto; min-width:0px; min-height:100%; 
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}

any help would be greatly appreciated.

Thanks!

Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE.

Here is my site: Well I guess I can not link my site, but hopefully someone can still help me.


Here is my code: Quote:
/* Tabs ==================== */

#homepagetabs {
border-bottom: none;
margin-bottom: 10px;
padding-left:170px;
height:51px;
background:transparent url
}

#homepagetabs li {
display: inline;
list-style-type: none;
margin-top: 14px;
border: none;
border-bottom: none;
float: center;
line-height: 14px;
margin-right: 8px;
text-decoration: none;
cursor: pointer;
color:#fff;
background: none;
font-weight:bold;
font-size:12px;
}

#homepagetabs li.currenttab {
margin-top: 14px;
background: none;
border: none;
border-bottom: none;
font-weight:bold;
color:#fff;
font-size:12px;
text-decoration:underline;
}

#options_69 th {
font-size: 100%;
}

http://24.166.186.237/_elementalcon...themes/default/

thats where it is, in FireFox it looks fine [although there is a bug if the contents smaller than the navigation, the navigation floats over the bottom border] and I would prefer the navigations height 100%.

the problem in IE is obvious, the content div aligns itself under the bottom of the leftcolumn div.

the site should be up 24/7 unless my wireless dies overnight or something, in which case it will work later.

Please help thanks for reading.

Oh yeah one more problem in all browsers Ive tried, the layout itself isnt positioning where I want it to, it's going all the way right, if not farther so theres a horizontal scroll bar . I cant figure out how to center it. I heard a paragraph text-align: center; containing the main div works in some browsers...

I am working on this page:
http://concrete-creative.com/pp/products.html

and the problem I am having is that I want the rest of the "flower" image to show behind the content area... I have it set as the background image of that table, but it's not showing up. Here's an image of how it is supposed to appear:
http://concrete-creative.com/pp/pp_sample.jpg

Can anyone direct me on how to work this out?

Thank you!

(I posted this is the HTML forum too but can't figure out how to move it, so I just posted it here too)

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div>

When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!!