Back To Website Design Forum

Mozilla to IE

  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 10, 2004
  • Posts: 421
  • Loc: Rochester or Albany, NY
  • Status: Offline

Post October 10th, 2004, 3:10 pm

Designing a site.
Ran into a problem.
The dimensions are suppose to be pretty exact, and IE treats a lot of my style differently. Its never been a problem before because im used to using tables and not having to care about exact positions.

I've Made the site how It is suppose to be for FireFox:
http://mikeshell.afraid.org/athena/

And then went for the IE version.
http://mikeshell.afraid.org/athena/IE/

I must be missing something. I changed my widths and heights adding in the borders and padding. But it is not correct on a few things, it is still very similiar but not exactly right.
Im wondering where I went wrong. I could always try messing around with the numbers untill it looks right but I want a more exact method for future references.

Also, I know how to apply different CSS files using a js browser sniffer but I know that it can be done without one. I remember something to the effect of tricking IE , it was on RTM's CSS site, but that doesn't seem to be up anymore.

Any help is greatly appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 10th, 2004, 3:10 pm

  • Abelius
  • Proficient
  • Proficient
  • User avatar
  • Joined: Sep 17, 2004
  • Posts: 260
  • Loc: Miami Beach, FL, USA
  • Status: Offline

Post October 10th, 2004, 6:44 pm

Don't know much about the sniffer thingy, but I don't see a problem in using CSS (with its "px" and "pt" for each and every detail) when needing exact placing for things on the site...

Never had that type of problem... :)
Cordially,
Abel K - Miami Beach, FL, USA
http://www.worldkit.com
  • heliosstudios
  • Born
  • Born
  • No Avatar
  • Joined: Sep 14, 2004
  • Posts: 3
  • Loc: Ohio
  • Status: Offline

Post October 10th, 2004, 7:20 pm

Yeah, it seems IE and FF are two totally different beasts. Not that that is a bad thing, cause it's not, but standards would be nice! That's why XHTML is so important.

Unfortunately I don't have an answer to Mike's question, other than "try something else." Have you tried "position: absolute" or relative? You could try the Style Master trial, it has a built-in live IE preview. :)

I do have a related issue with FF/IE though. Similar transparent .PNGs for CSS opacity in FF,

Code: [ Select ]
background-image: url(transparent.png);

but in IE this appears as a solid color. Apparently to use image opacity in IE you must define it like this in the style sheet:

Code: [ Select ]
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='transparent.png');

The two will not work concurently. The O.P said he had heard of a sniffer to determine the browser and use the correct style sheet. Could anyone elaborate on this?

Thanks in advance,
Mark
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jun 10, 2004
  • Posts: 421
  • Loc: Rochester or Albany, NY
  • Status: Offline

Post October 10th, 2004, 8:09 pm

I would not use position absolute because I need the div aligned in center.

Now I know that IE defines padding and border as part of the width and height of the DIV. While other browsers add on border and padding to the Div. So I believed what I did would produce an identical page....
Can someone help me?

heliosstudios wrote:
The O.P said he had heard of a sniffer to determine the browser and use the correct style sheet. Could anyone elaborate on this?


Code: [ Select ]
<script type="text/javascript">
version=parseInt(navigator.appVersion);
if (navigator.appVersion.indexOf('5.')>-1){version=5}; browser='OTHER';
if (navigator.appName=='Netscape'){browser='NS'+version;}
if (navigator.appName=='Microsoft Internet Explorer'){browser='MSIE'+version;}
if (navigator.appVersion.indexOf('MSIE 3')>0) {browser='MSIE3';}
if (browser=='NS3') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='NS4') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='NS5') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE3') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE4') {window.location='http://www.yourdomain.com/somepage.html'}
if (browser=='MSIE5') {window.location='http://www.yourdomain.com/somepage.html'}
</script>

I'm in the giving mood. This script will redirect based on browser version.
  1. <script type="text/javascript">
  2. version=parseInt(navigator.appVersion);
  3. if (navigator.appVersion.indexOf('5.')>-1){version=5}; browser='OTHER';
  4. if (navigator.appName=='Netscape'){browser='NS'+version;}
  5. if (navigator.appName=='Microsoft Internet Explorer'){browser='MSIE'+version;}
  6. if (navigator.appVersion.indexOf('MSIE 3')>0) {browser='MSIE3';}
  7. if (browser=='NS3') {window.location='http://www.yourdomain.com/somepage.html'}
  8. if (browser=='NS4') {window.location='http://www.yourdomain.com/somepage.html'}
  9. if (browser=='NS5') {window.location='http://www.yourdomain.com/somepage.html'}
  10. if (browser=='MSIE3') {window.location='http://www.yourdomain.com/somepage.html'}
  11. if (browser=='MSIE4') {window.location='http://www.yourdomain.com/somepage.html'}
  12. if (browser=='MSIE5') {window.location='http://www.yourdomain.com/somepage.html'}
  13. </script>
  15. I'm in the giving mood. This script will redirect based on browser version.


copied from a post somewhere else, try google for more info....
if you want seperate css files do what I've done, make the then statements load a different css file.

Code: [ Select ]
document.write('<link rel="stylesheet" href="styleie.css" type="text/css" />');


I do not wish to end up using js though. And I remember RTM's site having a different suggestion where you put IE into a state of confusion :p .

Any help appreciated.
  • heliosstudios
  • Born
  • Born
  • No Avatar
  • Joined: Sep 14, 2004
  • Posts: 3
  • Loc: Ohio
  • Status: Offline

Post October 11th, 2004, 1:37 pm

If it's any help, I was having a margin issue between FF and IE and found out it wasn't the component I thought it was, it was something to do with the positioning of footer CSS... leave no stone unturned...

I've long since decided that I'm not even going to bother making code that is friendly to all browsers. A person could go insane ironing out the billion or so differences between them all. So I'm just sticking with FireFox and IE6. This code works like a charm to use a different CSS file for IE vs. FF (Mozilla):

Code: [ Select ]
<javascript>
<!--
if (navigator.appName=='Netscape') {document.write('<link rel="stylesheet" href="styleNS.css" type="text/css" />');}
if (navigator.appName=='Microsoft Internet Explorer') {document.write('<link rel="stylesheet" href="styleIE.css" type="text/css" />');}
// -->
</script>
  1. <javascript>
  2. <!--
  3. if (navigator.appName=='Netscape') {document.write('<link rel="stylesheet" href="styleNS.css" type="text/css" />');}
  4. if (navigator.appName=='Microsoft Internet Explorer') {document.write('<link rel="stylesheet" href="styleIE.css" type="text/css" />');}
  5. // -->
  6. </script>

Just stick this in the <HEAD> and make the two files. Yes it leaves a bunch of gaps, but it is quick and effective. You no longer have to make a separate page just for IE compatibility. :)

-Mark

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 61 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.