www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

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

    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;
    HTML Code:
    <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

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

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    CSS Errors

    HTML Errors

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

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    "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.

    Code:
    @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.

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

  4. #4
    Join Date
    Aug 2013
    Posts
    4
    how the javascript code is implimented in php for slideshow

  5. #5
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Quote Originally Posted by noboss View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles