www.webdeveloper.com
Results 1 to 2 of 2

Thread: Not Responding to All Styles

  1. #1
    Join Date
    Oct 2009
    Posts
    41

    Styles Not Responding on One Page - Works on Others

    Hi CSS gurus,

    I have a sidebar that has 2 server side includes in it. The code is the same on several pages, but on this particular one, the styles aren't being displayed correctly.

    Here's the html for inserting the server side includes on each page:

    Code:
    <div class="right">
    <div id="sidebar">
    <!--#include file="blockquote.inc"-->
    <!--#include file="typical-apps.inc"-->
    	  </div>
    	  <!--/sidebar -->
        </div>
    	<!--/right -->
    Here's the contents of blockquote.inc:

    Code:
    <p class="sidebar_blockquote"> . . . blah, blah, blah . . . </p>
    . . . and the css for the blockquote section:

    Code:
    #sidebar {background-image: url('/DEVELOPMENT/images/backgrounds/blockquote.png'); background-repeat: no-repeat; padding-right: 20px}
    #sidebar p.sidebar_blockquote {padding-bottom: 15px; font-size: 13px; font-style: italic; line-height: 35px}
    Here's the contents of typical-apps.inc:

    Code:
    <h3>Typical Applications</h3>
    <ul class="values"><li>App 1</li>
    <li>App 2</li>
    <li>App 3</li>
    <li>App 4</li>
    <li>App 5</li></ul>
    
    <p style="clear: left"> <a href="/DEVELOPMENT/common-applications.shtml">More Applications</a></p>
    Here's the css for the Typical Apps h3 header and the list (there is a specification elsewhere in the stylesheet for ul.values, but I specified this one to be slightly different within #sidebar):
    Code:
    #sidebar h3{margin-top: 20px; margin-bottom: 10px; font-size: 16px; font-weight: normal; text-align: center; color: #202020; padding: 5px; border-bottom: 1px solid #c0c0c0}
    #sidebar ul.values {margin-left: 15px; margin-bottom: 15px}

    EDIT: It might be easier for me to just show you the sidebar html after the includes are written to the page rather than all of those separate include files:

    Code:
    <div class="right">
    <div id="sidebar">
    <p class="sidebar_blockquote unify"> . . . blah, blah, blah, blah, blah . . . </p>
          <h3>Typical Applications</h3>
    <ul class="values"><li>App 1</li>
    <li>App 2</li>
    <li>App 3</li>
    <li>App 4</li>
    <li>App 5</li></ul>
    
    <p style="clear: left"> <a href="/DEVELOPMENT/common-applications.shtml">More Applications</a></p>
    	  </div>
    	  <!--/sidebar -->
        </div>
    	<!--/right -->
    The background image isn't showing on this particular page, but displays fine on others. The h3 settings aren't displaying right. The list's margin settings aren't correct. Basically, it's displaying the blockquote text, but not the background image. It's displaying the h3, but not in the right size, and the list isn't responding to the specification I created for inside the sidebar id.

    Any ideas?

    Thanks in advance for your help.

    ginger
    Last edited by ginger23; 08-23-2012 at 10:26 AM.

  2. #2
    Join Date
    Oct 2009
    Posts
    41
    Never mind. I fixed it.

    That particular page was referencing a different style sheet.

    Problem solved.

    Thanks,
    ginger

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