+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / CSS references inside <head>

CSS references inside &lt;head&gt;

10 posts, 0 answered
  1. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    22 Jul 2009
    Link to this post
    Hi all,

    What is the best way to add CSS file references between the <head> tags?

    The original way is like this:

    1 <link type="text/css" rel="stylesheet" href="../Assets/Css/all.css" media="screen" />  
    2 <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.Multiflexx.css" media="screen" />  
    3 <link type="text/css" rel="stylesheet" href="../Assets/Css/Menu.MultiflexxSide.css" media="screen" />  
    4  
    5 <script type="text/javascript" src="../Assets/Js/script.js"></script>  
    6 <script type="text/javascript" src="../Assets/Js/vscrollarea.js"></script>  
    7  
    8 <!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="../Assets/Css/ie6.css" /><![endif]-->  
    9 <!--[if IE]><link type="text/css" rel="stylesheet" href="../Assets/Css/ie.css" /><![endif]--> 

    When I use this on pages that are 1 or 2 levels deep (in the menu structure) then some styles are not applied. Well, the IE 6 hacks in particular. I tried all kind of things to resolve the right path for the files, but none of them are working.

    If anyone has some more ideas to solve this right, let me know.
    The problem is that it is important that the order of the files is the same, and that the Conditional comments are also beeing used.

    -Daniel
  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    22 Jul 2009
    Link to this post
    Hi Daniel,

    You can try to use the CssFileLink control. Here are some examples on how to use it - http://www.sitefinity.com/support/forums/sitefinity-3-x/designing-with-sitefinity/can-t-get-cssfilelink-to-work.aspx

    All the best,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    22 Jul 2009
    Link to this post
    Hi Georgi,

    I tried that, but using this control, I cannot use the conditional formatting, since I'll have to place the CssFileLink control inside the <body></body> tags.

    -Daniel
  4. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    24 Jul 2009
    Link to this post
    Hi Daniel,

    Then you can try the following:
    <link id="Link1"   
     runat="server"  
     type="text/css"  
     rel="stylesheet"  
     href="~/root/directories/Assets/Css/ie6.css" /> 

    This way, the correct path will be resolved on the server side, before the rendering the whole html document.

    All the best,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    24 Jul 2009
    Link to this post
    Hi Georgi,

    Yes, that is how I solved it now.

    Still, I have some issues with the paths to images etc. inside my website. But that is because I have to make all kinds of hacks for showing the website in IE6.

    What would be the right place for CSS hacks / PNG fixes when you're having trouble with showing the r.a.d.menu? Should I embedd those hacks inside the custom skin file or in a seperate file?

    -Daniel-
  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    27 Jul 2009
    Link to this post
    Hello Daniel,

    You can make the hacks in:
    • a custom skin
    • in the site theme, using the !important attribute to each RadMenu style definition.
    Let me know if you need help with this!
    Best wishes,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    27 Jul 2009
    Link to this post
    Hmm... yes, a little help would be nice. I tried some things, but then the IE6 issues still exist. Like the PNG fix etc. It would be nice to have all these hacks inside the custom skin file, but then I have some troubles with the path to the image folder.

    The 'Filter' expression requires absolute paths. Is that right? So, then when I go a level deeper in my website (using Sitefinity) the paths are incorrect. So, I don't know if there is a way to make these paths dynamic inside a .css file?

    -Daniel-
  8. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    30 Jul 2009
    Link to this post
    Hi Daniel,

    Do you have a live web site on which we can see this problem? We will connect and debug it with firebug. As for the filter paths, yes - are not resolved on the server side and you could have problems from that kind. The only workaround I could think of is using full paths.

    Regards,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  9. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    30 Jul 2009
    Link to this post
    Hi Georgi,

    I only have problems with IE6. All other browsers are working okay. So, it is not a big deal, but it would be nice to have it work in all browsers.

    The website is live at the moment: http://www.multiflexx.nl/

    -Daniel-
  10. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    04 Aug 2009
    Link to this post
    Hello Daniel,

    Try to reference the CSS files in your master page like shown below. The correct path to the files should be applied then.


    <!--[if lte IE 6]> 
    <link type="text/css" rel="stylesheet" href="~/Assets/Css/ie6.css" runet="server" /> 
    <![endif]-->   



    As for the dynamic background image paths in CSS files, I don't think that is possible. You can use absolute paths instead. Another approach I can suggest is to use GIF for IE6 background image and PNG for the others.


    Kind regards,
    Katia
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
Register for webinar
10 posts, 0 answered