Need help converting CSS functions to the browser Firefox

Message

castman · #1 Post by **castman** » Wed May 06, 2009 8:21 am

I have a website that I still didn't divulge it to English people because I didn't translated it yet from my native language.

By using Internet Explorer, the site works by the whole. But when using Firefox it doesn't display some CSS functions.

I will show it here to people are more familiar.

I also want suggestions about an HTML editor that maybe has CSS functions and uses Firefox engine. I am currently using EasyHTML which is just an HTML editor with an Internet Explorer engine.

This code between the tags Style doesn't work

Code: Select all

td {color=white} th {color=white}

This code to show an Styled font at the top of the page doesn't work

Code: Select all

"open"span style="height:10; color:#007f00; font-weight: Bold; font-family:Arial; 
font-size:32pt; filter:shadow(color=00ff00,direction=320, enabled=1); Blur(Direction=45, add=0, 
Strength=3)""close"Title"open"/style"close"

This code to show a arrow poiting to top flipped vertically and the colors inverted, doesn't work

Code: Select all

"open"span style="filter:invert flipv; height:1""close"
"open"img src="../images/arrow.gif" width=15"close""open"/span"close"

freakazoid · #2 Post by **freakazoid** » Wed May 06, 2009 9:54 am

Hi castman,

The table tags should be:

Code: Select all

td, th {color:white}

The "filter" attribute can only be used by IE.
Firefox doesn't recognize that.

What is "open" and "close"?
I'm guessing that that's an IE thing that your HTML editor put in.
Again, Firefox cannot read that as well.

It would be better to just learn straight out HTML than using a WYSIWYG editor.

Just my two cents.

castman · #3 Post by **castman** » Wed May 06, 2009 10:35 am

Heh, this "open" and "close" is just a representation of < and > that I put to avoid any problems.

I send my page to the CSS w3 validator and reading the tips, I could fix the table issue. But not the styled font and image issue.

It's just as you said.

If there is a quickly work arround to switch between different CSS codes: IE 8 and Firefox 3.0 codes, I would be happy to know. These are the browsers that I mainly want to support at my website.

Thanks anyway. At a later time, I will dedicate myself in learning about this.

And I already know about HTML, by the way, everyone knows HTML but not the validation rules. However there is a quickly way locate and fix any XHTML errors: http://validator.w3.org

The CSS validator that the site points is not even a little intuitive.

M@tty · #4 Post by **M@tty** » Wed May 06, 2009 10:52 am

Even easier way to validate HTML from within Firefox: https://addons.mozilla.org/en-US/firefox/addon/249

freakazoid · #5 Post by **freakazoid** » Wed May 06, 2009 2:35 pm

M@tty's right... use the HTML validator extension in FF.
Way easier to identify where HTML code needs to be fixed.

As for the "open / close" thing, my bad!
I've been staring at the com too long!

If you want to use fancy CSS styles like text-shadow, use the CSS3 element "text-shadow", although most browsers will not be ready for it yet. I think only Safari, Chrome and Opera render text-shadow right now. When FF releases the newest 3.5, it should be compatible as well.

Only IE browsers renders filter shadow and filter blur.

---

You can setup a separate stylesheet for IE browsers using conditional comments:
http://www.quirksmode.org/css/condcom.html

That may help.

Hopefully I didn't confuse you even more!

castman · #6 Post by **castman** » Mon May 11, 2009 9:38 am

Well, I removed the arrow trick and made the filtered arrow appear manually by using a second image edited from GIMP.

I'm not confused, instead of this I have to thank all of you, since we all fight for an equal cause: portable freewares.

And I will wait for when text-shadow comes out as the latest stable version of Firefox to fix the CSS issue number two.

castman · #7 Post by **castman** » Wed May 13, 2009 12:41 pm

Sorry about it, but I couldn't stop until I had played a little more with CSS

.

I did a 3-D Styled Font using 6 Times the same phrase to fix the CSS issue with Firefox (For People who want to learn the trick it is relative positioning, a central phrase, 4 diagonal phrases and an extra phrase to simulate the shadow). However, I don't need it for IE. I need some way to exclude it from parsing on IE browser.

I also need some idea so I could give IE an invalid XHTML page, what this corporative browser needs to display this styled font, doing this by excluding DOCTYPE tag from parsing and a valid page for any other browser.

I think this tricks should solve anyone problems with CSS.