Dynamically changing the style sheet link.

Home ›

ASP.NET Forums » General ASP.NET » Web Forms » Dynamically changing the style sheet link.

Shortcuts

Previous Next

Dynamically changing the style sheet link.

Last post 10-11-2008 11:31 AM by mbanavige. 6 replies.

Sort Posts:

Dynamically changing the style sheet link.

10-11-2008, 10:38 AM

Contact

53 point Member
jahabdank
Member since 07-06-2007, 9:11 PM
Posts 143

Hello Everybody,

everyone knows that the IE, Opera, Firefox etc. render the CSS differently. This is a very big problem, when the website must look exactly as the customer wants. Therefore what I thought I could do is to change the assigned style sheets accordingly to the browser tht is running at the moment.

I can find out what browser I am running by checking this.Request.Browser.Browser (there this is the Page object). So what I want to do now is to have two sets of styleshees with exactly the same files/classes inside - for each of the browser type. Example:

~/Css/IE/Main.css
~/Css/Firefox/Main.css

where each of the files has different definitions of the same classes. What I want to do is to change the link tag in the header of the page accordingly to the current browser :

The only question is how can I change the 'href' property of the 'link' tag inside the 'head', from my code behind. Once that can be done, there rest is very simple.

Thanks in advance,

Jozef A. Habdank

Filed under: css, link, browser, head

Re: Dynamically changing the style sheet link.

10-11-2008, 10:46 AM

Contact

Answer

97,779 point All-Star
mbanavige
Member since 11-06-2003, 8:29 AM
New England, USA
Posts 10,327

make the link tag a runat="server" and give it an ID. then you can access it from code behind

<link id="css1" runat="server" rel="stylesheet" type="text/css" href="Css/IE/Main.css" />

Mike Banavige
~~~~~~~~~~~~
Need a site code sample in a different language? Try converting it with: http://converter.telerik.com/

Re: Dynamically changing the style sheet link.

10-11-2008, 11:03 AM

Contact

586 point Member
ScottR27
Member since 02-14-2008, 3:27 PM
Maryland
Posts 104

Hi Jozef,

One way i have done this in the past:

var cssSelect = document.createElement("link");
cssSelect.setAttribute("rel","stylesheet");
cssSelect.setAttribute("type","text/css");

switch(navagator.appName)
{
	case 'Microsoft Internet Explorer':
		cssSelect.setAttribute("href","LINK_TO_IE_CSS");
		break;
	case 'Netscape':
		cssSelect.setAttribute("href","LINK_TO_FIREFOX_CSS");
		break;
	default:
		alert('Browser Not found');
		break;
}

document.getElementsByTagName("head")[0].appendChild(cssSelect);

This javascript appends your css link tag to the head element of your html page.  Obviously you will need to replace LINK_TO_ data slugs

with references to your css pages.  If you need to add more browser's to the switch, simply google javascript navigator.appName.

Hope this helps,

Scott

Re: Dynamically changing the style sheet link.

10-11-2008, 11:06 AM

Contact

53 point Member
jahabdank
Member since 07-06-2007, 9:11 PM
Posts 143

Wow - thanks a lot. This was very important to me. Smile

Cheers,

Jozef

Re: Dynamically changing the style sheet link.

10-11-2008, 11:20 AM

Contact

53 point Member
jahabdank
Member since 07-06-2007, 9:11 PM
Posts 143

Actually I have one more question regarding that issue. What I usually do in my code is that all my pages override the same e.g. SystemPage class (not the default Page). What I would like to do is to automatically get hold of a collection of all the link's (all the css assigned on the page, no matter how many it is) and in my SystemPage class make a loop that replaces the href property with a correct path. Is it possible? Is there any collection of tags within the head section?

Cheers,

Jozef

Re: Dynamically changing the style sheet link.

10-11-2008, 11:21 AM

Contact

Answer

97,779 point All-Star
mbanavige
Member since 11-06-2003, 8:29 AM
New England, USA
Posts 10,327

you bet.

you can add runat = "server" to any standard html element (div's, table's, tr's, anchors etc...) to gain access to it from code behind.

Mike Banavige
~~~~~~~~~~~~
Need a site code sample in a different language? Try converting it with: http://converter.telerik.com/

Re: Dynamically changing the style sheet link.

10-11-2008, 11:31 AM

Contact

Answer

97,779 point All-Star
mbanavige
Member since 11-06-2003, 8:29 AM
New England, USA
Posts 10,327

jahabdank:

Actually I have one more question regarding that issue. What I usually do in my code is that all my pages override the same e.g. SystemPage class (not the default Page). What I would like to do is to automatically get hold of a collection of all the link's (all the css assigned on the page, no matter how many it is) and in my SystemPage class make a loop that replaces the href property with a correct path. Is it possible? Is there any collection of tags within the head section?

Cheers,

Jozef

Me.Header.Controls will contain all the controls that are in the head section of the page.

Another option is to inject the css link tags rather then trying to alter the href on existing tags. for example:

        Dim lnk As New System.Web.UI.HtmlControls.HtmlLink
        lnk.Href = "Css/IE/Main.css"
        lnk.Attributes.Add("type", "text/css")
        lnk.Attributes.Add("rel", "stylesheet")
        Me.Header.Controls.Add(lnk)

Mike Banavige
~~~~~~~~~~~~
Need a site code sample in a different language? Try converting it with: http://converter.telerik.com/

Page 1 of 1 (7 items)

RSS Available