Hello, (I'm reposting this as I put it up two days ago and had trouble getting it to post and have not yet heard a response. My apologies if the repost is not necessary)

Anyway, here's my problem: When I use firebug, I get the following information about the html and css it is applying to produce the page as shown in the screenshots, which I will include down below. I also provide the screen shots of what firebug is telling me. Then I show the screenshot of Dreamweaver reading the file Firebug says it is reading to produce the page. This dreamweaver screenshot sort of contradicts what firebug is telling me. Let me lay it out more clearly.

In the Firebug screenshot, you will see highlighted in the html window the code it is reading for the mainbody of the page (the entire width of the middle block I think it is):

div id="ja-mainbody" style="width:78.5%">

Then below, you see the html code it is reading for the main article portion of the main body:

div id="ja-main" style="width:100%">

The problem is that these two widths are switched. Instead of the main article nesting in 78.5% of the entire mainbody. The mainbody only fills up 78.5% of the website envelope and the mainarticle is assigned 100% of the main body, forcing the right position, which is supposed to get 21.5% of the mainbody down to the bottom of the page.

When you look over at the CSS side of firebug, you will see that it is reading line 66 of the layout.css file (I will show the file path in a moment) to get the #ja-mainbody {parameters. The specific parameter it is reading, however, is only "float: left;" The width element is not there. Instead, firebug tells me it is getting the width from "element.style { width:78.5%;} but does not show the file it is coming from.

When I click on firebug's blue hotlink for layout.css (line 66), the file path is:

www/plugins/system/jat3/jat3/basethemes/default/css/layout.css.

When I look at this file in dreamweaver, what I discover is that the width parameter is correctly stated as 100%, not 78.5% as defined by "element.style" as reported by firebug. It also shows that "ja-main" is correctly sized with "width: 78.5%;" A screenshot of this code as viewed with dreamweaver is attached.

I don't know why browsers are not reading this code, but only the "float: left;" portion of #ja-mainbody. I don't know from where the browsers are getting the opposite "style=width:78.5%" when it should be 100% and visa versa. And I don't know how to reverse the two width percentages. However, when I do reverse these percentages in firefox, the page looks the way it is supposed to. I suspect I created a conflict, as Ed suggested in a different post on a different issue, but to tell the truth, I don't yet really know what that means!

Can anyone help?

Thank you!

Hank

As a start, can anyone tell me what it means when Firebug lists no source for the css it shows you and the css is:

element.style {
width: 78%;
}

??

Thank you for any help you can give. I'm really stuck here as I want to use K2 items as the fundamental article layout, but with this problem cannot get control over the layout in order to do this.

Best,

Hank

Hi Hank,

Sorry for the delay. Your issue/explanation was a bit complicated.
That means that it's not part of the CSS, but rather is hard coded into the template (most likely the index.php of the template).

Check your template's index.php to see if the 100% and 78% is hard-coded into the divs.

Kind regards,
Nick

Hi Hank,

You have ja-mainbody defined in three different places. When you have three definitions, css uses the last one in line. Twice in templates.css and once in layout.css

When "element" shows at the top it is a note from firebug that you have more than one definition, this is the one that is showing on the chosen element.

You have to straighten out your inheritance problem. Here's a good article
coding.smashingmagazine.com/2010/04/07/c...ity-and-inheritance/

Search google for css inheritance and you will find plenty of tutorials and articles.

Ed

Thank you, Ed! In looking at where ja-mainbody is defined, was it ever defined with "width=78.5%"?

I definitely need to understand about how inheritance works, but I've also been struggling with this one issue for a week and if after I get through the inheritance issues, it will be really frustrating if I still haven't found the source of the reversed style=width percentages.

I will search the files you have mentioned to try to locate the reversed numbers and read up on inheritance.

Hank

Nick, the code is not in the index.php file. I note that the index.php file opens php but does ends only with a }, not the standard "; ?>" This is true of the index.php in my template root and my site root. Am I misunderstanding the need for this ending?

Hank

Ed, is there anyway you can clarify for me to make sure you are talking about the template.css and layout.css files accessible through the joomla backend or some are they located somewhere else in a file I have to access through my hosting ftp?

Here are the three references to ja-mainbody I find in my template.css file through the joomla backend:

(1) .ja-contact #ja-mainbody { padding-top: 0; }
(2) #ja-mainbody { padding-top: 20px; }
(3) body.ja-tabs-content #ja-mainbody { padding-top: 0; }

I will try to read up to understand what it means when you have a #ja-mainbody following .ja-contact (1) or body.ja-tabs-content (3) as opposed to when it simply appears by itself, as in the middle example (2).

I did not find mainbody at all when searching the layout.css file accessible through the joomla backend. So it seems I have some digging to do to locate the files you are referencing, and as I said at the top, I'm concerned that, as the three examples listed just above, none of them seem to account for why the browser is assigning a width of 78.5% to the mainbody section and that therefore in the end, I will have learned about inheritance, but still have the problem I've been trying to fix for a week. :) But I will proceed...

Hank

Hi Hank,
Hank wrote: Judging by the file that you mentioned:
www/plugins/system/jat3/jat3/basethemes/default/css/layout.css

looks like you're using a JoomlArt template, since "jat3/jat3" is in the path, which is in reference for JoomlArt's T3 framework.

Since it's a template framework, they split their index.php code into several different files then pull those files into the index.php. You'd have to find the respective file of the framework and edit it. However, since this is a framework rather than a custom template, there's likely a non-hack way to accomplish what you're trying to do. What is the end result you're trying to achieve?
Hank wrote: Yes, the last PHP closing tag is not needed since the end of the file indicates the script is done.

Kind regards,
Nick

Hi Nick,

The end result I'm trying to achieve is for the mainbody block or position to occupy 100% of the -I'm not sure if this is the right word- "wrapper". Right now, it only occupies 78.5% of it. THEN, I want the "main" area, the section of the template in which the main article is to go, to occupy 78.5% of the the mainbody, not 100% of it as it does now. In effect the two widths are reversed. Finally, I want to have the remaining 21.5% of the "wrapper" available for the right and left positions, so that the Featured Post module (as well as others I might want in those positions) which is currently forced down to the bottom of the page (inside the currently too narrow mainbody area, not all the way to the right of the real wrapper) gets placed in the correct place.

I know it sounds complicated. If you look at the first image or the link ( www.voterfarmersmarket.org/en/2012-03-09...fer-random-candidate ) and scroll all the way to the bottom to see the misplaced Feature Post module, I think you'll understand.

Thanks for all your help!!

Hank

Hi Hank,

So basically, you'd like the "FEATURE POST" module to be to the right of the content, correct?

If so, please enable your module positions so that we can take a quick look. Here's how:
www.ostraining.com/blog/joomla/how-to-fi...-joomla-16-template/

Kind regards,
Nick

Ok, this was already enabled. And to help, here is a screen shot showing the module positions with the problem.

Hank

Ok, so digging around, I have found the code attached as a screen shot that may be helpful. I tried to cut and paste it taking out the leading arrow so it would post and it would not so I just decided to take a picture of the code than wrestle with getting a copied section of it posted.

Looking at the screenshot of the code, I don't fully understand what getColumnWidth('cls_w'):'ja-mf' says, but it looks to me like I might find somewhere 'cls_w' defined as 78.5% and similarly from the CONTENT code ('m') defined as 100%. If I can locate where these are defined (if they are defined this way), then I may be able to switch them and get the result I want.

Then again, this conjecture is probably wrong and based on a misunderstanding. If you see that it is and can correct me, that would be helpful. Alternatively, if you can see what I should do from looking at this code, which I found in my public_html/plugins/system/jat3/jat3/base-themes/default/page file, and can tell me, that also would be terrific!

Thank you,

Hank

Hello Hank,

To change the column width, it is found in the default.php file.

Here is documentation that will give you an idea of where and how to change width. This is for the purity template, but I am guessing it will be the same concept for all templates:
www.joomlart.com/forums/showthread.php?3...I-Column-width/page3

How familiar are you with the T-3 framework? With this framework there is a base theme and the active theme. You need to be making changes to the right one. For example:

In this file
www.voterfarmersmarket.org/plugins/syste...ult/css/template.css
You have mainbody defined as 100% and main defined as 78.5% (which I believe is the way you want it?)

/* MAIN COLUMN

---

*/
#ja-mainbody {
float: left;
width: 100%;
}
#ja-current-content, #ja-main {
float: left;
width: 78.5%; }

In this file you he mainbody defined as 100% and ja-main is undefined, so the width of ja-main should be inherited from the default template, and there are no conflicts. You've added a padding specifically for this template, and since it wasn't defined in the default template, this padding will be added and there is no conflict.

www.voterfarmersmarket.org/templates/ja_...lus/css/template.css
#ja-mainbody {
float: left;
width: 100%;
padding-top: 20px; }

<div id="ja-container" class="wrap ja-r1">

Yet on the actual page code, there is an in line style that reverses these values.
www.voterfarmersmarket.org/en/2012-03-09...fer-random-candidate

<div id="ja-mainbody" style="width:78.5%">
<!-- CONTENT -->
<div id="ja-main" style="width:100%">
<div class="inner clearfix">

I'm not sure where it's coming from, it could be as Nick suggested that it is hardcoded into a template. It doesn't necessarily have to be the index template since you are using a complicated framework, and you are using K2, each of which have their own templates. So to me it would seem the first thing to do is track down what is generating the inline style.

Have you asked these questions on the Joomlart forum? The T-3 framework is adding a layer of complication. This is also adding complication to your module positions, since they are positioned on a grid system, which dictates standard sizes for each position on the grid. The widths of the grid columns is set in an xml file and they are exact pixel widths.

index.php no longer holds module positions, layouts do. These layouts are files to manage HTML generating scripts and are built with blocks having distinctive styling, functions and module positions.

I'm not really all that familiar with the T-3 framewor and the Community Plus template so it's hard for me to tell you exactly what you need to do. If you could also ask these questions on the Joomlart forum, you might get a quicker answer.

The whole point behind the framework is to avoid having to make routine adjustments by editing files.

Cheers,
Ed

Hello Ed, Tessa, and Nick,

Thank you all for working so hard to help me. I really appreciate all your expertise and hard work.

I have posted this question here, at joomlarts, k2, joomla!, and getAnswers. So far no one has been able to help. I have also read several articles on inheritance and specificity, which has been very valuable to learn, but which has not enabled me to identify or understand a problem with my css or a solution for my problem. I also looked at the link Tessa provided, but it seems to be a solution based on assigning pixel widths to columns and involves replacing formulas in code that I don't understand. I am not comfortable cutting out code like this I don't understand in favor of a static solution that may or may not work and would not have the real power intended. This may be a good solution, but I just don't know enough to employ it.

Ed writes,This is indeed what I have been trying to do since I first posted a question about this issue more than a week ago. I have also scoured my directory files looking for html code assigning the width and for css defining #ja-main and #ja-mainbody. All to no avail.

When I found #ja-main or #ja-mainbody, I included width parameters if they were missing, there were only one or two or three places where these were located. The only change was that firebug showed that they were being overridden. I also tried using the !important declaration on these widths, but all this did was mess up pages where I did not rely on k2 items, but used joomla articles instead. What happened was that the #ja-mainbody now was assigned a narrower width of 57% which messed up the pages using joomla articles. The #ja-main remained at 100%. So now every page on the site looked bad. So I reset the layout.css file so there was no !important declaration and I am back to the same old problem.

One thing that bothers me is that the widths for #ja-main and #ja-mainbody are reversed. It would be one thing if they were just wrong and messing up the page, but what can be the reason that they are reversed? I do not think this is a reversal I caused. I am pretty sure I didn't go anywhere near these css sections until I became aware of the problem. And if I did cause it, it would be there in the code somewhere not in "element.style" as Firebug says.

Anyway, I am extremely frustrated. Many sources have touted k2, and I myself have found it has many important features joomla articles do not. I do not want to have to choose between Joomla's limitations and K2's layout bug. There are so many things on my site I want to work on too, problems or tinkering, but this is such a fundamental aspect of my site, the way articles layout, it makes no sense for me to work on these other things until I get the article layout straightened out. This is another hugely discouraging aspect of this problem. In any event, I am going away for a week and will not be able to do much on the site during this interval, which is probably a good thing. So that's where things stand. I don't know what I'm going to do.

Ok, well, forget all my wining above. I still have my problem, but I have figured out that I was misunderstanding the issue. When I use firebug to highlight different div elements on a page using a k2 item versus a page using a joomla article, I think what I see is that for some reason, #ja-right is treated differently when a k2 item is used versus when a joomla article is used. When a k2 item is used, #ja-right falls within #ja-mainbody along with #ja-main. However, when a joomla article is used, #ja-right is not within #ja-mainbody, but is it's own area. I attach two screen shots of firebug showing the different handling. The links to the two pages are: voterfarmersmarket.org/en/2012-03-09-19-...fer-random-candidate and voterfarmersmarket.org/en/media-menu/the-farmers-market-model in case my screenshots don't show enough of firebug's info as you'd like.

So, (1) my belief that #ja-right was being forced down because the width parameter is completely wrong, as was my interpretation of what #ja-main {width: 100%} means. This does not mean 100% of the width of the website, but 100% of #ja-mainbody (I think). #ja-right is showing up where it is when a k2 module is used, not because there is no room for it in mainbody, but because it is located in mainbody and is not supposed to be. Anyway, I probably got that wrong too.

The point is, (2) when I return to this problem, I will focus on trying to figure out what to do about getting the "div id=ja-right" class="column sidebar" style="width:21.5%" outside of ja-mainbody, on an equal footing in ja-container with ja-mainbody when a k2 item is used.

If this new hypothesis makes sense and anyone has any insight about which file might contain the code causing k2 or joomla to set ja-right inside the ja-mainbody when a k2 item is the main content, that would be great.

Hi Hank,

You said:
If you go into firebug, where you were just at, copy the class you are looking for, like ja-right, click on the CSS tab, and paste it in the search bar, then click "next".

You will then see the name of the CSS file the class is located in, which is to the right of "Source Edit".

To view exactly where it is located, click on the file name and it will give you the exact path to find it.

Let me know if you have any other questions.

Hi Tessa,

Thanks for your help!! I don't think the issue is css in this case. I think it is the different placement of the div tag within the template page structure depending on whether the main article is a joomla created article or a k2 created item. Diving into this after a week off, I think I identified somewhere the k2 file where the div tag was leading to php I didn't understand. If I can find that file again and then find the matching file for joomla articles, maybe I will see the different placement so that's what I'm going to try first unless someone sees what I am saying and can guide me more directly to my solution.

Best,

Hank

Hi Hank,

How are things going? Were you able to get it figured out? Looks like you may have :)

I'm not seeing the following issue any more:Hank wrote:
Kind regards,
Nick

Sadly, NO! I posted a question in the JoomlArts forum that more clearly states the problem, but they have been unresponsive. I've also posted the problem in K2's forum, Joomla's forum, and offered to pay JustAnswer to give me a solution, but they ended up refunding my money when they couldn't find an expert. Based on the analysis I will paste below, I think the problem really is with the JoomlArts template (of course I'm probably wrong), but I can't find a way to get through to them. I think my next step is to pay JoomlArts for support and see if they can fix it. If you can help, I'd be eternally greatful!

Hank

____________________

Template displaying modules differently for k2 items and joomla articles

Hello,

My website, which employs JoomlArt's JA_Community_Plus template displays the module position indicated by the ja-right div differently depending on whether a joomla generated "article" is used or a K2 generated "item" is used for the same page template. My understanding is that a k2 "item" is supposed to display the same as, and be the equivalent of, a joomla "article."

Here are the links to the two pages: www.voterfarmersmarket.org/en...ndom-candidate and www.voterfarmersmarket.org/en...s-market-model .

I am attaching four screenshots. The first shows the page template IMPROPERLY displaying the ja-right div module position inside of the ja-mainbody div when a K2 generated "item" is used as the main content in the ja-main div, as seen in Chrome. (I have verified the same discrepancy displays in Internet Explorer and Firefox.) The second shows the page template displaying PROPERLY outside the ja-mainbody div when a Joomla! generated article is used. The third and fourth show firefox displaying html code for the page displaying the K2 item and the different html code for the page displaying the joomla article.

I have scoured my site directories looking for two php files that place the ja-right div differently according to this k2 "item"/Joomla! "article" distinction, but have only found a single php file that shows this div structure. It is consistent with the proper display with the ja-right div outside the ja-mainbody div. This file is located in: public_html/plugins/system/jat3/jat3/base-themes/default/page/default.php . Here is an abbreviated copy of the code showing the div structure from that file:


<!-- MAIN CONTAINER -->
<div id="ja-container" class="wrap <?php echo $this->getColumnWidth('cls_w')?$this->getColumnWidth('cls_w'):'ja-mf'; ?>">
<?php $this->genBlockBegin ($this->getBlocksXML ('middle')) ?>
<div id="ja-mainbody" style="width:<?php echo $this->getColumnWidth('mw') ?>%">
<!-- CONTENT -->
<div id="ja-main" style="width:<?php echo $this->getColumnWidth('m') ?>%">




...

</div>

...

<!-- RIGHT COLUMN-->
<div id="ja-right" class="column sidebar" style="width:<?php echo $r ?>%">

<?php
//left-mass-top
if($this->hasBlock('right-mass-top')) :
$block = &$this->getBlockXML ('right-mass-top');
?>
<div id="ja-right-mass-top" class="ja-mass ja-mass-top clearfix">
<?php $this->showBlock ($block); ?>
</div>
<?php endif; ?>

I know my abbreviation of the file prevents you from validating what I am saying, but I decided it was better than posting the long version. I hope what is placed here helps anyone looking at the file find the area I am trying to understand and find a solution for.

Anyway, I really, really need help with this one. I don't know what to do...

Thank you for any attention you can give to this problem!

Hank

THANK YOU NICK for following up! Even if you can't help, I appreciate that the unresolved nature of this post has not escaped you!

Hank

Hello Hank,

As much as I'd like to jump in and help, this issue seems like a Joomlart template bug with K2 articles and it would be important to contact them right away to fix this issue. Although I know you mentioned you have contacted them, you can also submit bug reports.

www.joomlart.com/forums/showthread.php?3...13008c35a10533f585cf