WordPress.org

1. Bruce
   Member
   Posted 4 months ago #

   The page is reading the CSS changes I have made to the style sheet except for this one div I just put in. I've checked for missing ";" and other things. I just can't find the problem. I have the visual editor turned off. This div, <div id="left-col-wrap">, should float right and be 200px wide, but it's aligned left and more like 500px wide. Here's the CSS

   #left-col-wrap {
   width: 200px;
   float: right;
   border-left: 1px;
   }

   And below is what Firebug displays:

   <div id="main">
   <div id="container" class="one-column">
   <div id="content" role="main">
   <div id="post-8" class="post-8 page type-page status-publish hentry">
   <h1 class="entry-title">Protected: News</h1>
   <div class="entry-content">
   <div id="left-col-wrap">
   Thursday January 19th

   Humanist Hall,

   411 28th St., Oakland

   6:30 – 9:30 pm. (doors open at 6:30, program start at 7)
   </div>
   </div>
   </div>
   <div id="comments">
   </div>
   </div>
   </div>

   Oh this is frustrating! Any help is much appreciated.

   Bruce

2. Jacob Chappell
   Member
   Posted 4 months ago #

   Could you please link us to the page this code is on? I have a feeling a somehow more specific CSS rule is overwriting those settings, but I can't verify that unless I can actually see the full page and its output.

3. Troy Chaplin
   Member
   Posted 4 months ago #

   I see 7 divs being opened, but only 6 being closed here. Also, are you clearing the float anywhere in the CSS?

4. Bruce
   Member
   Posted 4 months ago #

   Yeah! I was wondering about it being over ridden. I have it at the end of the css file.

   The link: News

   The <div id="comments"> is closed, but you can't see it because it's not open on the firebug page.

   Bruce

5. Troy Chaplin
   Member
   Posted 4 months ago #

   The link you provided is password protected so we can't help you solve the issue.

6. Bruce
   Member
   Posted 4 months ago #

   OOOPs! Sorry about that. I just unprotected it.

   Now you can see it.

   Bruce

7. Troy Chaplin
   Member
   Posted 4 months ago #

   At the very bottom of your css file there's an extra } that shouldn't be there (line 1365), try removing that first

8. Bruce
   Member
   Posted 4 months ago #

   How'd that get there! I removed it, but no change. Still floats left and is about 500px wide.

   But thanks for noting that. I thought that might have fixed it too.

   Bruce

9. Jacob Chappell
   Member
   Posted 4 months ago #

   Well it's definately because the style's actually aren't getting applied (for whatever bizarre reason). In firebug, the CSS styles for that div element do not include any of the one's you mentioned. I tried setting them all to !important and even using very specific selectors to see if it was an override issue, but I'm still not sure. I also made them inline using the style="" attribute for the div and that actually did work.

   What's going on here??!

10. Troy Chaplin
    Member
    Posted 4 months ago #

    This is a strange one... I didn't think it was related to the extra }, but I cannot find your style in firebug, which I don't think I've ever had happen before!?

11. Bruce
    Member
    Posted 4 months ago #

    The style for that div, <div id="left-col-wrap">, shows up at the bottom of the firebug CSS page, but another very strange thing is that it has added a "none" to the line: "border-left: 1px;" which is what is in my original CSS file. So in the firebug version it reads: "border-left: 1px none;"

    Bruce

12. Troy Chaplin
    Member
    Posted 4 months ago #

    Ok, got it figured out, at least it worked when I copied all the source code locally... In your style.css file on line 1274 you'll see @media print {

    The extra } that was there was to close that off, but the left-col-wrap was within there as well. If you move the left-col-wrap outside of it, it should work fine.

    So the last few lines of your css should look like (starting on line 1353):

    .home .sticky {
    		border: none;
    	}
    }
    
    /*  Added stuff below this line ______________________________________________*/
    
    #left-col-wrap  {
    	width: 200px;
    	float: right;
    	border-left: 1px;
    	}

13. Bruce
    Member
    Posted 4 months ago #

    Very Good Troy! Thank you so much. I could have wasted another couple hours on it before I figured it out.

    Much Thanks,

    Bruce

14. Jacob Chappell
    Member
    Posted 4 months ago #

    Very nice catch, Troy :)

15. Troy Chaplin
    Member
    Posted 4 months ago #

    Glad you got that working... Was annoying me so I wanted to figure it out :)

Reply

You must log in to post.