FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


css in firefox vs. ie

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 




d34db0lts
i just made a big oopsie. i just realized that i did my whole website with firefox in mind. all of my css works fine with firefox but when i pull it up on ie...it looks ghastly. so i'm left to do either of two things: either fix the css so that it looks better or should i just do a script that detects the browser and changes the css according to the browser. has anybody done this? is this even worth doing? any other ideas?

any input regarding this topic would be much appreciative since i have to put this website up soon.
clogfan
There actually are differences between all browsers, not only IE or firefox, but others too. You can find more information about those differences in the W3schools tutorials about css. Here is a direct link to the reference of css2 : http://www.w3schools.com/css/css_reference.asp. You'll find that there are different columns (IE, F, N,...) each representing the version as from which the browser supports (or not) the specific property.

I hope this can help you ! Good luck !
BearClaw
i've noticed in my personal experience in working with CSS and making the code compatable for both firefox and ie that you have to define the hell out of the div's. ie. define the exact height, width, margins, padding, borders and anything else.
Marston
I would suggest just switching style sheets based on the browser.
Code:
<script type="text/javascript">
<!--
var browserName=navigator.appName;
// Browser Specific CSS Output
if (browserName=="Microsoft Internet Explorer")
{
document.write('<link rel="stylesheet" href="msie.css" type="text/css">')
}
else
{
document.write('<link rel="stylesheet" href="mozilla.css" type="text/css">')
}
// -->
</script>
d34db0lts
Marston wrote:
I would suggest just switching style sheets based on the browser.
Code:
<script type="text/javascript">
<!--
var browserName=navigator.appName;
// Browser Specific CSS Output
if (browserName=="Microsoft Internet Explorer")
{
document.write('<link rel="stylesheet" href="msie.css" type="text/css">')
}
else
{
document.write('<link rel="stylesheet" href="mozilla.css" type="text/css">')
}
// -->
</script>
i figure this would be the easiest...after having a very convoluted page with php and hmtl all over the place, it's kinda hard to go back and fix things...maybe i'll do that anyways, just to keep the code clean...but i'm kinda lazy. oh well.
SystemWisdom
Easiest way I know of is to just use some CSS hacks to adjust the display for IE.

It is good that you designed your CSS in a browser that works first, then you can just go and edit your CSS to work for IE now.

Something like this:
Code:

p { color: red; }  /* For most browsers */
* html p { color: green; } /* For IE */


That uses the simple Star-HTML hack, but there are alternatives...

Hope that helps!
Rosanova
Hi There,

Once opon a time was I fasinated about these ie colored scroll effects, but soon when I did realized that this was an ie only and that others wouldn't allow it in there browsers did I waste it.

Soon when the Firefox oppotunity came up did I forget all about ie and opera.

So what you have to do is to decide what you would like to do with your website, and for whom.

Actually is it possible to create an clean crossbrowser website using css and js. And to valiate the css part do I use TopStyle Pro, as it atually is very userfriendly and have even build in link to the w3c css validater. You can here decide if you would like to create an css style that would work in both firefox (netscape), ie and opera, and you can decide if you would use css ver. 1 or 2, or even mobile ver. 1. It actually have many more features, but I can only recommand to visit their site at http://www.bradsoft.com.

I hope that this add would help others and that you did find a solution on your problem and headace.

Cheers! and happy newyear 2006
ulruc
I think that I will use that javasccript code myself when I will reedit my web site soon. I'm tired of looking for css codes that work well in IE and FF and any others browser that I see fit to test with. Too much time lost for everything when you can juste change the code with some scripts.

Thanks for the tips. That will help me a lot to increase the quality of my web site.

I think that I will have a lot of thinking to do about width right now since I used what looked the best for now. My web site will finally rocks!!!!
dkbg
What about people with JavaScript turned off? You shouldn't really be using anything to detect browsers anyway, a more flexible solution would be to use CSS hacks or conditional comments (which are only for IE of course).
Marston
dkbg wrote:
What about people with JavaScript turned off? You shouldn't really be using anything to detect browsers anyway, a more flexible solution would be to use CSS hacks or conditional comments (which are only for IE of course).
Why shouldn't you use anything to detect browsers?
Lenne
I have FF and I.E. but I like more I.E. than FF beacause Fire Fox is that good in holding tables and div but there's one thing good in FF it loads faster than I.E.
Nikkori
It's the same when I built my site using Internet Explorer as my preview browser. I was using marquee tag like this:
Code:
<MARQUEE behavior=alternate direction=down height=40>Jumping text</MARQUEE>


In Internet Explorer, it shows as what would I want to show up; but when I tried the new version of Netscape Navigator--the Mozilla Firefox, the marquee seems to be going up and down with I think approximately 200+ pixel-height. Yeah you're right, there's a big difference between IE anf MF as they are competing each other on the Web...
Texas Al
Marston wrote:
dkbg wrote:
What about people with JavaScript turned off? You shouldn't really be using anything to detect browsers anyway, a more flexible solution would be to use CSS hacks or conditional comments (which are only for IE of course).
Why shouldn't you use anything to detect browsers?


I think they meant to say Javascript. The reasons not to rely on Javascript detection might be...

1. Because it slows the page load (though not by much).

2. Because you have no way of being sure that Javascript is enabled on the browsers your site's visitors are using.

If all you care about is IE and FF, you can write your CSS stylesheet for FF and then us the IE-only conditional comments to override the few necessary directives at the top of the page.

Another non-Javascript way to do this is a server-side PHP script that checks the request string coming in from the browser and includes a different set of stylesheets depending on what type of browser it is. This is probably the most foolproof way to do it, since the user can't disable this except by spoofing their request string (in which case they deserve whatever they get).

As you learn more about IE quirks and bugs, you'll come to realize that there really are only a few directives that are different, and cause most of the problems. Everything else is almost identical.
snowboardalliance
http://www.quirksmode.org/
Make sure you're not in quirks mode for one browser and strict mode for another. This will really screw up your page if they are different.
Related topics
IE 7 to take a cue from Firefox
W00t! Something that finally fixes IE.
Some questions
Internet Explorer 7 (beta 2 preview)
Different View CSS Problem with Firefox, opera, IE , mozilla		Opera & FireFox vs. CSS
HTML help - Firefox and IE?
Browsers battle (FF, IE, OP) and CSS
Firefox vs IE ?
Firefox vs IE		Give Me Linux or Give Me Death!
CSS problem in IE 6
Slight css problem in IE [SOLVED]
Firefox X IE
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.