SOLVED - 'clear:both' issue in VM1.1RC3

[posternb]

Hey y'all... I'm having an issue which seems to have been prevalent in VM1.0.x, wherein in-line style tags attached to some <br> tags, specifically "clear:both", causes VM content to be pushed way down the page below all modules (only in FF), and that replacing these tags with 'clear:left' or 'clear:none' or removing the style tag altogether seems to be helping people. 

I am using VM1.1RC3 with Joomla1.5 and am experiencing the same issue (also only in FF).  I used FireBug to find the problem, and searched the boards to find some common solutions.  I thought I was doing pretty well at finding the hack.  Then I went looking for the files to fix (starting with shop.browse.php).  This is where my problem comes in to play.

It looks like these files no longer contain these inline styles... cool, huh?  In fact, I have searched through my entire set of directories in both the regular and admin Components and Modules, and cannot even find the string 'clear' or 'both' in a single file!  I'd have enjoyed this change, but when my page is built, there it is, right in the HTML, a bunch of <BR> tags with the 'clear:both' style right next to them.

(what's really odd is how many inline styles show up in the generated html, yet I cannot find where/how they are created!)

So, in the new version of VM, where in the heck is this being created?   I'd love to hack this and make my pages look right, but can't hack code I can't find.

I'm working on a localhost right now, so cannot give an example link.  Needless to say, if you do a search for the phrase 'clear:both' and scan visually down the results for the word 'GAP', you'll find a bunch of similar posts with similar issues in the older/currently-stable version.

Thanks in advance for any help!

Cheers,
Lelando

[posternb]

Why does it always seem like I solve so many of my own problems before anyone else even responds???

For all those who also have the same problem in the future, I finally found the files.  [It appears that my search function (built into Windows XP, I might add) is faulty... so much so that I was looking in a folder of just a handful of files, would search for a common term across multiple files, and it still said 'no files found'.  WTF???]

Anyway... here's where to go:

1) [joomlaRoot] / componants / com_virtuemart / themes / default / theme.css
2) [joomlaRoot] / componants / com_virtuemart / themes / default / browse / includes / browse_notables.tpl.php
3) [joomlaRoot] / componants / com_virtuemart / themes / default / browse / includes / browse_header_category.tpl.php

I only looked for things in the 'browse' folder so far, but I am sure I will have to look for more files containing the inline 'clear:both' as I discover more problem pages.  A lot of the new code appears to use

Code Select Expand

class="clr" instead of the inline styles, which is why you also need to change the theme.css file.  However, my own template's css file also had

Code Select Expand

.clr {clear:both;} in it too.  Lucky for me, it was part of a starter template I'd used, and that class was not being used elsewhere in my code, so I was able to change it as well. 

I changed each instance of 'clear:both' to 'clear:left', and everything is working fine.  I don't use any left-side modules in this particular site.  I'd imagine that if you did, you may have to use 'clear:none', but I also imagine that could cause other issues.  For example, something really small, like the VM page navigation, might be squished in a small space on the right if it doesn't get a 'clear:left' at least.  But these are issues for other days, when I actually encounter them, or for days when the developers might look into this particular problem. 

Cheers for now...

[posternb]

A quick suggestion to the developers / bug-squashers... I am sure this is probably not a high-priority suggestion, but since I spent a bulk of my day messing with it, and I've read similar issues from other people from the last version of VM, I think it is at least worth mentioning...

As I mentioned, it looks like a lot of the old hard-coded inline appearances of:

Code Select Expand

<br style="clear:both" /> have been replaced with

Code Select Expand

<br class="clr" />, and that's really a great start. 

My first suggestion... get the rest of the hard-coded style tags and replace them with class tags. 

Second-suggestion... since a lot of standard templates include the "clr" class, perhaps a more specific class name, like "vm_clr" is more in order?

Again, I am sure this isn't a top-priority kind of thing, but since it is part of the theme/template instead of the main component, I think it should be an easier change to implement than other upgrades.

Cheers!
Lelando

[akerman]

I agree that some efforts need to be done about this. Maybe it's not 'top priority' like you say, but still I think it's quite important.

Mainly due to the fact that all templates I've tested with VM all have this issue, one way or another. Even 'rhus_milkyway' as seen on another place in this forum.

So is this a problem with the templates? Or is the testing of VM not thorough enorgh when it comes to layout (CSS).
Well, to my experience the template designers are very tentative and really tries to accomodate all possible scenarios with the extensions.

And VM is not alone in this mix. Mosets Tree is another nice example of a 'clear:both' bonanza.

I've tried to assist others in this forum with this exact problem, mainly due to the reason that I've had professional programmers going thru
my site in order to fix this. 

Therefore I would like add my vote to try to address this in future releases.     


Regards
Akerman / InfoClip.se

[posternb]

Well, the VM Team has taken the first great steps to making this eventually a non-issue by separating a bunch of the inline styling and moving that all to the template system.  The fact that most of the problems are now in Template files makes it easier to make changes without worrying as much whether your fixes are gonna be overwritten with the next update.  Using unique class names, especially for common things like clears, will help create further separation, making distinctive customization even easier. 

And I don't necessarily think its a problem with either Joomla templates or VM's own templates.  I think its a problem with both trying to use certain CSS rules, and since each template has its own rule for that class/id/etc, sometimes these varying rules conflict. This further supports the need for unique class names.  The easiest way to do that is to add a suffix or prefix to every class name.  If everything in VM used a prefix of either 'vm_' or 'virtue_' or something, then it would be super easy to ensure that your VM content looked right, without worrying whether you'd have conflicting CSS rules between VM and the Joomla core and your other Extensions.

Its late, I'm tired, and I'm about to start rambling.  I'm not sure whether anything I've written is making any sense anyway.  I'll probably reread it tomorrow and realize how foolish I might be.

g'night....

[akerman]

Not at all.. Good ramblings 

IT people are night creatures who excel during nighttime.


I agree fully. To move the potential issues into the Template helps editing/correction of conflicts.
And yes, unique class names are also the correct way to solve any upcoming conflicts.

The funny thing about this particular issue though (content pane being pushed down by left or right columns), is that it's present everywhere. I mean it's showing up in many of the major templates vs. extensions combinations. It is frequently being discussed in a vast number of forums. And nowhere it seems like anyone feels it's on their 'agenda' to fix. (A lot of finger pointing...)

Well, for VM I hope this soon will fall into the annals of history.
I'm installing 1.1.0 Stable today and looking forward to a minimum of conflicts and issues 
...dough?


Regards
Akerman / InfoClip.se