WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Page not interpreting my CSS of div in the page's text editor (15 posts)

  1. Bruce
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

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

  6. Bruce
    Member
    Posted 2 years ago #

    OOOPs! Sorry about that. I just unprotected it.

    Now you can see it.

    Bruce

  7. Troy Chaplin
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Very nice catch, Troy :)

  15. Troy Chaplin
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic