WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Page not interpreting my CSS of div in the page's text editor

[Resolved] Page not interpreting my CSS of div in the page's text editor

  • 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

Viewing 14 replies - 1 through 14 (of 14 total)
  • 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.

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

    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

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

    OOOPs! Sorry about that. I just unprotected it.

    Now you can see it.

    Bruce

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

    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

    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??!

    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!?

    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

    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;
    	}

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

    Much Thanks,

    Bruce

    Very nice catch, Troy 🙂

    Glad you got that working… Was annoying me so I wanted to figure it out 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] Page not interpreting my CSS of div in the page's text editor’ is closed to new replies.