Defacto theme style.css

[Don Chambers]

Carl - did you try deleting the plugin from your theme tester site to check the result?

[Don Chambers]

I've been poking around with my uneducated eyes......

I have only found a couple of things, and I doubt they are related to the problem, but thought I would mention them anyway. I am having a sizing problem... I've mentioned it before, but in brief, I have a background image in the leftsidebar that is 150px, but I need to change the leftsidebar width to 151 it to display correctly. This works for me everywhere but when the comment form is displayed for an entry. I clicked on my first sticky entry, then reviewed the resulting source in both IE and FF. Here are the differences:

IE (following last calendar entry):

LastRow"> </td>
</tr>
</table>
</div>
</div>


FF:
LastRow"> </td>
</tr>
</table></div> (in addition to tags appearing next to each other, I see a stray ASCII character between them which looks like a small square which does not show up when I copy and paste. Maybe a tab/indent?)
</div>



IE: (There is an extra line feed/CR/BR,in the IE version in the "subscribe" section:

Comment" /> <input type="submit" name="serendipity[preview]" value="Preview" /></td>
</tr>
</table>
</form>
</div>

</div>

</div>

FF:
Comment" /> <input type="submit" name="serendipity[preview]" value="Preview" /></td>
</tr>
</table>
</form>
</div>
</div>

</div>


Again - I doubt any of this is affecting our current investigation of png files and the width issue - just thought I would point it out.

I'm really looking forward to Garvin's input, but with the time zones, he is probably sleeping right now!

Meanwhile, I would like to change some things on my site, but that would only complicate this investigation, so I will leave things alone. I have to get this thing live by week's end though, so hopefully, we will arrive at some conclusions prior to that.

[Don Chambers]

I give up for now.... it is late here in Chicago. Garvin and Judebert are going to have a great time with this stuff when they finally trip across all the activity in this thread tonight!!!

To make their lives easier, here again is the address to my s9y site:

http://www.chicagoloopcruise.com/serendipity

Warning: the s9y page is not accessible from my base site's navigation (deliberately - still in development).

Thanks to everyone for your input on this matter! Much appreciated, and more importantly, I hope it helps others in the future.

[garvinhicking]

I'm sorry, this is too much text for me to dig into right now. Can you summarize what problems are left open, in a short and precise way?

Carl, the blank.gif issue is intentional. For PNG images to work, the javascript behaviour for PNG transparency replaces every PNG image with a 'blank.gif' file and then uses CSS to overlay a background image with a PNG that has transparency.

I know that the JS behaves weirdly if the <img> tags are missing width/height attributes.

Regards,
Garvin

[Don Chambers]

Garvin - there are 2 issues being discussed here. They may, or may not, be related. The first relates to the useage of transparent pngs possibly causing distortion in internet explorer. The second is my inability to get precise table/cell sizing in any browser. For simplicity, lets stick to the png issue.

Carl noted that when he viewed my s9y page with Internet Explorer, which uses transparent pngs for category icons, the page was distorted. Here is what he was seeing. The s9y banner icon, as well as some of my category icons, are badly distorted. I was not experieicing any distortion problem. Here is my screen shot of the same page - no distortion.

Carl observed the same distortion behavior with IE on his theme tester site, which also uses category icons created from transparent pngs. Carl also mentioned he is not blocking javascript, and views other javascript on my base site just fine - an excellent example being the use of a countdown timer in the upper right corner of my page banner here.

My page was originally using pngs as background images as well. I switched those to GIFs and/or JPGS, and it did alter the distortion.

I then removed the browser compatibility plugin. Once I did, Carl no longer had any distortion problems. We both observed one obvious result by removing the plugin - my category icons were no longer fully transparent - they now have solid backgrounds.

Despite my desire to move forward, I have left everything exactly as it was so you can see it for yourself here.

[garvinhicking]

Okay. Without the browsercompatibility plugin, IE is not able to display transparent PNG images.

When the plugin is enabled, IE can show transparent PNG images, but they all need a width/height assignment for them to work properly. Did you check in the HTML code if all images that show a PNG had that set?

Regards,
Garvin

[Don Chambers]

I happened to save the HTML output of a page viewed by IE before I removed the plugin. Here is the s9y banner:

Code: Select all

<div class="serendipitySideBarContent"><div class="serendipityPlug">
    <a title="Powered by Serendipity" href="http://www.s9y.org/"><img src="/serendipity/templates/default/img/s9y_banner_small.png" alt="Serendipity PHP Weblog" style="border: 0px" /></a>
</div>

Here is one of my category icons:

Code: Select all

<span class="serendipity_entryIcon">
                                                <a href="http://www.chicagoloopcruise.com/serendipity/index.php?/categories/2-General"><img class="serendipity_entryIcon" title="General: General News" alt="General" src="http://www.chicagoloopcruise.com/serendipity/category_buttons/seren-general-button.png" /></a>
                                        </span>

I am not placing these images directly into the page. The banner is being displayed by the "powered by" plugin, and the icon images are inserted by having associated an entry category with an icon.

[Don Chambers]

Addition to above: It would also appear that the emoticon images are likewise not using height or width:

Code: Select all

<div id="serendipity_emoticonchooser" style=""><a href="javascript:use_emoticon_comment(':\'(')" title=":'("><img src="/serendipity/templates/default/img/emoticons/cry.png" style="border: 0px" /></a> 

[garvinhicking]

You could try this: Re-Install the browsercompatibility plugin. Save the output of your serendipity page as "test.html". Then go and edit this file to add width/height information into the places that make problems, and then test it with IE again.

If that works, I can try to patch the two plugins that emit the HTML without width/height information...

Best regards,
Garvin

[garvinhicking]

A second idea: Edit the plugins/serendipity_event_browsercompatibility/pngbehavior.htc file.

Search for this code:

Code: Select all

		    element.runtimeStyle.width  = width;
		    element.runtimeStyle.height = height;

replace it with:

Code: Select all

		if (width > 0) {
		    element.runtimeStyle.width  = width;
	    }
	    if (height > 0) {
		    element.runtimeStyle.height = height;
	    }

Maybe this makes a difference...but generally speaking, all this IE-PNG stuff really annoys me.

Regards,
Garvin

[Don Chambers]

Garvin - it will be difficult for me to come to any conclusion on the result. I was not personally having any problem viewing the page from IE. Carl was the one who noticed it, and I think one other person observed the problem as well. However, I will happily try your suggestions, and when one of those 2 happens to catch up on this thread, they can report back with their observations.

[carl_galloway]

Guys, sorry I'm not all over this thread. I guess the IE-png workaround isn't foolproof - question is why does it work on some windows boxes and not on others.

Let me know if Garvin's suggestions have been implemented anywhere and I'll post some more screenshots so you can fine tune this.

Carl

[carl_galloway]

Don, these time zones are killing us aren't they? If it wasn't against the licensing agreement I'd almost be inclined to Ghost my harddrive and send it to you so you could see how my IE is doing things without having to wait till I come online.

Regarding your PM, I see no error message. However, something that you've done in the last few hours has now shifted your footer when viewed in my version of IE. What I mean is that the footer image in your theme is shifted to the right by about 1 or 2 pixels, but only in IE. It wasn't doing this yesterday.

[Don Chambers]

Well, things just get stranger by the minute. I had some issues reinstalling the broswer compatibility plugin, but I have that resolved..

So, with the plugin operational, I viewed my main page using MS IE. I also saved the page as an htm file. Here are some interesting observations:

When viewing with IE, and selecting View>Source, then locating the code for the s9y logo, this is what I see:

Code: Select all

<a title="Powered by Serendipity" href="http://www.s9y.org/"><img src="/serendipity/templates/default/img/s9y_banner_small.png" alt="Serendipity PHP Weblog" style="border: 0px" /></a>

Next, from IE, I did a "save as" on the page. When I save this page, and open it with Wordpad, or Notepad, this is what I see:

Code: Select all

<A title="Powered by Serendipity" 
      href="http://www.s9y.org/"><IMG 
      style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" 
      alt="Serendipity PHP Weblog" 
      src="clc-test_files/s9y_banner_small.png"></A> 

Not sure why the border attributes exist when I open a saved file, only the style="border: 0px" when I merely use IE to "view source". I know so little about HTML, CSS, etc, but perhaps one of you experts could explain this.

Now things get interesting....

When I use MS FrontPage to open the SAME saved htm file, this is what I see:

Code: Select all

<A title="Powered by Serendipity" 
      href="http://www.s9y.org/">
        <IMG 
      style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" 
      alt="Serendipity PHP Weblog" 
      src="clc-test_files/s9y_banner_small.png" width="100" height="21"></A>

Width? Height? Where did those come from??? Now again, all I did was open the same file I had saved with IE.

I am no expert, but here is my uneducated theory. Obviously, MS FrontPage seems to think those dimension attributes are necessary, and is inserting them based on the size of the actual image being referenced. Perhaps IE works the same way, at least in some variation of version number, patch installed, etc. Or perhaps, my copy of IE is sharing some setting with MS FrontPage, and these pages all look fine to me. I dunno. This exact behavior also occurs for the category icons - they also pick up dimension attributes in FrontPage, but those attributes do not appear when looking at the code with notepad.

So, if I have presented anything here that someone can understand, and act upon, great. Is the browser compatability plugin supposed to be inserting the dimensions, but isn't doing so??

If not, and we are all right back to the drawing board, I guess I need to make a decision with whether or not to continue using transparent pngs. I suspect I would since they are used throughout s9y.

[garvinhicking]

The change in the HTML format comes because it seems you used IE to save the page as "full html". Then IE changes your HTML based on a view internal things. But it is not the original any more.

FP seems to do the same to the original.

The BC plugin is not meant to insert width/height attributes; it only sets it via javascript on runtime, but does not alter the HTML code in anyway or add attributes; it's done solelely via runtime CSS style assignments.

I know that there are some other PNG fix javascripts out there...it's a hard decision to make whether to use PNGs or don't. I personally rather use them and think that with the due release of IE7 things might get better in this regard...

Best regards,
Garvin