CSS - Weird Disappearing Image Problems In Ie7

I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it.
So far, I think I've got the images cut correctly.
I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it.
So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables.
Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help.
Both pairs of files validate.
Here are the links for the:
div based layout and it's css file
AND
table based layout and it's css file
Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to.

I'm feeling a little tortured over this one

Hi
I have a two curved images. They sit fine on the webpages in FF but there is a gap in IE.
I have tried allsorts of things to get it sorted but nothing seems to work.
Have a look at me code:
PHP Code:
<div class='main'>
            <div style='float:left;'><img src='images/left_corner.gif'  alt='left_corner' /></div>
            <div style='float:right;'><img src='images/right_corner.gif'  alt='right_corner' /></div>
                <div class='proheader'>Problem with images</div>
        </div> 




And heres the CSS code:
PHP Code:
.main{
    position:absolute;
    top:125px;
    left:140px;
}

.proheader{
    background-color:#0099CC;
    font-size:12px;
    font-weight:800;
    height:19px;
} 




The file can b found at :
http://pfwd.org.uk/sfd/image_problem.htm
Please help
Thanks

problem fixed, please delete this post

every time i upload a picture through html or css it affects other images around it or creates a big gap how do i avoid this......also for a template im i best to use individual pictures or make the template all as 1 photo

I am trying to compose several pages with a similar theme. They work on FireFox and several Mac broswers that I've tried, however in IE6 for windows, my div that is position:absolute; does not appear at all. It does appear when I change the value to relative. The other browsers I've tried show the absolute div with no problems. I have no idea what is going on.

http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index_IE.htm

The 'invisible' div should have a green background and some text.

The above is a scaled-down version of

http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index.htmhttp://navpress.ecommercerep.com/ch...le/index_IE.htm http://navpress.ecommercerep.com/ch...le/index_IE.htm

Hi:
I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image?

Here is the style for the <td> with id="header"
Code:

#header {
	background: #FFF;
	background-image:   url(include/head.jpg);
	background-repeat: no-repeat;
	height: 136px;
	width: 100%;
	background-position: right;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;	
}

And here is the <td>
Code:

<table id="main">
	<tr>
		<td id="header">
			<ul id="nav">
				<li><a href="">Home</a></li>
				<li><a href="">Benefits</a></li>
				<li><a href="">FAQ</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Pay Your Bill</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</td>
	</tr>
</table>

Thanks in advance.
Link:
http://www.wiu.edu/users/mujas2/test/

Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed!

I have a problem that I just cannot figure out.

Scenario
I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions.

Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide.

Now I can acheive this fine by placing the second image in the css style sheet for my page container.

But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window.

How can I stop this so that it is the actual lenght of the window with teh scroll.

A link to the page where if you scroll it cuts off the lilac colour:
http://www.acklamflooringservices.co.uk/development/index.html

The css code for my html/body and page div.
Code:

html { height:100% }

body 
{
	margin: 0px;
	background-color: #CCCCFF;
	background-image: url(inc/grnd.gif);
	background-repeat: repeat-x;
	height: 100%
}

#PageDiv {
	position:relative;
	width: 940px;
	margin:0px auto;
	background-image: url(inc/grnd2.gif);
	background-repeat: repeat-x;
	height: 100%
	}

I have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working.

Here is the webpage

These are the items that should have a custom bullet (an upside down blue triangle)

Introducing the New ATS/ERS Standards
Spirometry Training is Essential

Guidelines for COPD Emphasize Spirometry Training
COPD: Make Your Goal Early Detection by Tom Petty

Here is the css:
Code:

#newsletter ul {
	padding: 0;
	list-style: none;
}

#newsletter li {
	margin-left: 30px;
	background-image: url(../images/bullet.gif) repeat-n;
}

Here is the xhtml:
Code:

	<div id="newsletter">		
		
	  	<h1>Vitalograph Newsletters</h1>
		
		<div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span> 
          <h2>Vitalink Newsletter</h2>
			<ul>
				<li>Introducing the New ATS/ERS Standards</li>
				<li>Spirometry Training is Essential</li>
			</ul>

       <span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink 
        Fall 2005 (pdf 583 KB)</a></span>
		
		<ul>
		    <li>Guidelines for COPD Emphasize Spirometry Training</li>
			<li>COPD: Make Your Goal Early Detection by Tom Petty</li>
		</ul>
        <span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink 
        Spring 2005 (pdf 583 KB)</a></span> 
		</div>
		
		<div class="row">
        <h2>Pharma Newsletter</h2>
		
			<p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory 
			clinical trials products and services, news about our people and where you can meet us. 
			It also highlights important new legislation and other relevant news in the industry that 
			we hope will be a useful resource for you. </p>
			
			
          <p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma 
          January 2006 (pdf 76 KB)</a></p> 
		  
		  <p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma 
          April 2006 (pdf 49 KB)</a></p>
		  
		   </div>
		  
		  <div class="line"></div>
		
		</div>

Hello,

I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed.

I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best!

My problem:

I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first.

I want to change both from their background color to an image. The text still have to be able to be read.
I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way.

Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem!

And thank you so far!

Here are the codes from my footer:
Quote:
#footer {
text-align: center;
font: 7pt arial, sans-serif;
background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat;
color: #BBBBBB;
z-index: 100;
clear: both;
border: 0px;
padding: 10px;
}

for some reason my background image is NOT showing up--
i have tried everything that i can think of --

i do have an IMAGE directory on server-- and the image is in the directory --

i am sure it is something stupid that i am not seeing or doing
but sure would appreciate a little help--

thanks in advance for help-- i so appreciate it

here are links to site and code

PAGE

CSS

Hi there,

This image gallery is working fine is Safari and Firefox, but has a problem in IE, but I just can figure it out!

Here is the page:
http://www.greatsouthmetals.com/image-gallery.html

Please help!

Thanks!

I've got a background image problem with my first real attempt at a table-free CSS design. There are two main images (one is top-right in the body background, the other is bottom-left in a div).

It looks like the bottom-left image occasionally gets displayed at the bottom of the viewable area instead of the actual page. When you scroll down you can see that the image is repeated.

Refreshing the page sometimes solves the problem (and sometimes creates it), but switching windows with Alt-Tab fixes it every time. Hovering over the links in the body of the page, which change the background color, sort of "erases" the repeat image.

Has anyone come across this before? Any chance it's the same problem Dave Shea mentions at:
http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/index.php

Thanks,
Josh

html: http://66.213.53.5/index.html
css: http://66.213.53.5/season.css
screen: http://66.213.53.5/images/problem.gif

hey all..got a wierd one..well to me anyway ! hope someone can tell me what im doing wrong !!

i have code like this

Code:

#banner img {
    height: 15em;
    width: 25em;
    margin: 0.5em;
    }

to manage the size of an image but i want to add another image to the page and i can't

the css can be found here

and the page im working on can be found here

if anyone has any ideas that wouldbe marvelous...

thanks

RF

- EDIT -

I feel stupid because the images are named content_02.jpg not content02.jpg


Sorry - I knew I wasn't crazy


I've encountered a seriously odd css difficulty. Where as two nearly identical tags being called upon in the same manner... one will work and the other will not.

This is my Stylesheet

Code:

td.bgimg1 {
background-image: url('images/content02.jpg');
}

td.bgimg2 {
background-image: url('images/content06.jpg');
}

td.bgimg3 {
background-image: url('images/index_17.jpg');
}

td.bgimg4 {
background-image: url('images/index_18.jpg');
}

td.upbgimg1 {
background-image: url('../images/content02.jpg');
}

td.upbgimg2 {
background-image: url('../images/content06.jpg');
}

td.upbgimg3 {
background-image: url('../images/index_17.jpg');
}

td.upbgimg4 {
background-image: url('../images/index_18.jpg');
}

td.upbgimg5 {
background-image: url('../images/comic_01.jpg');
}

A:link
{
	FONT-FAMILY: Verdana, tahoma, Arial;
	COLOR: #284966;
	TEXT-DECORATION: underline;
}
 A:visited 
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    color : #284966;
    text-decoration : underline;	
}
A:active
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #284966;
    TEXT-DECORATION: underline;
}
A:hover
{
    FONT-FAMILY: Verdana, tahoma, Arial;
    COLOR: #FF8C00;
    TEXT-DECORATION: underline;
}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	margin-bottom:0
}
table{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
}

This is the code where they are called upon...

Code:

<td width="16" class="upbgimg3"></td>

This one works

Code:

<td width="16" class="upbgimg4"><div align="right"></div></td>

As does this..


---

But the following don't work.

Code:

<td class="upbgimg2">&nbsp;</td>

Code:

<td class="upbgimg1" valign="bottom"><div align="center">- Text -</div></td>

I am linking to my style sheet as follows.

Code:

<link href="../textstyle.css" rel="stylesheet" type="text/css">

Any ideas?