By Boinng on

I've taken the plunge and upgrading my 4.7.7 site to 5.2 but I'm finding a problem that I just can't make any sense of, or find any info on here either - namely font sizing on certain pages is completely breaking down, not just in my own custom theme (originally based on bluemarine) but in ANY theme, including Garland and the other bundled 5.2 examples.

This may only be in IE6 (it seemed fine to me this morning in Firefox) but take a look at my front page at http://www.boinng.com - those funny little grey lines after the first story are content, reduced to some infinitely small pixel size. All the nodes are the same, after the post itself all the comments (and the read more links etc) are completely illegible. As I say, this is not just my theme but in Garland, Minnelli, Pushbutton, and everything else I've tried.

Has anyone seen anything like this? Any clue on where to start? Looking at the source, the problem always seems to start after a <span class=clear /> tag, but I've no real idea what that means if I'm honest...

⋅ Categories: Drupal 5.x

Comments

Boinng’s picture

Boinng commented

sorry, that tag got swallowed - <span class=clear /> seems to be the point at which everything goes wrong on each page, under every theme.

zeta ζ’s picture

zeta ζ commented

It seems that IE6 doesn’t recognise the <span /> tag has ended: Try <span></span>.

You obviously intend there to be no content in this tag, but I think IE6 only allows the XML style of closing a tag for tags that can’t have content eg <br />.

Also, maybe the .css rule, setting the font-size and line-height to 0, is not strictly necessary.

nevets’s picture

nevets commented

First theming changed between 4.7 and 5, you might want to read http://drupal.org/node/64292 which talks about that changes you may need to account for in your theme. Your use of <span class=clear /> is interesting in the that for 4.7 the standard was to use <br class=clear /> (note this has changed for Drupal 5)

You may also want to validate your html, you have a number of problems any one of which maybe causing you problems with IE.

And are you aware you have a number of broken images?

Boinng’s picture

Boinng commented

thanks both, but the thing is I have no idea what that span clear tag does, or how it got there - it's not something I've chosen to use at all. More crucially, it's also appearing in Garland etc with the exact same effect - again, not because I put it there! It's not in my content and it's not something I've added to any theme, so it can only be part of the 5.2 upgrade no?

Just to illustrate, I've put the site into Garland now - this theme is completely untouched by me, and is as it came in the 5.2 package. Where could that span tag be coming from?

Zeta-zoo - what do you mean about the css rule with 0 line height etc - is that something I can change somewhere?

Oh and yes, I do know about the broken images, that appears to be a separate problem with the very lovely img_assist module..

zeta ζ’s picture

zeta ζ commented

I guess it’s in node.tpl.php (or similar), in themes/engines/phptemplate/ or your theme.

Note the . before css – it’s a file extension for, in this case, style.css – part of your theme: Search for font-size: 0 in your theme files (grep -R "font-size: 0" *.css).

HTH :-)

Boinng’s picture

Boinng commented

This is so frustrating! There's nothing like that in my css file; in any case, even if my own theme was no good, that couldn't effect a fresh copy of Garland - could it? I've found another issue here that must be related - http://drupal.org/node/149242 - another user using Garland who's theme is going awry in IE6, and guess what - if you look at their source there's another of these <span class=clear> tags right by the problem area, and it's messing his site up in every theme, not just Garland.

Where are these span=clear tags coming from? Obviously they're fine in Firefox, and quite possibly other browsers, but they really mess up IE6. I've been looking around drupal.org and I've not seen any on here - I wonder if I'd see them if I was using Firefox? I wonder if there's some kind of browser compatibility function that's gotten broken on my site?

nevets’s picture

nevets commented

My quess is some module is producing the span tag. You could try turning off contributed modules one at a time and seeing if the problem goes a way or the editor I have has a search capability and I just search for the text in question.

nevets’s picture

nevets commented

It appears some module is adding it either as part of a nodeapi or filter hook. I would try searching the files that are part of your site for <span class="clear" and see what you find.

Boinng’s picture

Boinng commented

That sounds pretty plausible, thanks, I'll try that report back.

Boinng’s picture

Boinng commented

Well, I've searched through all my local files and found nothing - no mention of the span class="clear" tag. Of course, it's difficult to know if there's anything really wrong with that tag anyway, or if something else is missing/malfunctioning. I've searched through the DB with no results too, emptied the cache, tried disabling all the optional modules in turn, and nothing. So i really am stumped.

Is there anyone out there that can explain what's going on? Should this span tag be appearing, what does it do, and why is IE disliking it so much? How can this be effecting *every* theme?

I'll have to give up on 5.x soon..

zeta ζ’s picture

zeta ζ commented

It’s in template.php line 60, and page.tpl.php line 76, but it is generated as <span class="clear"></span> so I can’t see why IE would object. This is just Garland, so why it affects all themes, I don’t know.

Its purpose is to stop the information below it (read more link etc.) floating onto the previous line: .css property clear: both;.

the .css property font-size: 0; does seem to be in style.css for all themes and line-height: 0; is in Garland. You could try without them as, without anything in the tag, they have no effect.

You’ve fixed the images :-)

Boinng’s picture

Boinng commented

Well at the moment I don't know how or why, but I've discovered the problem's related to the Image Assist module - disabling that (which I stupidly hadn't tried before) has sorted everything out. I'm off to issues page for that module to see if there are any further clues/fixes there...

zeta ζ’s picture

zeta ζ commented

Try applying the following patch with patch img_assist.module img_assist.module.patch

391c391
<   return $text ."<br class=\"clear\" />";
---
>   return $text ."<span class=\"clear\"></span>";
Boinng’s picture

Boinng commented

Thanks, I've made that change - although i was using the dev version (which is the only version compatible with the current release of the image module apparently) and the br class had been changed to that <span class="clear"/> which gave me all that trouble. I've changed it to <span class="clear"></span> which has fixed things for me, but i understand that's not ideal either - i'm just going to write this up on that module's issues page.

pmcvoy’s picture

pmcvoy commented

Thanks for this dialog, I was having the same issue after upgrading ing_assist.

Skrea’s picture

Skrea commented

I've been having exactly the same problem. My site looks fine in FF but parts of it appear messed up in Opera and IE. I changed the code in function theme_img_assist_filter($text) to what was recommended but it still doesnt work. Have I missed something?

EDIT: Sorry ignore my post, it appears to be working fine now...

Boinng’s picture

Boinng commented

I found that I often had to empty the cache_ tables in the db before this type of change had any affect.

For info, IMG_ASSIST has now been patched properly to resolve this, so if you don't want to mess with the code yourself just update to the latest release.