Background Image, etc. Not Showing - AGAIN!

This is nuts!

These are the first things I fought over and now they are not working again.

The original “thread” said two months old - start a new thread!

In Chrome: no background-image and no picture. Background color and text shadow does show up.

In IE8: No text shadow , no picture, nor background-image but background color does show.

Also - POSITIONING - both horizontally and vertically are still impossible for me.

Index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" /><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="keywords" content="orange county real estate, local broker, local real estate broker, local agent, local real estate agent, orange county real estate broker, orange county real estate agent." />
<title>Properties With Style Home Page - Orange County Real Estate</title> 
<link href='http://fonts.googleapis.com/css?family=Tangerine|Crimson+Text&subset=latin&v2' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="css/testcss.css" media="screen,projection,tv"/>


<div class="tangerine">Properties With Style, Inc.</div>
<div class="tangerine40">A California Real Estate Corporation</div>


<p><img src="/images/ricksfadedpicture.jpg" alt="" width="180" height="240" />
<p>Rick Schreiber is <i>President</i> of <i>Properteis Wtih Style, Inc.</i>, and has been in the real estate industry for the past 30 years.</p>

</body>
</html>

CSS


body   {background-color: #009;
		background-image: url(/images/redshade.jpg);
		background-attachment:fixed;
		background-color:#C90;
	  	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      	font-size:100%; line-height:1.25; padding: 8%;
}

#header {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:100%; line-height: 110%; 
		 color: #CFF; text-align: justify; margin: 10px; float:right; clear:left; width:auto; 
}

p   {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#fff; font-size:100%; line-height:1.25;
	 
}


p, h2, h3, h4, h5 {
	text-align: left;
	display: inherit;
	vertical-align: middle;
	width: 180px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 0;
	float: left;
	font-size: 80%;
	height: 90px;
	clear: left;
}

#content p {
    text-align: justify;
    line-height:125%;
    margin:0 0 1em;
    text-indent:1em;
    color: #fff;
	float:right;
}


#nav {
    width: 320px; 
    padding:8px 0; 10px;
    margin:0 25px 2em 10px;
    float:left;
    word-wrap:break-word;
    font-size:90%;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    width: 200px;
    position:fixed;
}
#nav li {
	font-size: 90%;
}
#nav a {
    color:#fff;
    text-decoration:none;
} 

.tangerine{
  font-family: 'Tangerine', serif; color:#0CF;
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 5px 5px 5px #FFF;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.027em;
  word-spacing: 0.094em;
  line-height: 0.99;
  text-align:left; margin-right:10px;
}

.tangerine40 {
  font-family: 'Tangerine', serif; color:#0CF;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 5px 5px 5px #fff;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.027em;
  word-spacing: 0.094em;
  line-height: 0.99;
  text-align:left; margin-right:10px;
}

I’m going to kill myself!

Rick

No suicides on the forum, ok?

The first problem I see is your HTML. You need to make sure ALL tags are closed. ALWAYS. Otherwise different browsers will attempt to fix your code, and of course will arrive at different fixes, producing the different “errors” you saw.

first lets fix this:
<link type=“text/css” rel=“stylesheet” href=“css/testcss.css” media=“screen,projection,tv”/></head> <body>

<p><img src=“/images/ricksfadedpicture.jpg” alt=“” width=“180” height=“240” /></p>

As long as we are at it, for semantics sake, change all the <i> to <em>.

IE just doesn’t support text-show am afraid. If it’s THAT important you may try using IE specific filters , but they wont be as “easy” and unlike the real text-shadow there is little control over direction, intensities and in my experience… matching hues.

.yourrule{ filter: glow(color=white,strength=5), alpha(opacity=70); }

where: color is your color, strength is how wide the shadow is, and opacity= is how transparent the effect is, 100 being totally opaque and 0 being so transparent that it is essentially invisible.

That leaves your picture… if it isint showing up in all browsers check that ricksfadedpicture.jpg is in a folder named images which happens in the same folder as your HTML file.

Lets see how that fixes things…
(and how , exactly do you want them positioned?)

You were already told in the previous thread that the image does not exist on your server—at least not in the folder you have targeted. Why do you ignore the advice people give you? It’s incredible. :slight_smile:

How Does <em> also equate to i as in italicize? I thought <em> was used to size fonts or indents?

I also don’t understand using <p> for an image. I thought that <p> stood for a text paragraph?

The fonts are web friendly fonts from GoogleFonts as they will not degrade on screen when viewed from a computer that does not have those fonts installed.

See the link

<link href='http://fonts.googleapis.com/css?family=Tangerine|Crimson+Text&subset=latin&v2' rel='stylesheet' type='text/css'>

How can I combine the method you suggested .yourrule to the <div class=“tangerine” code line?

Pictures - I don’t know.

My Root system seems in order and the picture and background image are there and background image are there in the image folder.

Thanks.

Rick

Going by your previous site links, your image should be here:

[noparse]http://www.propertieswithstyle.com/images/redshade.jpg[/noparse]

But it isn’t there.

<EM> is ver so much better than <I>. EM actually MEANS emphasis, while <I>, like <EM> just LOOKS slanted.

You dont actually use a P for the image, you use it to CONTAIN the images. See, Images, <B>, <SPAN>, <EM>, <I>, etc are INLINE tags all inline tags. it is good practice to contain inline tags in block tags ( such as P, LI or DIV… whichever is most appropriate for the SPECIFIC case) Also I was saying you needed to CLOSE the tag. whenever you open a tag ( example : <P>) you need to close it example(</P>) not doing so can cause mysterious looking errors.

Text-Shadows have nothing to do with the font. but with the LEVEL of CSS support offered by the specific browser and version of the browser. If you get a hold of Firefox 1 or 2 , you’ll see ( I think, it’s been a while) that the shadows are missing there too.

yes, but Is the image folder in the same folder as your HTML document?

.tangerine{
font-family: ‘Tangerine’, serif; color:#0CF;
font-size: 80px;
font-style: normal;
font-weight: 400;
text-shadow: 5px 5px 5px #FFF;
text-decoration: none;
text-transform: none;
letter-spacing: 0.027em;
word-spacing: 0.094em;
line-height: 0.99;
text-align:left; margin-right:10px;
filter: glow(color=white,strength=5), alpha(opacity=70);
}