Cant see class and text in it even though inspect element shows it

This site is best viewed in a modern browser with JavaScript enabled.

Cant see class and text in it even though inspect element shows it

tony_webb

I am unable to see a class which is inside another class.
If I remove the </div> above the class and insert it below the text shows but I can't position it.

html code is;

<div class="txt-6">
<h4> Postcards</h4>
 <p>Donate 51$ - 60$ USA <br/>
  &nbsp;&nbsp;(£34.00 - £40.00, 39,25€ - 46,15€) and</p>
<p><font color="blue">1.</font> Receive this pack of 5 postcards</p>
<p><font color="blue">2.</font>Get an A3 poster with an encouraging verse and<br/>
   <p><font color="blue">3.</font> A Photographic fridge magnet<br/>
      <font color="blue"> 4.</font>  A photographic Keyring<br/>
      <font color="blue"> 5.</font> A Photographic bookmark<br/>
      <font color="blue"> 6.</font> A mention in our newsletter<br/>
      <font color="blue"> 7.</font> A copy of our newsletter </p>  

 <h4>5 postcards pack details;</h4>
       <p>* 5 different designs in a pack <br/> 
       * printed on silk card for richer colours<br/>
       * gloss coating on outside<br/>
       * Size 150 x 100 mm - 6 x 4 inches</p>

</div>                           <--- if I delete this </div> the text shows but can't position it !-->

<div class="post-col">
<h4> Special Service for postcard collectors</h4>
<p> If you are a postcard collector I can send the postcards to you with a personal message and a postage stamp.<br/>
    This requires an additional donation of 6$ USA, £4.00 GBP or 5€ to cover the worldwide postage costs for each <br/>
    card. Please let me know what message you want writing on them and the delivery address.</p>
<a href="#top">Top</a>
</div>
</div>

The css code is

.postcard {   position: relative;
             height: 45em;
            border: 2px inset;
            margin-top: 20px;
             margin-left: 10%;
            margin-right: 10%;
            background-color: white;
            padding-left: 15px;
            padding-bottom: 15px;
          }
.postcard img { position: relative;
                top: 5px;
                left: 30px;
                max-width: 100%;
                height: auto;
                margin-top: 5px;
                border-style: outset;
                border-width: 2px;
                border-color: #D5D6FF;
               } 

.txt-6 {  position:relative;
          top: -230px;
          left: 320px;
          font-family: arial, sans-serif;
          font-size: 1.10em;
          color: black;
          text-align: left;        

        }

/* this section is the problem*/

.post-col { display: block;
           top: -110px;
           left: 10px;
          width: 600px;
          height: 100px;
          font-family: arial, sans-serif;
          font-size: 0.80em;
          color: black;
          text-align: left; 
        }

The site is here

Major_Payne

CSS Errors

HTML Errors

I would correct these before finding a solution to your problem. Sometimes correcting errors will fix the problem.

tony_webb

"HTML Errors

I would correct these before finding a solution to your problem. Sometimes correcting errors will fix the problem."

Thanks for your reply.

CSS3 validation:

It is throwing out my @media query and everything below it. What is below is basically what is above but with elements excluded or resized.

I got the @media from a post about building responsive websites and including the newer mobiles that have higher pixel counts (iphone 5 etc). IT does appear to work though!

If this is wrong I don't know how to correct it.

@media screen and (max-device-width: 599px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (max-device-width : 900px) {

HTML Validation

It is throwing out iframes as obsolete. I understand that but unfortunately facebook doesn't. The iframes are plug in codes from facebook for their like button etc. I presume that it can't be changed. If it can I don't know how.

The other errors are where I am changing the color of a number before a point. I don't know of a way to do this in my css file.

 <p><font color="blue"> 1.</font> Receive this photographic bookmark</p>

noboss

how the javascript code is implimented in php for slideshow

tony_webb

noboss;1282853 wrote:
how the javascript code is implimented in php for slideshow

Thanks. Just found out that I have to make a seperate class span.

Works fine now.