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>");
But I think it needs to be done on the client, this is my current javascript to load css based on a userscreen size.
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.
Please Mark Post that helped you as answer, also include a summary of what solved the problem as it helps others in similar situations
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...
HtmlLink oStyleSheet = new HtmlLink();
oStyleSheet.Attributes.Add("rel","stylesheet");
oStyleSheet.Attributes.Add("type", "text/css");
oStyleSheet.Attributes.Add("href", ResolveClientUrl("../default.css"));
if (blnIsIE)
oStyleSheet.Attributes["href"] = ResolveClientUrl("../ie.css");
else if (blnMoz)
oStyleSheet.Attributes["href"] = ResolveClientUrl("../moz.css");
.
.
.
this.Page.Header.Controls.Add(oStyleSheet);
I have decided that I need to use javascript as I use javascript to tell the size of the clients browser....I have different sizes css for each....I have created javascripts files for each browser.....my question is how do I use the above code and use it
to load a jaavscript file? as I have looked at all HTML classes but nothing looks close to javascript
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,
var browser = navigator.appName.toLowerCase();
var stylesheet = document.getElementById("pagestyle");
if(browser.indexOf("microsoft") != -1)
stylesheet.href="ie.css";
else if(browser.indexOf("mozilla") != -1)
stylesheet.href="moz.css";
</script>
Note: if it doesnt pick up a browser that you didnt check for, default.css will show.Javacsript seems like what you are comfortable with, so i would stick to that. Note: People who have javascript disabled will use default.css
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();
oStyle.Attiributes.Add("rel","stylesheet");
oStyle.Attributes.Add("type","text/css");
if(Request.Browser.Browser.ToLower().IndexOf("microsoft") != -1)
{
oStyle.Attributes.Add("href", ResolveClientUrl("~/css/ie.css"));
}
else if ...
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.
spnz
Member
103 Points
467 Posts
I need different css for different browsers...how do I load the css based on browser?
Jul 25, 2007 08:46 AM|LINK
Hi there,
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>");
But I think it needs to be done on the client, this is my current javascript to load css based on a userscreen size.
if (document.documentElement.clientWidth<=1200)
{
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" />');
}
etc etc....
CAn anyone help me out with some ideas for loading browsers?
Thanks for your time!
naturehermit
Star
14610 Points
3046 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
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.
triggered
Contributor
3356 Points
908 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
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...
HtmlLink oStyleSheet = new HtmlLink();oStyleSheet.Attributes.Add("rel","stylesheet");
oStyleSheet.Attributes.Add("type", "text/css");
oStyleSheet.Attributes.Add("href", ResolveClientUrl("../default.css"));
if (blnIsIE)
oStyleSheet.Attributes["href"] = ResolveClientUrl("../ie.css");
else if (blnMoz)
oStyleSheet.Attributes["href"] = ResolveClientUrl("../moz.css");
.
.
.
this.Page.Header.Controls.Add(oStyleSheet);
spnz
Member
103 Points
467 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
Jul 27, 2007 08:13 AM|LINK
Ok thanks so far for your help I am nearly there.
I have decided that I need to use javascript as I use javascript to tell the size of the clients browser....I have different sizes css for each....I have created javascripts files for each browser.....my question is how do I use the above code and use it to load a jaavscript file? as I have looked at all HTML classes but nothing looks close to javascript
Thanks again
triggered
Contributor
3356 Points
908 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
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.
spnz
Member
103 Points
467 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
Jul 27, 2007 09:18 PM|LINK
Hi Triggered,
Sorry to sound stupid but can you provide me with an example on how I can do this.
Thanks
Shane
triggered
Contributor
3356 Points
908 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
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" />
<script type="text/javascript" language="javascript" >
var browser = navigator.appName.toLowerCase();
var stylesheet = document.getElementById("pagestyle");
if(browser.indexOf("microsoft") != -1)
stylesheet.href="ie.css";
else if(browser.indexOf("mozilla") != -1)
stylesheet.href="moz.css";
</script>
Note: if it doesnt pick up a browser that you didnt check for, default.css will show.Javacsript seems like what you are comfortable with, so i would stick to that. Note: People who have javascript disabled will use default.css
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(); oStyle.Attiributes.Add("rel","stylesheet"); oStyle.Attributes.Add("type","text/css"); if(Request.Browser.Browser.ToLower().IndexOf("microsoft") != -1) { oStyle.Attributes.Add("href", ResolveClientUrl("~/css/ie.css")); } else if ...Glad to help!
JoshStodola
Star
13736 Points
3177 Posts
Re: I need different css for different browsers...how do I load the css based on browser?
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.