I think I asked this before but I am not sure I explained fully.

On my Drupal site I have three columns. On the left is a block with three clickable items.
If any links are exactly parallel with one of these links in the center or the right columns, the links do not work in Chrome or Firefox. If I keep clicking on them a blue line appears connecting them to the links on the left.

To see this go to www.nysec.org. The links in question are under Resources on the left. Notice that the Read More link on the far right under Macbeth does not work. Removing the block on the left activates the link on the right.

I am not very confident using firebug and CSS so if you could possibly tell me exactly what I have to do in order to fix this I would greatly appreciate it!

Beth

Hi Beth,

I haven't pinpointed it yet, but it seems to have to do with the width of your menu.

As you can see from the screenshot, it extends across the entire page. Firefox seems to be forgiving of the issue, other browsers treat it differently.

Try validating your css for different browsers using an online validation service.

Ed

I wouldn't have a clue how to do that. Also...I don't see a file with a screenshot?

How would I edit the menu size? Where would I find that?

In the previous thread, I showed you the width for the menu was 1000pixels wide. That's where you would start to fix this. Change that width and see if it fixes anything.

Cheers,
Ed

Change it where? How do I find the right place?

If you are using Firfox and Firebug you can track down the file you need to change. We have a tutorial on using firbug that may help you.
www.ostraining.com/blog/joomla/using-fir...it-joomla-templates/
and
www.ostraining.com/blog/coding/firebug-logos/


You'll need to find this section in the css files. Be sure to save a copy of the original so you can restore it if you make any mistakes.

.menu {
position: relative;
text-align: left;
width: 1000px;
z-index: 10;
}

When you inspect the element in Firebug, it also shows you what css file you need to edit. See the screenshot for the location of the file name. Mousing over it will give you the location.

ed

How low should I to start...500?

How wide is column that it's in? It looks like it's only 250 or 300 pixels wide.

You might get a clue from inspecting an element above this section and see what width that is set at. Make this the same.

Ed

I can't figure out how to access my CSS file. I've done it before but I forget. I'm in my files and I see a style.css in themes/garland but when I download and view I can't find the right section

I have my CSS file but I can't find the line. it says it should be line 227 in style.php but that does not work...it is something else. But in firebug that's what is says, no?

And in firebug if I change it to 300px it seems to do the trick. But like I said...I can't find the line. It's probably something obvious but I'm stuck.

This is what I see in firebug:

.menu { style.php(line 227)
position: relative;
text-align: left;
width: 1000px;
z-index: 5;

But when I go to style.php line 227 I see:

#home-box p {
font-variant: small-caps;

Hi bezu60

Did you fix this by any chance? I'm testing in Chrome and Firefox on Mac and those three resources links work great for me.

You don't understand the problem. Those links always work. It is the links that are parallel to them in the center and on the right that are rendered useless in Chrome. It has been suggested that this is a width problem but when I look in my CSS on the line that firebug tells me I will find this, it is not there.

The link has to be exactly parallel to one of the Resource links to stop working. And it will still work in IE.

Hi
I realise that this is a drupal question - something I know little about!
The links in the left side column have the same css class as the main menu at the top of the page. This is why it has a width of 1000px associated with it. Can you not just enter the links on the left as "normal" text links and remove the class of menu?
Regards

I suppose I could but that is how I had it before and this looks much cleaner

Hi
The css might (and this is a guess) be difficult to find because it could be generated by php to make the top menu the width of your template; if it has a variable width setting.
Maybe the simplest way would be to set up a new menu class in the css style file. something like
.mysidemenu{ }
you could copy and paste the main properties that you want from the existing template.
You could also use
.mysidemenu ul{ } etc to style it exactly how you want.

Regards

Thanks Mark... the only issue is that I don't know how to do that:)But someone is coming to my office Thursday who might be able to help.

Beth

Hi Beth,

You can insert the following CSS within one of your theme's CSS files to correct the issue:
Looks like your CSS file might be located at: /sites/all/themes/nysec-look/style.css

Hope this helps!

Kind regards,
Nick

Firebug says it is style.php

style.css is very short and does not have the parameter I need to edit.

Hi Beth,

The code can be inserted into any CSS file that loads onto the page. Also, you won't be able to edit it since it's not present in any CSS file, so you would have to insert it.

By the way, .php files in Firebug's CSS area usually means that the site has optimization and that the CSS files are being modified (usually by compression). You won't actually be able to find php files on your server with the CSS code in it (It's all in CSS files), but rather it's outputted when the page is requested.

Hope this helps!

Kind regards,
Nick

Wow!!! It worked. Thank-you so much!!!!!!

You're welcome, Beth! We're glad to be of help! :)

Kind regards,
Nick

Oops ...spoke to soon. Please look at www.nysec.org/staffandleadership and try to click on the blog entries on the far right (in Chrome). It looks like it may be another bit I need to add. The blue line across does not go all the way to the left so it may be a center width issue?

Hi Beth,

It still looks like a problem with the memu widths. On both sides of the page.

I attached a screen shot of Chrome with the elements inspected. The gray bar represents the width of the li element on the right. The blue bar shows the width of the li elements on the left. You can see that they overlap.

In addition the width of the menu itself is still 1000 pixels. I'm not good enough at CSS to do this remotely, maybe Nick, Tessa or Mark can give you an exact answer. But i still see the problem as caused by widths specified for your menu items.

To me this doesn't look like a simple one-line fix. There are multiple width issues.
In the second screen shot you can see the width of the menu, which is now 1012 px instead of 1000.

Ed

Looks like for www.nysec.org/sites/all/themes/nysec-look/css/styles.css the following code was inserted:
Rather than:
So, just get rid of the .leaf or insert the whole 2nd set of code underneath.

Kind regards,
Nick

We added the .leaf today to see if we could fix it. It's not what is doing it. But I removed it just the same. Someone thought it might help override whatever is not letting it work.

Currently it works sometimes and not others. I'm told this is because it depends how the page loads and that something else is overriding it half the time. Is there something I can add that will make it take precedence over all other commands?

Beth

Hi Beth,

Add !important after it. Like so:
Kind regards,
Nick

So far so good! Thanks again.

You're welcome, Beth! Glad we could help! :)

Kind regards,
Nick