CSS - Css Link And Background Problems

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

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

ok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas?

Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason.

here is my css code:

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

/**************************/
/**************************/
/**********LAYOUT**********/
/**************************/
/**************************/
div#container
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 963px;
height: 100%;
border-style: solid;
border-color: #CC9900;
border-width: 2px;
}

/*****HEADER*****/
div#header
{
background-color: Teal;
width: 963px;
height: 175px;
}

/****************/
/*****MIDDLE*****/
/****************/
div#middle
{
width: 963px;
float: left;
background-image: url('../images/left.png');
background-repeat: repeat;
}

/*****LEFT BOX*****/
div#leftbox
{
background-image: url('../images/left.png');
background-repeat: repeat-y;
height: auto;
width: 213px;
float: left;
}

div#links
{
width: 213px;
height: 375px;
float: left;
background-image: url('../images/links.png');
}

/*****MIDDLE BOX*****/
div#centerbox
{
background-image: url('../images/body.png');
background-repeat: repeat-y;
width: 535px;
float: left;
border-left: solid 1px #CC9900;
border-right: solid 1px #CC9900;
}

div#title
{
width: 535px;
height: 40px;
border-bottom-style: solid;
border-bottom-color: #CC9900;
border-bottom-width: 1px;
margin-top: 0px;
}

div#list
{
width: 535px;
height: auto;
background-image: url('../images/left.png');
background-repeat: repeat-y;

}

/*****RIGHT BOX*****/
div#rightbox
{
background-image: url('../images/left.png');
width: 213px;
background-repeat: repeat-y;
float: right;
}

div#news /*This is the title text for the news box*/
{
width: 213px;
height: 25px;
margin: auto;
}

div#newsbox /*This is the news box div*/
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

div#events
{
width: 213px;
height: 25px;
margin: auto;
}

div#eventsbox
{
width: 199px;
height: 199px;
border: 0px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

}

/****************/
/*****FOOTER*****/
/****************/
div#footer
{
background: #333333;
width: 963px;
height: 55px;
clear: both;
background-image: url('../images/footer.jpg');
}

/*****CONTACTS*****/
div#phone
{
float: left;
width: 213px;
height: 55px;
text-align: left;

}

div#address
{
float: left;
width: 535px;
height: 55px;
text-align: center;
}

div#e-mail
{
float: left;
width: 213px;
height: 55px;
text-align: right;
}

/*****FLASH DIVS*****/
div#flashcontent
{
width: 963px;
height: 175px;
}

/********************/
/*****PROPERTIES*****/
/********************/

/*****DIVS*****/
div.event1
{
background-image: url('../images/event_1.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 37.5px;
margin-right: 20px;
margin-top: auto;
margin-bottom: auto;


}

div.event2
{
background-image: url('../images/event_2.jpg');
width: 210px;
height: 150px;
float: left;
margin-left: 20px;
margin-right: 37.5px;
margin-top: auto;
margin-bottom: auto;
}

div.list
{
width: 535px;

}

div.listtext
{
width: 435px;
}

div.sublisttext
{
width: 335px;
}

/*****LISTS*****/
ul
{
text-decoration: none;
margin-top: auto;
margin-bottom: auto;
margin-left: -10px;
width: 213px;
}

li {
list-style-image: url('../images/diamond_bullet_white.png');
width: 213px;
height: 31.25px;
margin: auto;
line-height: 31.25px;
}

/*****ANCHORS*****/
a
{
text-decoration: none;
color: #000000;
width: 213px;
height: 31.25px;
margin: auto;
}

a.e-mail /*This is issued to any anchors for e-mail, addresses*/
{
color: #000000;
font-weight: bold;
}

a:active
{
color: Red;
text-decoration: none;
list-style: none;
}

a.contacts
{
margin: none;
color: #FFFFFF;
}

/***PARAGRAPHS***/

p#contactinfo
{
color: #FFFFFF;
font-size: 11.5px;
height: 55px;
margin-top: 6px;
margin-left: 10px;
margin-right: 10px;
}

p.title
{
color: #000000;
font-size: 30px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
height: 40px;
}

p.body
{
width: 500px;
margin: auto;
}

p.boxtitle
{
font-size: 20px;
text-align: left;
margin-left: 7px;
margin-top: auto;
margin-bottom: auto;
}

p.subheader
{
width: 500px;
font-size: 14px;
text-align: left;
font-weight: bold;
margin: auto;
}

take a look at www.bosszine.be, looks fine isn't it
sidebar no problems at all both in IE and FF

now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF

but is that so? try to capture the sidebar images from IE
it won't work

don't take notice at the flash infobox, that's a work in a progress

furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar)

there's clearly a rendering problem in IE with my background images in the css

how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-)

any suggestions are greatly appreciated

Thanks for viewing my post. Here is the site I am working with:

http://www.flattrackillustrated.com/dev/

I am having two problems:

1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point?

2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen?

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

Hi everyone,
Please take a look at this site:
http://174.122.106.156/~johanna/php

The layout is fine in FF3.6, Chrome9, IE7 and IE8, but in IE6, the layout is buggered.

Can anyone tell me what's wrong and why?

Also, what is a good way to debug/troubleshoot layout problems in IE6? Currently, I use IETester to "view" pages in different versions of IE, but I can't poke around with the IE Developer Plugin or FireBug and know exactly what's the offending code.

How do you guys find and fix IE6-specific layout issues?

Thanks.

To start with, here's a block of code:

my style.css

Code:

.main { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 11pt;
 	color: #FFFFFF;
 	background-color: #666666;
 	text-align: center;
 	vertical-align: top;
 	border: #000000; } 

a.main:link  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; }

a.main:visited { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; } 

a.main:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF8A00;
  text-decoration: underline overline line-through;
 background-color: #666666;} 

a.main:active {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF6F00;
  text-decoration: blink;
  background-color: #666666; }

my html-file's thingies:

Code:

 <div id="Main" style="position:absolute; width:50%; z-index:5; left: 25%; top:
 25%; background-color: #333333;
 layer-background-color: #333333;
 border: 3px none #000000;" class="main">

And the problem:
With Windows XP /w IE and Linux /w Opera I get the same stupid looking detail - the backgrounds of the links are different from the div's background. So that the dark grey part is broken by the links and their light grey boxes. Looks horrific..

By the way, is there a good place for language references for CSS, PHP and HTML in the internet (URL)?

I am trying to get a background colour on a link that changes when it is rolled over. This I can do, however the colour only extends to the length of the word, I want it to extend to the entire length of the sidebar it is in. See: Online FX for what I mean.

Current CSS:

Code:

.sidebar {
	background-image: url(images/sidebar.jpg);
	background-repeat: repeat-y;
	width: 165px;
}

.sidelinks {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-left: 30px;
	padding-top: 55px;
	vertical-align: top;
	vertical-align: text-top;
	width:100%;
	height:20px;
}

a.side:link { color: blue; text-decoration: none; display:block; color:#FFFFFF; background:#0054A5; }
a.side:active { color: red; text-decoration: none; }
a.side:visited { color: blue; text-decoration: none; color:#FFFFFF; background:#0054A5; }
a.side:hover { color: blue; text-decoration: none; background: #0E4173;  }

And the HTML for that section:

Code:

<td rowspan="2" class="sidebar" valign="top">
	
	<div class="sidelinks">
		<a href="index.html" class="side">Home</a>
	</div>
	
	</td>

Any ideas?

I just wanted to know is it possible using css to add a link to a background image in a table or cell?

if so how would you do that?

Code:

<style>
.class1, .class1 a { color: blue; }
.class2, .class2 a { color: green; }
</style>

<div class="class1">
   <a href="moo.html">This link shows up as blue</a>
   <a href="moo2.html" class="class2">This link shows up as blue even though it should be green.</a>
</div>

Anyone know how to get around this without resorting to applying classes to every <a> tag.. ? Like say I want to change the color of a single link while leaving default to all the others..

Good Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue:

I have a CSS rule:

a:link, a:visited {
display:block;
font-weight:bold;
color:#000;
background-color:#FFF;
width:200px;
text-align:left;
padding:10px;
text-decoration:none;
text-transform:uppercase;

}

The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.!

Thanks for all your help!

-Chris

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

Just wondering if there was any way to have a background-image as a link?

The reason why:
I have a banner across the top of a site, and I'm sure I can probably lay it out using Divs, but I had made the banner a background anyways because I have a horiz. nav. menu that needed to go across the bottom of the banner on the left side. Essentially, there's a logo at the top left, nav. menu on the bottom left, and an image on the entire right side. But now I realized that I should make the logo a link back to the main page of the site. So can I make a background-image as a link, or do I need to pull it out and make it a regular image?

Thanks.