| 
Codehaus.org
 » 
codehaus - grails
 » 
grails - user

Grails overrides my css styles when a layout is applied to my gsp

View: New views
11 Messages — Rating Filter:   Alert me  

Grails overrides my css styles when a layout is applied to my gsp

by krusek :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

I have a page that renders correctly before applying a layout. However when I include the layout meta tag It changes my tabs and buttons to underlined text

I took out all references to other .css files out of the layout main.gsp and it still changes the appearance.  I actually took out everything but the tag  <g:layoutBody />.

What is causing this behavior? (grails version 1.1.1)

Re: Grails overrides my css styles when a layout is applied to my gsp

by furtivechris :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Try installing Firefox and the add-on Firebug. You can then right click where the problem is on the page and "Inspect Element". The style information down the right hand side should tell you where the styling is coming from (which css file, which class etc).

Hope this helps,
Cheers,
Chris.


krusek wrote:
I have a page that renders correctly before applying a layout. However when I include the layout meta tag It changes my tabs and buttons to underlined text

I took out all references to other .css files out of the layout main.gsp and it still changes the appearance.  I actually took out everything but the tag  <g:layoutBody />.

What is causing this behavior? (grails version 1.1.1)

Re: Grails overrides my css styles when a layout is applied to my gsp

by krusek :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

krusek wrote:
The firebug plugin works great!  

However I didn't find anything that would explain why the tabs change to underline text when you apply the layout.  

What I am doing is quite simple.   I found a tabview example at http://www.premiercampus.com/courses/login/ajax_login/yui/examples/history/history-tabview_clean.html   I did a view source and copied the source to tabs.gsp.   Put tabs.gsp in any grails project and test it.  Then I put in the layout tag in the gsp and the tabs were underline text.

If someone would like to see for themselves here is a the code for tabs.gsp with the comments stripped out:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>TabView Control</title>

<style type="text/css">
body {
        margin:0;
        padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.premiercampus.com/courses/login/ajax_login/yui/build//tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://www.premiercampus.com/courses/login/ajax_login/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://www.premiercampus.com/courses/login/ajax_login/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://www.premiercampus.com/courses/login/ajax_login/yui/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="http://www.premiercampus.com/courses/login/ajax_login/yui/build/history/history-min.js"></script>
</head>
<body class=" yui-skin-sam">
<h1>TabView</h1>
<div class="exampleIntro">
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}
#demo { margin-bottom:1em; }
</style>
<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
<input id="yui-history-field" type="hidden">
<!-- Static markup required for the TabView widget. -->
<div id="demo" class="yui-navset yui-navset-top">
  <ul class="yui-nav">
    <li><em>Coverages</em></li>
    <li title="active" class="selected"><em>Payments</em></li>
    <li title="" class=""><em>Projection Results</em></li>
  </ul>
  <div class="yui-content">

    <div style="display: none;" id="tab1">
                <p>Tab 1</p>
    </div>
    <div style="display: block;" id="tab2">
                <p>Tab 2</p>
        </div>
    <div style="display: none;" id="tab3">
                <p>Tab 3</p>
        </div>
  </div>
</div>

<script>
(function () {
    var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
    var initialTabViewState = bookmarkedTabViewState || "tab0";
    var tabView;
    YAHOO.util.History.register("tabview", initialTabViewState, function (state) {

        tabView.set("activeIndex", state.substr(3));
    });
    function handleTabViewActiveTabChange (e) {
        var newState, currentState;
        newState = "tab" + this.getTabIndex(e.newValue);

        try {
            currentState = YAHOO.util.History.getCurrentState("tabview");

            if (newState != currentState) {
                YAHOO.util.History.navigate("tabview", newState);
            }
        } catch (e) {
            tabView.set("activeIndex", newState.substr(3));
        }
    }
    function initTabView () {
        // Instantiate the TabView control...
        tabView = new YAHOO.widget.TabView("demo");
        tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
    }

    // Use the Browser History Manager onReady method to instantiate the TabView widget.
    YAHOO.util.History.onReady(function () {
        var currentState;

        initTabView();
        currentState = YAHOO.util.History.getCurrentState("tabview");
        tabView.set("activeIndex", currentState.substr(3));
    });

    // Initialize the browser history management library.
    try {
        YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
    } catch (e) {
        // The only exception that gets thrown here is when the browser is
        // not supported (Opera, or not A-grade) Degrade gracefully.
        initTabView();
    }
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>  

Any help with this would be great!



Try installing Firefox and the add-on Firebug. You can then right click where the problem is on the page and "Inspect Element". The style information down the right hand side should tell you where the styling is coming from (which css file, which class etc).

Hope this helps,
Cheers,
Chris.


krusek wrote:
I have a page that renders correctly before applying a layout. However when I include the layout meta tag It changes my tabs and buttons to underlined text

I took out all references to other .css files out of the layout main.gsp and it still changes the appearance.  I actually took out everything but the tag  <g:layoutBody />.

What is causing this behavior? (grails version 1.1.1)


Re: Grails overrides my css styles when a layout is applied to my gsp

by furtivechris :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Going to that example page, if you Inspect Element on one of those tabs, somewhere down the style/selectors list in firebug you will see:

.yui-nav a {
border-style:solid;
color:#000000;
text-decoration:none;
}

The "text-decoration:none" is the thing that stops the underlining. I think underlining links is default for firefox's html (and other browsers generally). If you click on the style tab in firebug there's a "Show User agent CSS" - this shows the css that Firefox is setting as its defaults. The text-decoration:underline set for *|*:-moz-any-link should be subsequently overriden by the .yui-nav a selector.

If you can't see the yui selectors in the list in the firebug style, then your page is not including the "tabview.css" properly.

Hope this helps,
Cheers,
Chris.

krusek wrote:
The firebug plugin works great!  

However I didn't find anything that would explain why the tabs change to underline text when you apply the layout.  

What I am doing is quite simple.   I found a tabview example at http://www.premiercampus.com/courses/login/ajax_login/yui/examples/history/history-tabview_clean.html   I did a view source and copied the source to tabs.gsp.   Put tabs.gsp in any grails project and test it.  Then I put in the layout tag in the gsp and the tabs were underline text
...

Re: Grails overrides my css styles when a layout is applied to my gsp

by krusek :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

krusek wrote:
I can see all that your talking about with firebug seeing different style settings between using the layout and without it.   I also see the override of moz-any-link when Show User Agent css is selected.  

But what I don't understand is how the tabview.css can load but load wrong?  And what to do to fix this problem.    

Do you have any further insight?

Going to that example page, if you Inspect Element on one of those tabs, somewhere down the style/selectors list in firebug you will see:

.yui-nav a {
border-style:solid;
color:#000000;
text-decoration:none;
}

The "text-decoration:none" is the thing that stops the underlining. I think underlining links is default for firefox's html (and other browsers generally). If you click on the style tab in firebug there's a "Show User agent CSS" - this shows the css that Firefox is setting as its defaults. The text-decoration:underline set for *|*:-moz-any-link should be subsequently overriden by the .yui-nav a selector.

If you can't see the yui selectors in the list in the firebug style, then your page is not including the "tabview.css" properly.

Hope this helps,
Cheers,
Chris.

krusek wrote:
The firebug plugin works great!  

However I didn't find anything that would explain why the tabs change to underline text when you apply the layout.  

What I am doing is quite simple.   I found a tabview example at http://www.premiercampus.com/courses/login/ajax_login/yui/examples/history/history-tabview_clean.html   I did a view source and copied the source to tabs.gsp.   Put tabs.gsp in any grails project and test it.  Then I put in the layout tag in the gsp and the tabs were underline text
...


Re: Grails overrides my css styles when a layout is applied to my gsp

by furtivechris :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Maybe try downloading the tabview.css file and placing it in your css directory and include it that way, to see if it makes a difference?

If you can see text-decoration:none somewhere in the styles list in firebug (after rightclicking the underlined tab and "Inspect Element"), and it isn't crossed out (i.e. overriden) then you shouldn't see underlines. If it is crossed out then something further up the list is overriding it.

If you can't see text-decoration:none in the list of styles anywhere, then either the tabview.css is not being included (this should be easy to see since you will have .yui type class selectors in the styles list), or the ".yui-nav a" selector is not matching to your html for some reason.

OR its something different... Apologies, I'm relatively new to css myself :)

Cheers,
Chris.

krusek wrote:
I can see all that your talking about with firebug seeing different style settings between using the layout and without it.   I also see the override of moz-any-link when Show User Agent css is selected.  

But what I don't understand is how the tabview.css can load but load wrong?  And what to do to fix this problem.    

Do you have any further insight?

Re: Grails overrides my css styles when a layout is applied to my gsp

by krusek () :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

krusek wrote:
I moved the tabview.css as you suggested and am using the following tag:
<link rel="stylesheet" href="${resource(dir:'css',file:'tabview.css')}" />

The behavior is the same.  

Note:  Using firebug, this is what I see when I am on the  href="#tab1"

 Firebug of working example:
firebugOfTabsWorking.bmp


 Firebug of not working example:
firebugOfTabsNotWorking.bmp
 

I see that there are differences in .css files but I don't know how / where they are loaded from.

Also is there a way to force the use of the correct .css?



Maybe try downloading the tabview.css file and placing it in your css directory and include it that way, to see if it makes a difference?

If you can see text-decoration:none somewhere in the styles list in firebug (after rightclicking the underlined tab and "Inspect Element"), and it isn't crossed out (i.e. overriden) then you shouldn't see underlines. If it is crossed out then something further up the list is overriding it.

If you can't see text-decoration:none in the list of styles anywhere, then either the tabview.css is not being included (this should be easy to see since you will have .yui type class selectors in the styles list), or the ".yui-nav a" selector is not matching to your html for some reason.

OR its something different... Apologies, I'm relatively new to css myself :)

Cheers,
Chris.

krusek wrote:
I can see all that your talking about with firebug seeing different style settings between using the layout and without it.   I also see the override of moz-any-link when Show User Agent css is selected.  

But what I don't understand is how the tabview.css can load but load wrong?  And what to do to fix this problem.    

Do you have any further insight?


Re: Grails overrides my css styles when a layout is applied to my gsp

by furtivechris :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Ah that is helpful, but can only see the not working pic (couldn't see the firebugOfTabsWorking). From this it looks like you need to set your page body class thus:
<body class="yui-skin-sam">...

The bit in the css file that overrides the underline will only apply with selectors:
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a

Whereas with your html page the browser is just seeing:
.yui-navset .yui-navset-top .yui-nav a

An alternative is to apply a "undohtml.css" before your other css includes. This is generally good practice since it gives you a good baseline of style that renders fairly consistently across browsers. You can then override these default settings as you see fit with your own css file(s). See this as an example:
http://snipplr.com/view/266/undohtmlcss--tanteks-original-removes-browser-default-style/
Or search for:
http://www.google.co.uk/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-GB%3Aofficial&hs=ZRM&q=yui+reset+css&btnG=Search&meta=&aq=f&oq=

Most of these undohtml stylesheets remove the underlines for links, which I think is what you want. If you still want underlines on links as default but just not on the tabs, you will have to edit the tabview.css file yourself.

Hope this helps,
Cheers,
Chris.

krusek wrote:
I moved the tabview.css as you suggested and am using the following tag:
<link rel="stylesheet" href="${resource(dir:'css',file:'tabview.css')}" />

The behavior is the same.  

Note:  Using firebug, this is what I see when I am on the firebugOfTabsWorking.bmp


 Firebug of not working example:
firebugOfTabsNotWorking.bmp

I see that there are differences in .css files but I don't know how / where they are loaded from.

Also is there a way to force the use of the correct .css?

Re: Grails overrides my css styles when a layout is applied to my gsp

by krusek :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

krusek wrote:
I edited the previous post to correct the link.  You can now see the firebug working example.

I applied the class to the body <body class="yui-skin-sam"> and it didn't change anything.  I also tried the other things you suggested and they worked to remove the underline but not to restore the tabs and
look and feel from the yui that is there with out applying the layout.

I still wonder what Grails / sitemesh doing when a layout is applied?

Ah that is helpful, but can only see the not working pic (couldn't see the firebugOfTabsWorking). From this it looks like you need to set your page body class thus:
<body class="yui-skin-sam">...

The bit in the css file that overrides the underline will only apply with selectors:
.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a

Whereas with your html page the browser is just seeing:
.yui-navset .yui-navset-top .yui-nav a

An alternative is to apply a "undohtml.css" before your other css includes. This is generally good practice since it gives you a good baseline of style that renders fairly consistently across browsers. You can then override these default settings as you see fit with your own css file(s). See this as an example:
http://snipplr.com/view/266/undohtmlcss--tanteks-original-removes-browser-default-style/
Or search for:
http://www.google.co.uk/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-GB%3Aofficial&hs=ZRM&q=yui+reset+css&btnG=Search&meta=&aq=f&oq=

Most of these undohtml stylesheets remove the underlines for links, which I think is what you want. If you still want underlines on links as default but just not on the tabs, you will have to edit the tabview.css file yourself.

Hope this helps,
Cheers,
Chris.

krusek wrote:
I moved the tabview.css as you suggested and am using the following tag:
<link rel="stylesheet" href="${resource(dir:'css',file:'tabview.css')}" />

The behavior is the same.  

Note:  Using firebug, this is what I see when I am on the firebugOfTabsWorking.bmp


 Firebug of not working example:
firebugOfTabsNotWorking.bmp

I see that there are differences in .css files but I don't know how / where they are loaded from.

Also is there a way to force the use of the correct .css?


Re: Grails overrides my css styles when a layout is applied to my gsp

by furtivechris :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


krusek wrote:
I applied the class to the body <body class="yui-skin-sam"> and it didn't change anything.  I also tried the other things you suggested and they worked to remove the underline but not to restore the tabs and
look and feel from the yui that is there with out applying the layout.

I still wonder what Grails / sitemesh doing when a layout is applied?
Ok, try applying the <body class="yui-skin-sam"> to your views/layouts/main.gsp instead of your actual page. The sitemesh layout stuff will override the body tag in your page...

Cheers,
Chris.

Re: Grails overrides my css styles when a layout is applied to my gsp

by krusek :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

krusek wrote:
 
Problem Solved!  Putting the class="yui-skin-sam" in the body tag in the layout was the solution.

Thanks you Chris!

Kevin


krusek wrote:
I applied the class to the body <body class="yui-skin-sam"> and it didn't change anything.  I also tried the other things you suggested and they worked to remove the underline but not to restore the tabs and
look and feel from the yui that is there with out applying the layout.

I still wonder what Grails / sitemesh doing when a layout is applied?
Ok, try applying the <body class="yui-skin-sam"> to your views/layouts/main.gsp instead of your actual page. The sitemesh layout stuff will override the body tag in your page...

Cheers,
Chris.

Free embeddable forum powered by Nabble Forum Help