Firefox displays site differently than IE
I have a website that currently displays perfectly under IE, but once you view the same site on Firefox, the entire top portion of the template is stretched out.
I have meddled with the coding for a few hours and can get the site to look descent within Firefox, but then its screwed up within IE. I can't find a happy medium here. Could someone look at the code within my site and tell me if there is a way to have this template viewable under IE and Firefox?
My website: http://movierentalclubguide.com
Thank you
kb posted this at 03:24 — 8th June 2006.
He has: 1,380 posts
Joined: Feb 2002
There will almost always be differences between the two...sometimes major. I don't know about you, but the alignment of all the different menus and borders and things is totally out of whack (Firefox).
My first suggestion would be to try converting all tables (if possible) to "divs". That might give you a little more control (and sense) of what's going on here.
frofi posted this at 13:38 — 8th June 2006.
They have: 37 posts
Joined: Jun 2006
I agree. I've had the same problem some time ago. CSS will allow you to position everything where you want. I guess you are using Dreamwaver. Start rebuilding the site using styles and every time you change something, check it in FF (preview). Than try IE and make adjustments if necessary. With absolute positioning it should look the same in both browsers. Also don't forget to close every tag properly as this usually causes most differences. Sometimes a simple /> at he end of tag will do but sometimes you have to close it properly, like for example . When using line-break , use instead. Just try the html validation within dreamwaver and that should tell you where you made a mistake with closing tags (at least most of them). You have too many nesting errors and unclosed tags on your page.
Raise And Share a Million.com - Rewarding to those who like to help others
foottuns posted this at 14:10 — 8th June 2006.
They have: 78 posts
Joined: May 2006
every time when you design a web page the first thing which you shoud do is to check the website with all the browsers. and in this way you can fit the website how you want it and see the errors as well.
wstinnett posted this at 23:30 — 8th June 2006.
They have: 16 posts
Joined: May 2006
Hello,
Everytime I build a site I include this snippet of code in the section. This is JavaScript that detects which browser is opening up and then writes the link to the appropriate style sheet. All I have to do is build a style sheet for the appropriate browser. The code below has worked quite well for me.
/*Browser detection script that writes a browser specific style sheet to the page*/
if(navigator.appName == "Netscape")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleNS.css" />');
}
if(navigator.appName == "Microsoft Internet Explorer")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleEI.css" />');
} if(navigator.appName == "Opera")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleOpera.css" />');
}
/*End browser detection script*/
//-->
I hope this helps.
Thanks,
wstinnett
kazimmerman posted this at 00:04 — 9th June 2006.
He has: 698 posts
Joined: Jul 2005
That's all good and well, but here's a few things to consider:
Kurtis
adjroth posted this at 05:33 — 11th June 2006.
He has: 33 posts
Joined: Jun 2006
rewrite to provide a default stylesheet for other browsers if no server side scripting is available. makes use of "elseif" and "else"
/*Browser detection script that writes a browser specific style sheet to the page*/if(navigator.appName == "Netscape")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleNS.css" />');
}
elseif(navigator.appName == "Microsoft Internet Explorer")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleEI.css" />');
}
elseif(navigator.appName == "Opera")
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleOpera.css" />');
}
else
{
document.write('<'+'link rel="stylesheet" type="text/css" href="../layout/StyleDefault.css" />');
}
/*End browser detection script*/
//-->
adjroth posted this at 23:59 — 8th June 2006.
He has: 33 posts
Joined: Jun 2006
one problem i saw isnt really related to your problem, but you have an extra tag within your , also you dont have an ending tag for the form.
as for the site not displaying correctly, the only thing i can say is to recreate the top table making use of rowspan on your tables instead of using tables within your tables. There are also alot of unnecessary and tags.
frofi posted this at 02:03 — 9th June 2006.
They have: 37 posts
Joined: Jun 2006
Exactly! What happens if they have disabled JavaScript? That is very probably to happen with IE users which means THE majority. Even if you make IE style sheet a default, users will end up dealing with annoying security warnings. This particular web site isn't too complicated and it should be quite easy to make it work with CSS. I personally design for IE and FF. If my design doesn't work with other browsers, it's their problem. They are a minority.
Raise And Share a Million.com - Rewarding to those who like to help others
Renegade posted this at 22:31 — 9th June 2006.
He has: 3,022 posts
Joined: Oct 2002
Do you have access to server side programming such as PHP? If so, you can use a sniffing script there instead of relying on Javascript. That way, it doesn't matter if Javascript is turned off or not.
wstinnett posted this at 20:34 — 21st June 2006.
They have: 16 posts
Joined: May 2006
adjroth,
A default stylesheet and using elseif, etc. never crossed my mind. Thanks for extending the snippet I posted.
wstinnett
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.