Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Jul 27, 2007 09:29 PM by JoshStodola
Jul 25, 2007 08:46 AM|LINK
I have spent the last couple of months working on my website and just in the process of getting it ready to go live :)
My problem is my pages look different much different on different browsers....so what I was thinking to do is create a css sheet for each of the different browsers and have some code load the css based on the browser....
So how do I do it?
So far I know how to find the browser from the server side
Response.Write("<B>User Agent ::</B> " + Request.UserAgent + "<BR>");
Response.Write("<B>Browser ::</B> " + Request.Browser.Browser + "<BR>");
Response.Write("<B>Version ::</B> " + Request.Browser.Version + "<BR>");
Response.Write("<B>Major::</B> " + Request.Browser.MajorVersion + "<BR>");
Response.Write("<B>Minor::</B> " + Request.Browser.MinorVersion + "<BR>");
document.write('<link href="../../Formatting/CSS/Width1.css" rel="stylesheet" type="text/css" />');
document.write('<link href="../../Formatting/CSS/Menu1.css" rel="stylesheet" type="text/css" />');
document.write('<link href="../../Formatting/CSS/Footer1.css" rel="stylesheet" type="text/css" />');
else if (document.documentElement.clientWidth>1200&&document.documentElement.clientWidth<=1600)
document.write('<link href="../../Formatting/CSS/Width2.css" rel="stylesheet" type="text/css" />');
document.write('<link href="../../Formatting/CSS/Menu2.css" rel="stylesheet" type="text/css" />');
document.write('<link href="../../Formatting/CSS/Footer2.css" rel="stylesheet" type="text/css" />');
CAn anyone help me out with some ideas for loading browsers?
Thanks for your time!
Jul 25, 2007 02:03 PM|LINK
Well remember you cant target all the browser, but try the most prolific ones ie. IE and FF. For IE you can use conditional commenting something like
iflteIE6 etc and use standard CSS for firefox. Avoid CSS level 3.
Google conditional css commenting for IE and you can handle it directly for IE.
Also note that use correct doctype. I use html 4.01 as it fits everything.
I sometimes create two css files, one for other browsers including firefox and one for IE and then use conditional commenting.
Jul 25, 2007 03:17 PM|LINK
So i see that you are checking for browser type and version on the Server. Note: you can also check the screen size there as well, Request.Browser.ScreenPixelsHeight. I would somethign like this...
Jul 27, 2007 08:13 AM|LINK
Ok thanks so far for your help I am nearly there.
Jul 27, 2007 02:10 PM|LINK
Well, if your going to resort to client scripting to determine your themes, than you should probably also resort to client scripting for browser detection using navigator.appName.indexOf("Microsoft") != -1,
stuff like that.
Jul 27, 2007 09:18 PM|LINK
Sorry to sound stupid but can you provide me with an example on how I can do this.
Jul 27, 2007 09:27 PM|LINK
Hey, we all get to excuse ourselves if its either a monday or a friday. =)
<link id="pagestyle" type="text/css" rel="stylesheet" href="default.css" />
var browser = navigator.appName.toLowerCase();
var stylesheet = document.getElementById("pagestyle");
if(browser.indexOf("microsoft") != -1)
else if(browser.indexOf("mozilla") != -1)
I recommend, using using Request.Browser with C#to detect the browser and changing the href attribute in the HtmlLink object like below.
HtmlLink oStyle = new HtmlLink();
if(Request.Browser.Browser.ToLower().IndexOf("microsoft") != -1)
else if ...
Glad to help!
Jul 27, 2007 09:29 PM|LINK
Here is a far more valuable piece of advice:
Your site looks like crap in other browsers becuase you have not followed web standards. It looks like what you need is a fluid-width layout using valid XHTML and CSS. Get
Zeldman's book, read your heart out, and apply the knowledge. This will make you a much better web developer, I guarantee it.
What you are trying to do is silly and impossibly feasible.