CSS - Compatability in IE and Firefox

Reply

Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

CSS - Compatability in IE and Firefox

 
0
  #1
Mar 19th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Mar 2008
Posts: 73
Reputation: lio04 is an unknown quantity at this point 
Solved Threads: 4
lio04's Avatar
lio04 lio04 is offline Offline
Junior Poster in Training

Re: CSS - Compatability in IE and Firefox

 
0
  #2
Mar 20th, 2008
Why do you setting easy attributes for a href with JavaScript ?

Use the hover in CSS. For example:
HTML and CSS Syntax (Toggle Plain Text)
  1. a.mouseover:hover {
  2. text-decoration: underline;
  3. }

In HTML:
HTML and CSS Syntax (Toggle Plain Text)
  1. <a class="mouseover" href="index.php">Index</a>
Last edited by lio04; Mar 20th, 2008 at 7:44 pm.
Jabber: lio(at)jabbim(dot)sk
Sorry for my English, I am only an autodidact.
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: CSS - Compatability in IE and Firefox

 
0
  #3
Mar 21st, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Mar 2008
Posts: 73
Reputation: lio04 is an unknown quantity at this point 
Solved Threads: 4
lio04's Avatar
lio04 lio04 is offline Offline
Junior Poster in Training

Re: CSS - Compatability in IE and Firefox

 
0
  #4
Mar 21st, 2008
Can you post here your CSS code ? Maybe is problem there.
Jabber: lio(at)jabbim(dot)sk
Sorry for my English, I am only an autodidact.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS - Compatability in IE and Firefox

 
0
  #5
Mar 22nd, 2008
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 4,179
Reputation: peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of 
Solved Threads: 481
Moderator
Featured Poster
peter_budo's Avatar
peter_budo peter_budo is offline Offline
Code tags enforcer

Re: CSS - Compatability in IE and Firefox

 
0
  #6
Mar 22nd, 2008
Originally Posted by MidiMagic View Post
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
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)

LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS - Compatability in IE and Firefox

 
0
  #7
Mar 25th, 2008
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.
Last edited by MidiMagic; Mar 25th, 2008 at 5:02 am.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 608
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 8
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: CSS - Compatability in IE and Firefox

 
0
  #8
Mar 25th, 2008
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
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: CSS - Compatability in IE and Firefox

 
1
  #9
Mar 25th, 2008
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?
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC