Thread: Master Pages Conversion Question

2 – Remove any stylesheet references. They will be added automatically by asp.net to match the theme used

What if we have conditional style sheets?

Code:

<link rel="stylesheet" href="skins/Skin_2/style.css" type="text/css">
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="skins/Skin_2/style-ie.css" title="Default" media="all" />
	<![endif]-->

I have the same issue re conditional comments. The main issue with the themes support that asp.net 2+ has is that css stylesheets cascade- which means if you have multiple stylesheets you have to name them very specifically as asp.net adds the references to them on your behalf.

Conditional comments are the only sane way to provide version support for Internet Explorer and are part and parcel of any modern website design.

I have previously got around this in other themed asp.net sites by creating a custom control which i can place in the head section. This custom control is then skinned (using controls.skin) and its in there that i define the stylesheets for that theme. The stylesheets would be located elswhere (ie the app_templates/skin_2/style/). Then make sure that you don't add any stylesheets in the themes folder.

It works well enough. I would be interested in seeing how other people go about this though.

I'm curious as to what differences are large enough to need a conditional style-sheet. The method I use is to start out with Firefox and get everything all pretty in it, then I make the tweaks necessary to get IE to look generally the same without breaking the Firefox layout. I haven't had a site yet that I needed separate style-sheets for individual browsers. That just sounds like too much of a headache for me to deal with.

Originally Posted by MarcJ

I'm curious as to what differences are large enough to need a conditional style-sheet. The method I use is to start out with Firefox and get everything all pretty in it, then I make the tweaks necessary to get IE to look generally the same without breaking the Firefox layout. I haven't had a site yet that I needed separate style-sheets for individual browsers. That just sounds like too much of a headache for me to deal with.

We're all just not as good as you

Seriously, usually its a few minor differences and its really no trouble. Much quicker for me to do that than to figure out a better way to do it without dual style sheets.

Conditional stylesheets are easy enough to support, but you need to move all of the other stylesheets from App_Themes/Skin_1 (or whatever) and place them in a different folder. You then need to manually add the reference to the stylesheets back into the masterpage's head section since they won't be automatically loaded anymore. Asp.NET ONLY loads the styles for the currently selected theme, and by moving the CSS files out of the themes directory, you break that functionality, allowing you to manually define whatever you want.

Another way to do it would be to create a separate theme for IE, and in SkinBase you can detect the browser and set the Page.Theme property to whatever you want There are lots of ways to skin this particular cat.

Originally Posted by AspDotNetStorefront - Dan

Another way to do it would be to create a separate theme for IE, and in SkinBase you can detect the browser and set the Page.Theme property to whatever you want

If I absolutely had to use conditional stylesheets, I'd definitely pick this method for myself since it would technically allow even greater flexibility per browser than simple CSS changes. Add a div here, remove a div there...etc.

For whatever reason, when I do as Dan suggested it rips out the stylesheet that isnt in the condition.

I removed the style sheets from from App_Themes/Skin_2

I created a directory under /web called styles

So in the case below the style.css is never included in the source, when I view source that line is completely absent.

Code:

<link rel="stylesheet" href="/styles/style.css" type="text/css">
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="/styles/style-ie.css" title="Default" media="all" />
	<![endif]-->

Did you manually add the stylesheet references back into the .MASTER file? Since they aren't under app_themes, the references will not be automatically generated.

Hi Dan,

Yes I did manually add them back in (like my post above shows) but when it renders it eliminates one for some bizarre reason.

By the way, seems you've been busy tonight ... your name about fills up the entire first page.