www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS not applying to SSI

  1. #1
    Join Date
    Sep 2009
    Posts
    20

    Exclamation CSS not applying to SSI

    I believe this may be a CSS issue so I'll post here.

    Background info:
    My company's redesigning our website, html/css (it was a poorly coded flash mess until recently), though there has been little agreement on design/function so I think I'm on my 4th code of the home page. (keep getting sign offs and then right as we're ready to move forward they change their mind)

    Anyways... I'm using serverside includes for the navigation, the way I went about it was designed the page how I want it to look getting the css and html all sorted out, and then taking out the section I want to include.

    I have gotten this to work on a previous design and I thought I did it the same way here... but for some reason the CSS is not applying to the SSI. when I view the source the SSI is including properly with all the classes called... but it's just not applying, and not in any browser (tested in Firefox, IE8, Opera and Chrome)

    The file with the include is a .asp
    Below is my code, renamed some things for company privacy. Left out some of the formatting CSS classes since once the major stuff here works I can fix those.

    CSS
    Code:
    #headerWrap
    {
    	width:1020px;
    	height:135px;
    }
    	#navigationWrap
    	{
    		width:1018px;
    		height:38px;
    		border:1px solid #000000;
    	}
    		#navigation
    		{
    			width:550px;
    			height:28px;
    			padding:5px;
    			line-height:28px;
    		}
    		#youtube
    		{
    			width:234px;
    			height:28px;
    			padding:7px 10px 6px 0px;
    		}
    	
    	#companyIDWrap
    	{
    		width:1020px;
    		height:90px;
    		background-color:#FFFFFF;
    		background-image:url(../images/mainHeader.png);
    		background-repeat:no-repeat;
    		margin-top:5px;
    	}
    		#ourLogo
    		{
    			width:351px;
    			height:60px;
    			margin-top:13px;
    		}
    		#communityLogin
    		{
    			width:222px;
    			height:20px;
    			line-height:20px;
    			margin:6px 19px 0px 0px;
    		}
    		#salesContact
    		{
    			text-align:right;
    			margin:38px -227px 0px 0px;
    		}
    HTML
    Code:
    <div id="navigationWrap" class="mainGradient">
        <div id="navigation" class="whiteFont midSize floatLeft">
            <a href="#" class="whiteFont noUnderline">Home</a> | 
            <a href="#" class="whiteFont noUnderline">Company</a> | 
            <a href="#" class="whiteFont noUnderline">Resources</a> | 
            <a href="#" class="whiteFont noUnderline">Solutions</a> | 
            <a href="#" rel="nofollow" class="whiteFont noUnderline">Partners</a> | 
            <a href="#" rel="nofollow" class="whiteFont noUnderline">Contact Us</a>
        </div>
        <div id="youtube" class="floatRight">
            <a href="#" target="_blank"><img src="images/youTubeLogo.png" alt=""/></a>
        </div>
    </div>
    <div id="companyIDWrap">
        <div id="ourLogo" class="floatLeft">
            <a href="index.asp"><img src="images/ourLogo.png" alt="" width="351" height="60"/></a>
        </div>
        <div id="communityLogin" class="floatRight whiteFont">
            <a href="#" class="whiteFont noUnderline">Community Login</a> | 
            <a href="#" class="whiteFont noUnderline">Support Login</a>
        </div>
        <div id="salesContact" class="floatRight">
            <span class="lrgSize">1.800.123.4567</span><br/>
            <a href="mailto:#" class="blackFont smlSize">sales@company.com</a>
        </div>
    </div>
    SSI
    Code:
            <div id="headerWrap">
            	<!--#include virtual="includes/headerRoot.html" -->       
            </div>

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    I don't see <div id="headerWrap"> there anywhere. Post the generated HTML (View -> Page Source).

  3. #3
    Join Date
    Sep 2009
    Posts
    20
    Code:
    <div id="headerWrap">
            	<div id="ourlogo"><img src="images/ourLogo.png" alt="" width="351" height="60"/></div>
                
    <div id="communitylogin">
        <a href="#" rel="nofollow" class="nav">Community Login</a> | 
        <a href="#" rel="nofollow" class="nav">Support Login</a>
    </div>
    
    <div id="tagline">
    "Get the Job Done.<span class="small2">TM</span>"
    </div>
    
    <div id="salescontact">
        1.800.123.4567<br/>
        <a href="mailto:sales@company.com" rel="nofollow" class="sales">sales@company.com</a>
    </div>
    
    <div id="nav_wrap"><div class="spacer"></div>
        <a href="#" class="nav">Home</a> | 
        <a href="#" class="nav">Company</a> | 
        <a href="#" class="nav">Resources</a> | 
        <a href="#" class="nav">Solutions</a> | 
        <a href="#" rel="nofollow" class="nav">Partners</a> | 
        <a href="#" rel="nofollow" class="nav">Contact Us</a>
    
    </div>       
            </div>
    Hnm... I think I may have found part of the problem...
    I've been running this on a test server, and it seems to be pulling in the wrong include... they're both named the same but one's in: root/includes/file.html and the other's in root/redesign/includes/file.html I don't know why that's causing a problem since the web page is in root/redesign/file.asp

  4. #4
    Join Date
    Sep 2009
    Posts
    20
    Okay that fixed it, just a case of me not understanding includes.

    had to make the include be related to the root folder, not the folder the pages were in...

    Code:
            <div id="headerWrap">
            	<!--#include virtual="redesign/includes/headerRoot.html" -->       
            </div>

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    Including file from the Apache docs.

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