Embedded CSS Question

**logicspeak** · Jan 14, 2010, 4:41 PM

I'm currently evaluating Coolite by adding it to our existing web framework that already has lots of CSS. When adding Coolite, the embedded CSS includes the following globally applied style:




html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{
margin: 0;
padding: 0;
}


img, body, html
{
border: 0;
}


address, caption, cite, code, dfn, em, strong, th, var
{
font-style: normal;
font-weight: normal;
}


ol, ul
{
list-style: none;
}


caption, th
{
text-align: left;
}


h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

Some of the above style conflicts with our site style (especially 'td' padding). I have tried using the web.config to exclude embedded style, copy out the embedded style minus the above) but then the coolite controls don't look good (spacing, etc.). Is there any way to resolve this so that our global style isn't ignored? I'd really rather not have to class every one of my table td's...it would literally be in the hundreds to thousands to get our default padding.

Thanks again for all the hard work!
Jason

**geoffrey.mcgill** · Jan 14, 2010, 4:55 PM

Hi Jason,

Welcome!

Yes, the toolkit uses a "reset" stylesheet to try and get padding/margin consistency across browsers. Then each style is rebuilt as required. Obviously this may cause issues when integrating existing code or components.

There are options to override, but it would depend on how you're using the toolkit components in relation to your existing code-base.

If your existing html markup will be added inside the <Body> (<Content> in v1.0) region of a Panel (Container, Panel, Window, etc), then it shouldn't be a problem, especially in the v1.0 release.

If you're just sprinkling in a little coolite/extjs into an existing app, then things might get a bit trickier. Again, it just depends on how you have things structured. I would probably look to create a css sub-class which is specific to region of your existing markup. For example, if you have an existing "header" div region, create a css sub-class like the following:

Example

div#header td { padding : 5px !important; }

Thats just a super simplified example, but posting a code sample for us to test with would help to determine the best approach.

Hope this helps.

**jasonetheridge** · Jan 14, 2010, 9:51 PM

Thanks for the quick response. You are correct that I'm trying to insert some crunchy coolite goodness into an existing codebase (like using a splitbutton on my existing form instead of an asp button, etc...) I'm not sure if it will be possible to put everything into coolite panels...i'll have to look into that a little more.

Also, I tried the div with id suggestion from above, but unfortunately, that will only work for the first level. Subsequent tds inside inner tables don't inherit from that (correct?) And incidentally, why would the strong tag be escaped to font weight: normal? That pretty much renders all strong tags in my entire web application as useless...?

Apologies for the possibly basic or ignorant questions...I really am looking at this as one of my critical UI frameworks going forward, so I want to make sure 1) that I have a very good understanding of how I can use it and 2) that it will work for what I need.

See below for a marked up example of what I tried to implement:

<div id="ContentDiv">
    <table>
        <tr>
            <td>
                <img src="/Images/clear.gif" width="10" height="250" />
            </td>
            <td>
                <table width=100% border="1">
                    <tr>
                        <td>
                            <strong>This strong does not display bold</strong>
                        </td>
                        <td>
                            This td won't take the padding from your example because it is inside an inner table
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <ext:SplitButton ID="sbtnOK" runat="server" Text="OK">
                                ...menu items here.
                            </ext:SplitButton>
                        </td>
                        <td>
                            &amp;nbsp;
                        </td>
                </table>
            </td>
            <td>
                <img src="/Images/clear.gif" width="10" height="250" />
            </td>
        </tr>
    </table>

**geoffrey.mcgill** · Jan 14, 2010, 11:29 PM

This seems to work relatively well for me.

Example

<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ext.NET Example</title>
    <style type="text/css">
        strong {
            font-weight : bold;
        }
        
        td {
            padding : 5px;
        }
        
        .special {
            height : 100px; 
            vertical-align : top;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <div id="content">
            <table>
                <tr>
                    <td>
                        <table width="100%" border="1">
                            <tr>
                                <td>
                                    <strong>This strong does not display bold</strong>
                                </td>
                                <td>
                                    This td won't take the padding from your example because it is inside an inner table
                                </td>
                            </tr>
                            <tr>
                                <td class="special">
                                    <ext:SplitButton ID="Button1" runat="server" Text="Button">
                                        <Menu>
                                            <ext:Menu runat="server">
                                                <Items>
                                                    <ext:MenuItem runat="server" Text="Item 1" />
                                                    <ext:MenuItem runat="server" Text="Item 2" />
                                                    <ext:MenuItem runat="server" Text="Item 3" />
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:SplitButton>
                                </td>
                                <td>
                                    &amp;nbsp;
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        

    </form>
</body>
</html>

There does appear to be an issue with how the <ext:Menu> is calculating its position when added directly to a <td>. I had to give the <td> a bit of height, which appears to work-around the problem.

In general I would not recommend trying to layout your page using <table>s, especially with ExtJS. I'd focus on using the built in Layout functionality of the toolkit and only render raw html when absolutely required.

Hope this helps.

**geoffrey.mcgill** · Jan 14, 2010, 11:33 PM

If you post a screen capture of your existing app, or email privately (geoff@object.net), we should be able to recommend or even stub out a basic layout which should give a good headstart in porting over your app to the toolkit.

**geoffrey.mcgill** · Jan 14, 2010, 11:39 PM

I should also point out, in the upcoming v1.0 release, setting the new PreventBodyReset="true" property will help with resetting the default styles back closer to the browser default when html is added to the Panels <Content> region or set on the .Html property.

The PrecentBodyReset property is available on all Panel type components including <ext:Panel> and <ext:Window>.

Hope this helps.

**geoffrey.mcgill** · Jan 14, 2010, 11:43 PM

I'm throwing this in here since its somewhat related to this topic. CSS specificity tutorial, see http://www.smashingmagazine.com/2007...u-should-know/

**logicspeak** · Jan 15, 2010, 12:01 AM

Geoff,

I did email you some screenshots. I think your suggestion about laying out the page using the builtin functionality is where we want to get (especially when our learning of Coolite/ExtJs improves and when we can read more about how to use all of the layout functionality)...but we'd like to go ahead and start throwing in some functionality now before we get to a total layout redesign (if that is possible).

If not, I'll back up and punt...but Coolite is just so cool that I want to get started! :)

Sorry that I can't post the screens online for everyone, it is an internal proprietary application that I can't publish publicly.

Thanks again for all the help!
Jason

Thread: Embedded CSS Question

Thread Tools

Search Thread

Display

Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

Similar Threads

How to remove embedded resource css from ext.axd

[CLOSED] [1.0] groupingsummary-embedded.css not set to embedded resource

[CLOSED] [1.0] treegrid-embedded.css is not set as EmbeddedResource

[CLOSED] embedded custom theme

How to embedded the extenal controller?

Posting Permissions

Sitemap

Downloads

Resources

Thread: Embedded CSS Question

Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

RE: Embedded CSS Question

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us