SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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?)

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <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

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    My Root system seems in order and the picture and background image are there and background image are there in the image folder.
    Going by your previous site links, your image should be here:

    http://www.propertieswithstyle.com/images/redshade.jpg

    But it isn't there.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    <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);
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •