FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Firefox vs IE ?





The World is Yours
I am using linux, and while trying to develop my site, I got it looking great in firefox, but IE is showing it all screwy!! The png images are showing differently, and the layout is all screwed up. I had recently installed windows inside of my linux desktop so I could install Macromedia studio 8, and I opened the site in IE and Shocked what happened?? If anyone could help me figure out how to get it to look like it does in firefox that would be great!

The site is here http://www.theworldisyours.frih.net/
brokenadvice
Couple of things that should fix your problem:

1. IE versions before 7 do not support PNG 24 bit alpha (easily) , convert them to 8 bit alpha or GIF.
2. Shorten your paddings to "padding:0px;" (Thats just my OCD)
3. Change your #leftcolumn and #rightcolumn's to absolute widths, not percents. (185px and 575px)
4. Move your Footer out of the wrapper (in the HTML) and give it a width of 780px.
5. Try to get rid of the 1% margins, and just go with 1 or 0px.

That should fix it, Reply if you want the working css.
Azmo
brokenadvice wrote:


4. Move your Footer out of the wrapper (in the HTML) and give it a width of 780px.



That shouldn't be necissary tho, you can have it in your "wrapper" just use clear:both; in your css.
The World is Yours
Quote:
just use clear:both; in your css.


I already have "clear: both;" in my css, and its still not showing right at the bottom.

Quote:
IE versions before 7 do not support PNG 24 bit alpha (easily) , convert them to 8 bit alpha or GIF.


I'm not sure how to do that. The images are showing, it's just not showing, right. The backgrounds are supposed to be transparent, but they are showing as fuzzy white!!
brokenadvice
I'm (and probably you are too) too lazy to figure out cross browser differences in floating, so just move the footer out of the wrapper.

PNG's don't work right in IE, so you have to use a GIF, which is somewhat of a problem because you are changing the hover color. You probably want the buttons anti-aliased (not jaggy). Go into your image program, flatten the image, and bucket fill the darker of the two blues into what was previously the transparent region. Then with the magic wand tool (with the threshold set to 0) and click on the new blue region. Delete it (Ctrl-K in the GIMP). Save you new image as something.GIF.
The World is Yours
Ok, I got lost as hell running through the gimp with those instructions Embarassed , and yes my gif ended up "jaggy" Confused .

BUT.....I found this site http://homepage.ntlworld.com/bobosola/pnghowto.htm and it gives a javascript fix for it, i'm in the middle of checking to see how well it works. In the mean time I am definetly gonna try that footer out of the wrapper. Razz ! It's not that I'm too lazy to try cross-browser compatibility, it's that I think I.E. is junk, but, there are alot of users that don't know the difference in browsers, so they shouldn't have to suffer. I would like to say "screw I.E. my code is fine in FF so whatever" (and if I couldn't find an easy fix I would have) but again that's not fair to the surfer that doesn't even know that there are other browsers besides I.E. Cool

EDIT: Ok, the javascript fixed the png problem Smile . I took the footer out of the #wrapper and that helped the layout, but now I have the strangest glich in I.E......It repeats whatever the last few characters in #wrapper at the end Confused . For example, when I had the footer in the #wrapper, I.E. repeats "Who Gives a Shit" under the footer. When I took the footer out, I.E. repeats "t page." (the t is cut from "contact" and the t is the link!!) from the #rightcolumn to under the #leftcolumn Shocked ! I am baffled as to why it is doing this!! Damn Microsoft products Razz
garionw
The World is Yours wrote:
BUT.....I found this site http://homepage.ntlworld.com/bobosola/pnghowto.htm and it gives a javascript fix for it


It does work, I use it myself - but it seems to break the vertical alignments of images using CSS (If you have any). But so far its the best I've seen
Donutey
The World is Yours wrote:
I am using linux, and while trying to develop my site, I got it looking great in firefox, but IE is showing it all screwy!! The png images are showing differently, and the layout is all screwed up. I had recently installed windows inside of my linux desktop so I could install Macromedia studio 8, and I opened the site in IE and Shocked what happened?? If anyone could help me figure out how to get it to look like it does in firefox that would be great!

The site is here http://www.theworldisyours.frih.net/


IE6 is the devil in web design, safari/firefox etc. are all pretty consistent in how they render html compared to IE6 (and to some extent IE7). When I've designed sites sometimes it's more than half my time working on non-hacked fixes for IE6 problems. I'll be happy when it's gone.
Azmo
just google for "png fix" and you'll find some interesting stuff about it that should solve the IE problem.

Anyways, do as you like, but having the footer inside of the wrapper works perfeclty fine.. asuming that your code is correct and there isn't any mistakes like a missed end tag or missed floating or something similar.
The World is Yours
Quote:
EDIT: Ok, the javascript fixed the png problem Smile . I took the footer out of the #wrapper and that helped the layout, but now I have the strangest glich in I.E......It repeats whatever the last few characters in #wrapper at the end Confused . For example, when I had the footer in the #wrapper, I.E. repeats "Who Gives a Shit" under the footer. When I took the footer out, I.E. repeats "t page." (the t is cut from "contact" and the t is the link!!) from the #rightcolumn to under the #leftcolumn Shocked ! I am baffled as to why it is doing this!! Damn Microsoft products Razz


Does anyone know why this is happening????
vln004
your problem, as pointed out by a previous poster is that ie 6 and under doesn't support alpha channels in pngs natively. However, there is a fix to this that i employed a long time ago. It just took some googling. I don't have time to find it right now, but if you can't find it i'll be happy to take a look. I think it is some fancy javascript.
tribe
Firefox dominates IE on Microsoft that is for sure. I also recommend you guys download GOM Player. Someone I know sent me the link to this and I'm telling you, its the best media player out there, AND ITS FREE.

Its WMP-REAL-WINAMP-QUICKTIME all in one!
The World is Yours
HMMM.... Is anyone even reading, my questions or posts? I'm still getting png fixes after i have stated that I already fixed the problem. Now it's a game to see if anyone can guess what my last question was!!!!
brokenadvice
Don't sweat it.

Most likley people who are using your website will NOT be using IE.

If you wanted you could do this:


Code:
<!--[if IE]>

<style type="text/css">
* {display:none;}
</style>

<![endif]-->

<comment>Get a <a href="www.getfirefox.com/">real browser </a></comment>



Evil, I know (but really does not fix your problem)
©Wolfie
The World is Yours wrote:
I am using linux, and while trying to develop my site, I got it looking great in firefox, but IE is showing it all screwy!! The png images are showing differently, and the layout is all screwed up. I had recently installed windows inside of my linux desktop so I could install Macromedia studio 8, and I opened the site in IE and Shocked what happened?? If anyone could help me figure out how to get it to look like it does in firefox that would be great!

The site is here http://www.theworldisyours.frih.net/


Hi There,

I saw your site, but I have some comments. Please use for your a:hover a color that is lighter. I can't read it when the link is in the a:hover situaties.
Do something about that please.

However, I think that I can use your site information, it's quite usefull!
I hope that you are going to expand it and place a lot of nice tips on it!

Wink

Regards, WOLFie.
coreymanshack
The World is Yours wrote:
Quote:
just use clear:both; in your css.


I already have "clear: both;" in my css, and its still not showing right at the bottom.

Quote:
IE versions before 7 do not support PNG 24 bit alpha (easily) , convert them to 8 bit alpha or GIF.


I'm not sure how to do that. The images are showing, it's just not showing, right. The backgrounds are supposed to be transparent, but they are showing as fuzzy white!!


I'm an expierienced ccs user, and I do not intend to hijack this thread. But as a side note I was wondering about the clear attributes. What exactly do they do? I've never had to use them I don't guess.
The World is Yours
The 'clear' attributes are used to position layouts. If you had two left columns they would show next to each other. so if you used 'clear: left' on the second column, then they would sit on top of each other. As for my footer i have 'clear: both;' as to clear the left and right columns.

I hope this helps "clear" things up for you. As for hijacking the thread, don't worry about it, most replies to this thread only read the title or the first post anyway so the thread stopped being helpful after that!!!
coreymanshack
The World is Yours wrote:
The 'clear' attributes are used to position layouts. If you had two left columns they would show next to each other. so if you used 'clear: left' on the second column, then they would sit on top of each other. As for my footer i have 'clear: both;' as to clear the left and right columns.

I hope this helps "clear" things up for you. As for hijacking the thread, don't worry about it, most replies to this thread only read the title or the first post anyway so the thread stopped being helpful after that!!!


Haha! Ok, thank you very much I'll probably beable to use this attribute in my css now!
Reubz
I think IE! Firefox has wayyyy to many plug ins.
Dalv87
Reubz wrote:
I think IE! Firefox has wayyyy to many plug ins.

Then... don't download the plugins? Firefox works just fine without them, better than IE, and is standards compliant.

Have you tried overflow:auto for the wrapper?
The World is Yours
coreymanshack wrote:
The World is Yours wrote:
The 'clear' attributes are used to position layouts. If you had two left columns they would show next to each other. so if you used 'clear: left' on the second column, then they would sit on top of each other. As for my footer i have 'clear: both;' as to clear the left and right columns.

I hope this helps "clear" things up for you. As for hijacking the thread, don't worry about it, most replies to this thread only read the title or the first post anyway so the thread stopped being helpful after that!!!


Haha! Ok, thank you very much I'll probably beable to use this attribute in my css now!


Cool man I'm glad! If you have any questions about it feel free to pm me, I am definetely no expert but I am getting good at the code I know Wink .
gerpg
If your'e using a WYSIWYG then crossbrower compatability is not going to work.

PNG images are not cross browser compatible, i dare you to look at it through netscape 4 or earlier.

Use gif images or compressed Jpeg images, png is only ever any good for Black and white across browsers.

The layout can probably be sorted using a Css sheet to set table width's etc and border's.

Hope this helps.

Louis.
Related topics
*OFFICIAL* Which Browser do you use?
IE 7 to take a cue from Firefox
porke una web se ve en firefox y IE no?
[soft]Firefox más inseguro que IE
Beginner's Question
css in firefox vs. ie
Internet Explorer 7 (beta 2 preview)
Different View CSS Problem with Firefox, opera, IE , mozilla
HTML help - Firefox and IE?
Firefox vs IE
Give Me Linux or Give Me Death!
Firefox using IE render Engine
Firefox X IE
10 Reasons Why Firefox and Opera Are Better Than Internet Ex
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.