Support » Themes and Templates » Can any CSS experts figure this out?

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    Forum Moderator

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

    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!

    Michael

    (@alchymyth)

    Forum Moderator

    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.

    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?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can any CSS experts figure this out?’ is closed to new replies.