Hi,

back again! I need your help, I've been trying to fix this for a few days but no luck.

I only have this problem in Chrome, running ATA 364 and WP 313.

I have a new widget area in the header and it covers the main content in a way that links don't work (but I can still see the text). As I said it's only a problem in Chrome.

So say here: http://50.22.130.188/~westauck/?page_id=71 the info email isn't clickable.

The widget contains the images and doesn't need to be any longer than say 50px. While I managed to change the height of the widget itself, no luck with the .textwidget which seems to be causing the problem.

I tried all sorts of variations of the following but didn't work:

html body.home div#wrapper div#container table#layout tbody tr td#header div#page_header.bfa_widget_area div#text-17.widget div.textwidget

Interestingly just the last part (div#text-17.widget div.textwidget) did work on other widgets so I'm really lost here.

Any help would be appreciated!
Many thanks,
Ildi

You have a z-index of 100 for that image. Set it to 1 instead and see what happens.

Thanks for looking into it Larry, but it didn't change anything.

It needs to have a z-index so that the photos are on the top of both the header and the main content. I still think the issue is that I don't seem to be able to style just this one widget and I don't see why. Otherwise it's just pulling the size of the content (ie. the image which has a height of 240px). So I can change the height of all the .textwidget and that solves the problem but obviously it will ruin all the other widgets which need to have height: auto.

Hm. I just don't see why styling doesn't work for this one widget?

To style just this widget use #text-17 .textwidget as the selector.

That's what I thought and something along these lines has always worked before, but not here.

I have this in the CSS:
#text-17 .textwidget {height: 50px !important;}

(previously also tried: div#text-17.widget div.textwidget with no effect)

and it's just completely ignored (on firebug I can see how the css pulled is just the generic .textwidget style).

Is there something wrong with my code that I'm missing here?

You have an image that is pushing the widget to the size it is. If you want to make the image smaller use #text-17 .textwidget img as the selector. Or maybe I'm misunderstanding.

No, it's more likely that I'm not understanding it! Are you saying that it's not possible to have the widget sized anything else other than it's content? With positioning the image is not really inside the widget anyway so I thought I could just make the widget smaller (keep the image the same size) and so it wouldn't cover the text in the main content.
It might not be possible afterall... but if I change the height of .textwidget, that works. So why can't it work for this specific widget (which happens to contain an image).

Now I understand. That is what I do at times. In this case your text widget does show as only 50px high but your image is what is crowding the menu items. It looks to be working OK now though.

No, it still doesn't work in Chrome . I do appreciate you taking time to look into it though!

My problem is not that this specific thing doesn't work but that I'm not able to change things through the added CSS any more (although clearly it worked previously).
I have this added

div#signup {margin-bottom:3px; text-align:center; width: 130px;height: 150px; float:left;border-right: 2px solid #dc9a1f; padding: 5px;}

#visitshop p {margin-bottom:3px; text-align:center; width: 130px;height: 150px; float:left; padding: 5px;}

wanting to style the last widget in the sidebar on only this page (because the site is now live and this is a testing page) making the two paragraphs move next to each other:

http://westaucklandparents.org.nz/entertainment-book


but it doesn't appear in Firebug at all (same way as my previous problem). If I put all this css inline in the widget, it works fine but I'm trying to avoid that because other people will be maintaining this site in the future and I don't want them to potentially delete code in the text widgets.

I just don't understand what's changed?? Could a new plugin do something like this? I have so little understanding of how things work behind the scenes that it could be anything really...

The following worked for me in Firebug. You could also use a two celled table in that text widget.

#visitshop {
    margin-bottom: 3px;
    text-align: center;
    width: 130px;
    height: 150px;
    float: right;
    padding: 5px;
    margin-top: -11px;
}
div#signup {
    margin-bottom: 3px;
    text-align: center;
    width: 130px;
    height: 150px;
    float: left;
    padding: 5px;
}

Sorry, Larry, just to clarify, are you saying that when you're looking at that page, you can see this css in firebug?? (I know I can add it in Firebug, but why does the existing css not appear?) And also that the two paragraphs appear formatted according to the css? Because the css is already added and my problem is that I can't see either the code itself or its effect on the page...

I'm sorry to be difficult, but without understanding what's happening, I can't change anything on the site in ATA because it takes no affect (although, as mentioned before, it did use to).

Thanks!

Yes, I can see the signup and visitshop IDs in Firebug. I don't see any CSS applied to them however but if I add some in Firebug it works so it would seem if you added CSS to ATO>Add HTML/CSS Inserts>CSS Inserts it should work as well.

Well, then you see my problem, because it's already been added in CSS inserts... and yet we can't see it in Firebug (although I noticed too that you can add it in Firebug and it works). So the html is there but the CSS isn't applied. What can possibly cause this?

Could you paste the CSS you have in CSS inserts in a reply?

Do you have all the 3.6.4 bug fixes applied. This could have something to do with your issue. Also do you have CSS Compression on? Do you have CSS set to external or inline?

If you add ?bfa_debug=1 to the end of your URL and then look at the page source you will see the CSS in question.

I didn't have any bugfix as previously I had no issues. Also this site isn't a blog so no categories or posts so far. I'm guessing I will need 364-02/03. I've just done 364-03 but nothing changed. Should I be doing anything else?

I've been using the css compress and the css is set to external. You could well be onto something here because the css inserts stopped working around the time when I did these changes in the hope that the site loads faster.

Thanks,
ildi

ps. I'm assuming you have seen my CSS inserts and don't need it anymore to be copied here?....

Originally Posted by IldiW

I'm assuming you have seen my CSS inserts and don't need it anymore to be copied here?....

That's correct. Have you tried setting the CSS to internal and not compress to see what happens.

Hm, I tried to set these to inline and no compress but still nothing changed.

The only other thing I put on recently is the W3Cache plugin? Do you think that could be responsible in any way? I'll try to disable it tonight (it's the middle of the day here) in case it breaks the site. We've just started to advertise the launch and people are checking it out so it'd be a bit of a disaster if it stopped working!

Deactivating a caching plugin "SHOULDN'T" cause a problem but I understand your hesitancy. Let us know how it goes.

Well, the cache plugin deactivated made no difference either.
But I'm trying to test things so we have the following random thing happening. I had styling for 'p' in the first part of the css inserts as font-size: 16px which worked fine. Now I changed the same line to font-size: 20px which also worked! That's all still in CSS inserts (so it does work??). BUT then I copied this line to the bottom of the CSS inserts and deleted the first instance and this time it didn't work. Does this mean anything to you (it's truly odd to me but I'm hoping that with your experience it might just help)?

normally when something odd like this happens, it's because there is an error in some other peice of CSS. Here is what I would do.

1) put the code at the top of the CSS
-- does it work (Y) go to (2) - (N) check what you have put in the options
2) Move the line of CSS half way to the bottom of the CSS Inserts
-- does it work (Y) go to (2) - (N) You know know where the issue is

examine the section of CSS, remove it all and put it back in a chunck at a time and you should fine the peice causing the issue.

And because I am a glutton for punishment I decided to look at the CSS and did find two curly braces closing the #mainfeature #home selector. Perhaps removing one of them would fix the CSS issue.

I stopped after I found that issue so their may be others.

Big thanks to both of you for looking into this!
The good news is that it works now! The bad is that I still don't know what is causing it!

Larry, the double curlies did make a difference but then I found another bit that didn't seem to work.
I was trying Juggledad's suggestions and found the following.
Anything 'after' this code (including this code itself) won't work:

/* Style youtube video page */
div#post-365.post-365 div.post-bodycopy div#tv {margin: 50px 0 0 60px
div#post-365.post-365 div.post-headline {padding-left: 20px;}

But misteriously now that I moved this to the bottom, everything 'before' it works as well this piece of CSS. But again if I put anything after this code that won't work.

I'm really relieved because even the initial problem with Chrome is sorted! But mistified at the same time!

And thanks to emoticons we can see very obviously what's wrong! I can't believe I didn't notice it before!

Many thanks again to both of you!