WordPress.org

Ready to get started?Download WordPress

Forums

Can any CSS experts figure this out? (5 posts)

  1. The Night Fox
    Member
    Posted 2 years ago #

    Ok so if you go to my test site and look at the sidebar you will see that at the bottom of the "Popular Coupons" and "Gaming News" box there is a grey line that covers the last line of the white list.

    Using firebug I realised that this was due to the following code:

    element.style {
        background: none repeat scroll 0 0 transparent;
    }

    All the boxes in the sidebar use the same css, but it seems when you use an unordered list the background appears white. How can I create a new div for the white boxes so that I can ovverride element.style? I know I can just use !important;, but my knowledge of CSS is limited and even implementing that is proving to be too difficult for me.

    I should add that I want to keep the styling of the "Get Connected" and "Get the latest coupons" boxes.

    Any help would be much appreciated!

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    no solution - just observations:

    this is some style injected by javascript; possibly just on the last list item in a list.

    this is what firefox web developer add-on sees for the last list items in each widget:
    <li style="background: none repeat scroll 0% 0% transparent;"><span><...

    this jQuery script is (besides other jQuery scripts) in the head area in the html of the browser:

    var lastchild = $$('div.box div.interior ul > li:last-child');
    	if (null != lastchild) {
    		lastchild.each(function(li) {
    			li.setStyle('background','transparent none');
    		});
    	}
  3. The Night Fox
    Member
    Posted 2 years ago #

    Yeah, I noticed that when I edit <li style="background: none repeat scroll 0% 0% transparent;"> so it just looks like <li style=""> the grey line goes away. However I can only do this in firebug. Can anyone suggest some CSS that I could use to solve this? I'm almost sure if there was a new div that used !important; it would work, but my CSS is not very good and I'm pretty much at a loss about how to solve it!

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    you could try and add this to the styles of your theme:

    .box .interior li { background-color: #fff!important; }

    a better solution would obviously be to locate and delete the jQuery code which is causing the styling.

  5. The Night Fox
    Member
    Posted 2 years ago #

    Thanks, that worked perfectly! I know I should track down the Jquery code, but I don't know the first thing about jQuery! Will it slow load time down much by doing it this way?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.