How FireFox interprets style attributes

[IdlePhaedrus]

Hi There,

Short history: I have a small system, with quite a lot of html stored in a database which is extracted and presented to users.

The html is generally pretty standard as far as I can tell, and IE and Firefox visually render the pages the same most of the time, but the style attributes differently.

With IE, the original style information is displayed when I view the html in a rich text editor such as Free Text Box, FCKEditor or "View Source" , but in FireFox, the style information is it's interpretation thereof. For instance, for a table's td, this original style information is displayed in IE's "View Source":

"border-right: 0.5pt solid; padding-right: 5.4pt; border-top: medium none; padding-left: 5.4pt; padding-bottom: 0cm; border-left: 0.5pt solid; width: 234px; padding-top: 0cm; border-bottom: 0.5pt solid;"

but FireFox changes it to this:

"border-style: none solid solid; border-color: -moz-use-text-color black black; border-width: medium 0.5pt 0.5pt; padding: 0cm 5.4pt; width: 234px;"

I can immediately see that FireFox's interpretation of the style attributes is shorter and more readable, and better. No problem with that.

The problem is, FireFox does not display the original stored style information in the text editors, or in view source, but rather it's interpretation of that style information.

So, if my client or one of their users is using IE, and I am using FireFox, and there is a discrepancy with the display of the original HTML between FF and IE, then I cannot debug the original source style attributes in FF.

Then, if I save my interpreted FireFox style attributes back to the database the client or their users using IE suddenly sees a different representation of the original style attributes, which are now different, and that representation may not necessarily be what the original user intended.

This confuses everybody.

While I can see that FF's approach it better, I would prefer to have everyone working off the same page, and obviously in this case it is not happening because FF is forcing it's own view of the world with regard to the style attributes, and I would prefer it if it didn't, is there any way of asking FireFox, politely, not to modify the style attributes in source view?

Thoughts?

Phaedrus

PS, I have looked around the internet for fixes on this issue, but have come out stumped, so I thought I would ask here.

 

[guest2013-1]

I've never seen Firefox change my styles on my web page to be something different to what I saved it as...

 

[FarligOpptreden]

Regarding your solution reading the HTML out of the database and feeding it to the client, is it perhaps built in ASP.NET 1.0 or 1.14? IIRC, ASP.NET 1.0 and 1.14 used to output different HTML to different client browsers. This was rectified in ASP.NET 2.0 and up. Maybe that's where your problem lies?

 

[IdlePhaedrus]

I've never seen Firefox change my styles on my web page to be something different to what I saved it as...

Hmmm, interesting, the pages are being served by IIS and ASP.Net, I wonder if this might not be a server / framework issue. Will look into it some more. Thanks for your response. It is much appreciated.

 

[FarligOpptreden]

Not only a server / framework issue, but an assembly issue as well. You will have to recompile your solution to a newer framework of .NET. You'll also have to set the web share's properties in IIS to run as ASP.NET 2.0 / 3.0 / 3.5 (depending on what it's compiled as) afterward.

Oh, and next time, quote the correct message when replying...

 

[IdlePhaedrus]

Not only a server / framework issue, but an assembly issue as well. You will have to recompile your solution to a newer framework of .NET. You'll also have to set the web share's properties in IIS to run as ASP.NET 2.0 / 3.0 / 3.5 (depending on what it's compiled as) afterward.

Oh, and next time, quote the correct message when replying...

Quoted the correct message ;-) But thanks for your response also FarligOpptreden it was also very much appreciated.

Further testing reveals that it is not a server issue, but possibly with FreeTextBox and FCKEditor. With both these gadgets the source and published html style attributes are different between IE and FF in "Source View". Perhaps they both have the same bug.

Sorry for the misleading post, really thought it was a browser issue not an editor issue.

If it is the editor I am going to need to replace it with a free one that has decent table editing facilities. Any ideas?

 

[FarligOpptreden]

Visual Studio... You can download Visual Web Designer and Visual C# for free. Both are very good.

 

[IdlePhaedrus]

Visual Studio... You can download Visual Web Designer and Visual C# for free. Both are very good.

Have all of that, this is an included rich text editor on the site itself available to the clients via html and their browser so they can edit html text directly. It wouldn't make any difference if I was using .Net or Php or IIS or Apache.

The problem I am having seems to be with the editors themselves, and they are modifying the style attributes depending on the browser used, which is cr@p.

Need to find a different html editor or find a fix for FreeTextBox or FCKEditor.

 

[guest2013-1]

Visual Studio... You can download Visual Web Designer and Visual C# for free. Both are very good.

Think his solution is a WYSYWIG editor (web based) like a sort of CMS so he and his clients can change stuff on the web page... hence why he's using FCKEditor

Quoted the correct message ;-) But thanks for your response also FarligOpptreden it was also very much appreciated.

Further testing reveals that it is not a server issue, but possibly with FreeTextBox and FCKEditor. With both these gadgets the source and published html style attributes are different between IE and FF in "Source View". Perhaps they both have the same bug.

Sorry for the misleading post, really thought it was a browser issue not an editor issue.

If it is the editor I am going to need to replace it with a free one that has decent table editing facilities. Any ideas?

What does "FreeTextBox" do that FCKEditor doesn't? maybe if I knew what functionality you were after perhaps I can suggest a newer (or better) alternative

 

[IdlePhaedrus]

What does "FreeTextBox" do that FCKEditor doesn't? maybe if I knew what functionality you were after perhaps I can suggest a newer (or better) alternative

[Edit] Yes, this is web based WYSYWIG, sorry if that did not come through clear on the first post [/Edit]

There are cost constraints, so the html text editing solution has to be free or cheap. It also has to have good table editing abilities, because the served pages have a lot of tables.

This is why I have replaced FreeTextBox with FCKEditor because I think their table management stuff is better, by a long shot.

If you have a suggestion as to a better solution, I would really like to know.

If you were doing CMS stuff, what would you use?

 

[guest2013-1]

I'm doing CMS stuff, and have used FCKEditor in the past alot, however, I think TinyMCE is much better and I'm currently using that (and their paid for addons to manage images and files) on my CMS projects.

Using FreeTextBox & FCKEditor together might be causing the problem. However, I do know that these online editors do change the styles for whatever reason. Copying/pasting out of Word for example... anyway, gl

 

[IdlePhaedrus]

Thanks, I will give TinyMCE a whirl, you might be right about the combination of FCK and FTB on the same site especially with regard to text replacement using the same or similar javascript libraries as that appears to be where the issue is occurring.

Will clear out all editors and test them one by one on the site.

One caveat, TinyMCE does not appear to be as proficient at cleaning word pastes as FCK, and unfortunately, that is also a requirement.

What tangled webs we weave ;-)

 

[guest2013-1]

Not sure, TinyMCE has the paste from word function and seemed to be pretty reliable when I worked with it before. Could you post an example?

 

[Raithlin]

I read somewhere that FCKEditor has a new release out (possibly beta) - might that fix your problem?

 

[IdlePhaedrus]

Not sure, TinyMCE has the paste from word function and seemed to be pretty reliable when I worked with it before. Could you post an example?

Here is an example: <edit>Link Removed</edit>

The original html is below the edit box

This is with version 2.6.3 of FCKEditor. There is a newer version available, but their online demo does exactly the same thing:

http://ckeditor.com/demo

 

[IdlePhaedrus]

TinyMCE does it too:
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=62072

and a similar post on FCKEditor:
http://cksource.com/forums/viewtopic.php?f=6&t=14167

Both blame it on Firefox, not the editor.

 

[guest2013-1]

There is no way on God's green earth that anything just gets changed "magically" by Firefox.

Firefox interprets what you put into your code.

So there's something wrong with the editors itself. Not Firefox.

I hate it when programmers who write code blames another piece of software for their ****ty code. You tell the PC what to do.

If you save "xyz" into the editor for your database and it saves as "yyyyyyyyyzzzzzzjajajajajajajajaa" then it's YOUR CODE. Not the browser who just sits there and interprets YOUR CODE into a viewable format.

(not saying YOU, I'm talking about these "developers")

Personally, I've never seen Firefox change any of my styles on the fly. The WYSIWYG editor however, does. Because it strips the MS Word content and replaces it with whatever styles necessary.

So it's up to the programmers of these WYSYWIG's to find common styles to use that interprets the same in both IE and Firefox and LOOKS the same so you can rest assured that when you hit "save" it's not going to save something different because it's running in a different browser.

 

[IdlePhaedrus]

Totally agree. Looks like I am going to have to roll up my sleeves and debug the editor code <sigh>

 

[guest2013-1]

What you might want to try and do is have the editor interpret the code the same way it would in IE regardless of what browser you're using.

 

[IdlePhaedrus]

Yes, I think that would be the quickest approach.