CSS - Compatability in IE and Firefox

[OmniX]

We all know that what effects work for IE will not always work or act the same in Firefox.

Is there anyway to check which do and dont work?

Anyway to get them both to work?

For example.

I noticed a href attributes defined with CSS, mouseover and mousein defined with javascript, etc all have errors in firefox. I hate it because it looks professional in IE but in Firefox looks abit of joke.

Any recommendations? What must the big website companies do?

Thanks, Regards X.

[lio04]

Why do you setting easy attributes for a href with JavaScript ?

Use the hover in CSS. For example:

a.mouseover:hover {
	text-decoration: underline;
	}

In HTML:

<a class="mouseover" href="index.php">Index</a>

[OmniX]

Ya see its so stupid (I dont know why non computer people use firefox as I do not see any beneift to use it).

a href works fine in IE with mouseover and in firefox works fine also BUT when u do the mouse over some strange effects happen like color distortion etc and I cant see why....

various errors like that

my main problem at the moment is:
I can align all my text in the middle using IE through the use of CSS but in firefox does not work and I have to resort using both lame html tags like <center> to fix the firefox errors while IE is using the more professional CSS...

Any Ideas? Thanks

[lio04]

Can you post here your CSS code ? Maybe is problem there. :)

[MidiMagic]

It's because FF and other browsers obey the W3C definitions. IE is the maverick that refuses to obey the standards.

There are some places where IE differs from other browsers:

1. Order of nesting of defined sizes (width and height) and surrounding styles (margin, border, padding). The standard (and FF) puts the surrounding styles OUTSIDE the defined sizes. But IE crams them INSIDE instead.

The trick is to put the defined sizes in different tags than those containing the surrounding styles. Then YOU can control the nesting order by the order you nest the tags.

2. Default styles are different in IE than in other browsers:

- Table contents default to the top of the cell in IE, to the center of the cell in FF.

- IE and FF default to different margins around some tags.

3. IE has some rendering quirks:

- IE does not correctly render ul/ol/li tags inside div tags.

- IE puts both the top and bottom borders below any hr line.

- IE renders each font one pixel wider than other browsers.

[peter_budo]

IE is the maverick that refuses to obey the standards.

Not just refuse to obey standards, its actualy attempted to create new standards for its self. That brough the whole war on browsers few years back and it was nightmare to build sites fully compatible with IE4 and NN at that time. This is also the major reason why today webdesigners have to use browser recognition to apply appropriate css

[MidiMagic]

I never have to check for browser, and my pages work. The tricks are:

1. Validate with the W3C validator.

2. Don't use proprietary extensions to browsers.

3. Don't put defined sizes (width and height) and surrounding styles (margin, border, padding) in the same tag or style. Nest two block-type tags for this.

4. Don't put block tags inside inline tags.

5. Note that some browsers put all of the surrounding styles below p, h#, and hr tags. Put these on div tags surrounding them.

6. Define the positions of objects inside table cells.

7. Don't put div tags inside li tags.

8. Don't put img tags inside just the body tag.

[OmniX]

1. Validate with the W3C validator.

Whats the site for this again?

I ran it through one and it had like 60 errors... lol

I have always wanted to know.

With dreamweaver you start a new document, it always has meta tags, etc.

Anyone explain for what purpose?

Back on to topic.

So there isnt any program that can validate all your code for cross browsing (ie/firefox)?

You just have to follow guide lines?

Thanks, X

[buddylee17]

An easy way to validate is to install the free web developer add-on in Firefox. Once installed, you can simply press Ctrl+Shift+A and the W3C validator will open in a new tab and validate the page that you were on.

With dreamweaver you start a new document, it always has meta tags, etc.
Anyone explain for what purpose?

META tags are HTML Tags that describe the contents of a web page. The primary purpose of Meta tags is to help catalog and categorize the contents of a web page. If your pages do not contain them then they may not get categorized the way you‘d like by the search engines.

So there isnt any program that can validate all your code for cross browsing (ie/firefox)?

Yes, although Dreamweaver can spot things that won't work in different browsers, you just have to follow Midi's advice. Here's a link to answer the question, Why does my site look different in IE than in Firefox?