CSS - Strange Image Problems In Win/ie6

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

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

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

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

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:
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 am trying to use this very simple image gallery from cssplay stu nichols site
"A permanent image click gallery with 'previous' / 'next' buttons"
so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons
i'm very new to css - and am bashing my head over this issue

would appreciate any help - not sure if i need to put in my altered source code so i will
Code:
CSS

#gallery {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	font-family:verdana, arial, sans-serif;
}
#gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;}
#gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;}
#gallery a b {display:none;}
#gallery #fullsize {
	position:absolute;
	left:0;
	top:0;
	height:550px;
	width:500px;
	overflow:hidden;
	text-align:center;
}
#gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;}
#gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;}
#gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;}
#gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;}

Code:
XHTML

<div id="gallery">
	<div id="fullsize">
		<div id="pic1">
			<img src="images/greyday/gd1.jpg" alt="grey day1" />
			<a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a>
		  <h3>1 | 10</h3>			
	  </div>
		<div id="pic2">
			<img src="images/greyday/gd2.jpg" alt="grey day2" />
		  <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a>
		  <h3>2 | 10</h3>
	  </div>
		<div id="pic3">
			<img src="images/greyday/gd3.jpg" alt="grey day3" />
		  <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a>
		  <h3>3 | 10</h3>
	  </div>
		<div id="pic4">
			<img src="images/greyday/gd4.jpg" alt="grey day4" />
		  <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a>
		  <h3>4 | 10</h3>
	  </div>
		<div id="pic5">
			<img src="images/greyday/gd5.jpg" alt="grey day5" />
		  <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a>
		  <h3>5 |10</h3>
	  </div>
		<div id="pic6">
			<img src="images/greyday/gd6.jpg" alt="grey day6" />
		  <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a>
		  <h3>6 | 10</h3>
	  </div>
		<div id="pic7">
			<img src="images/greyday/gd7.jpg" alt="grey day7" />
		  <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a>
		  <h3>7 | 10</h3>
	  </div>
		<div id="pic8">
			<img src="images/greyday/gd8.jpg" alt="grey day8" />
		  <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a>
		  <h3>8 | 10</h3>
	  </div>
		<div id="pic9">
			<img src="images/greyday/gd9.jpg" alt="grey day9" />
		  <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a>
		  <h3>9 | 10</h3>
	  </div>
		<div id="pic10">
			<img src="images/greyday/gd10.jpg" alt="grey day10" />
		  <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a>
		  <h3>10 | 10</h3>
	  </div>
	</div>
</div>

i really would appreciate some help with this - thank you in advance

hey guys

I am quite new to CSS, so i am hoping someone will be able to enlighten me - i am sure this is one of those "easy to sort out when you know how to work with IE7" problems...

Anyway - this page is causing me problems

anambar. co. uk/ listings /

The page displays fine in Firefox, but in IE7, the Square images for each event are cut off halfway. Seems like they are hidden behind another div layer...

Any ideas why? or how this is solved?

Any feedback on dodgy CSS / code also welcome - I had loads of problems with the dreaded Operation Aborted in IE7 yesterday with conflicting JS, hence the lightbox code being right at the end of the page, so if anyone knows a cleaner solution or why its happening, i would love to know!

Cheers guys

Jim

ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com

Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated.

--Sean

HTML:
<p id="dot"></p>

CSS:
#dot {
position:relative;
left: 0px;
top: 0px;
width:200px;
height:6px;
background-image: url(dot.jpg);
background-repeat: repeat-x;
line-height:0pt;
margin: 0px;
}

Hi all,

I seem to be having some problems between FF & IE i have the background image set at 100% in CSS and it works fine in IE but if you look at it in FF there is some of it missing..

Here is the script

If you look at it in IE first you will see what it is meant to look like..

Code:

/*
* Main Background
*/
#main-body {
	margin: 0px auto;
	width: 999px;
	height: 100%;
    background: url('./images/bricks.jpg') 100% repeat;
}

So what am i missing ?