| | |
CSS - Compatability in IE and Firefox
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
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.
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.
Why do you setting easy attributes for a href with JavaScript ?
Use the hover in CSS. For example:
In HTML:
Use the hover in CSS. For example:
HTML and CSS Syntax (Toggle Plain Text)
a.mouseover:hover { text-decoration: underline; }
In HTML:
HTML and CSS Syntax (Toggle Plain Text)
<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.
Sorry for my English, I am only an autodidact.
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
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
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.
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
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
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group
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.
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
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
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
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.
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.
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?
•
•
•
•
With dreamweaver you start a new document, it always has meta tags, etc.
Anyone explain for what purpose?
•
•
•
•
So there isnt any program that can validate all your code for cross browsing (ie/firefox)?
![]() |
Other Threads in the HTML and CSS Forum
- Previous Thread: horizontal menus
- Next Thread: CSS layout problem in IE
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






