[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1830
  • Last Modified:

img tag and CSS

I am trying to create a Home Page with CSS. Below is part of my Index.htm (where the problem code is) and CSS code after this statement. Everything is fine, but some of my links must have a small image with the alt tag property. the image (new_window.gif) shows as a blank picture. Do I have to set a propety in my CSS so the image will show up?

<div id="left">
            <h2>health information</h2>
            <ul>
                  <li><a href="http://browardchd.org/Services/Environ_Health/Beaches.htm" >Beach Conditions <img border="0" src="images/new_window.jpg" width="14" height="13"  alt="Link will open in a new browser"></a></li>
                  <li><a href="#">Breast and Cervical Cancer </a></li>
                  <li><a href="#">Child Vaccination Schedule</a></li>
                  <li><a href="#">Community Outreach</a></li>
                  <li><a href="#">Health Alerts</a></li>
                  <li><a href="#">Health Topics A to Z</a></li>
                  <li><a href="#">Information for Teens</a></li>
                  <li><a href="#">Medical Regulations</a></li>
                  <li><a href="#">Nutrition and Fitness</a></li>
                  <li><a href="#">Q and A: Florida's Health</a></li>
                  <li><a href="#">Reportable Diseases/Events</a></li>
                  <li><a href="#">Statistics: HIV/AIDS/STD</a></li>
            
            </ul>



CSS CODE---------------------------------------------------------------------------------------

* {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
}
body {
      font-size: 16px;
      color: #666666;
}
h1, h2, h3 {
      margin-bottom: 20px;
      color: #0000ff;
}
h1 {
      font-size:20px;
}

h2 {
      font-size: 1.7em;
}

h3 {
      font-size: 1.7em;
}

p, blockquote, ol, ul {
      margin-bottom: 20px;
      line-height: 1.67em;
}

ol, ul {
      list-style:none;
}
ol {
      margin-left: 3em;
      list-style: outside decimal;
}
a {
      color: #660000;
}
a:hover {
      text-decoration: none;
}

/********************************************************************* Logo ************************************************/

#logo {
      padding: 0 0 150px 0;
      background: url(images/img01.jpg) no-repeat center bottom;
      border-top:medium #FFFFFF;
      /*border-bottom: 1px solid #FFFFFF;*/
}

#logo h1, #logo h2 {
      width: 860px;
      margin: 0 auto;
      text-transform: uppercase;
      font-size: 1.22em;
}

#logo h1 {
}

#logo h2 {
      margin-top: -1.22em;
      text-align: right;
}

#logo a {
      text-decoration: none;
      color: #660000;
}

/************************************************************* Page ************************************************/

#page {
      width: 1226px;
      
      margin: 0 auto;
            
      background: url('images/background5.jpg') no-repeat;
      
}

/************************************************************* Left ************************************************/

#left {
      float: left;
      width: 340px;
      padding: 20px;
}

#left h2 {
      margin-bottom: 1em;
      padding-right: 6px;
      border-right: 4px solid #cccccc;
      text-transform: uppercase;
      text-align: right;
      font-size: 1em;
      font-weight: bold;
      color: #0000ff;
}

#left ul {
      /*line-height: 1.82em;*/
      line-height: normal;
}

#left li {
      padding-right: 10px;
      
      text-align: right;
      
      
}

#left a {
      text-decoration: none;
      font-size: .85em;
}

#left a:hover {
      text-decoration: underline;
      

}

/************************************************************** Center *******************************************/

#center {
      float: left;
      width: 401px;
      padding: 21px;
}

/************************************************************** Right *******************************************/

#right {
      float: left;
      width: 160px;
      padding: 20px;
}

#right h2 {
      margin-bottom: 1em;
      padding-left: 6px;
      border-left: 4px solid #cccccc;
      text-transform: uppercase;
      font-size: 1em;
      font-weight: bold;
      color: #0000ff;
}

#right ul {
      line-height: normal
}

#right li {
      padding-left: 10px;
      /*background: url(images/img04.gif) no-repeat left center;*/
}

#right a {
      text-decoration: none;
      font-size: .85em;
}

#right a:hover {
      /*text-decoration: underline;*/
}

/************************************************************** Footer ************************************/

#footer {
      height: 100px;
      padding: 20px;
      /*background: #ff0000 url(images/img03.gif) repeat-x;*/
}

#footer p {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: .125em;
      font-size: .77em;
      font-weight: bold;
      color: #ff0000;
}

#footer a {
      text-decoration: none;
      color: #ff0000;
}
0
Deweyb
Asked:
Deweyb
1 Solution
 
TNameCommented:
>Do I have to set a propety in my CSS so the image will show up?

No, the image should display as it is.
Are you sure the path is ok (images/new_window.jpg)? Correct case?
0
 
DeweybAuthor Commented:
TName...You are correct. It does display when I publish the CSS and Index to my web hosting provider. But when I preview the index.html page (i'm using Expression Web...File> Preview in Browser) the image doesn't show nor does it show an X in a box. very strange. I spent 2 hours thinking it wouldn't show up until I published it. Sorry to bother everyone on this question but I respolved it...sort of.
Deweyb
0
 
xberryCommented:
Mostly this is a case of different path reading, what youi can do is:
- view source of your page in browser to get any hint if your preview program did add any additional
directories or so ...
- play with the path instructions, I had case where some root directory referrers had to be added
try (./images/new_window.jpg) or (.images/new_window.jpg) even (../images/new_window.jpg)
- make sure there is no whitespace/no pagebreak in your html code-line with the link and image in it.

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
henderbopsCommented:
Are you aware that you mentioned you want new_window.GIF to show and wrote new_window.JPG in your code?
0
 
DeweybAuthor Commented:
Yes..thanks...I'm using both jpg and gif for my tag...
0
 
ee_autoCommented:
Question PAQ'd, 500 points refunded, and stored in the solution database.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now