Firstly, apologies for the somewhat generic CSS question. However, I
hope someone with a knowledge of the GWT tab panel will be able to
help.

I'm attempting to style the standard GWT tab panel to look the same as
our existing tab panel. As the HTML is different, I cannot reuse the
existing CSS.

I have come up with the CSS below which works reasonably well.
However, I'd like to introduce a 2px gap inbetween the tabs. I cannot
just add margin-right: 2px to .gwtTabBar-Item as this breaks up the
border lines.

The problem could easily be solved by removing the borders, or just
leaving the tabs with no gap. I'd be interested if anyone knows of a
workaround.

Cheers

Alex


.gwt-TabPanel {
        width: 100%;
        padding: 10px;
}

.gwt-TabPanelBottom {
        background-color: beige;
        border-left: 1px solid #aaa;
        border-right: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        border-top: 0px solid #aaa;
        padding: 10px;
}

.gwt-TabBar {
        margin-top: 15px;
        height: 100%;
}

.gwt-TabBar .gwt-TabBarFirst {
        height: 100%;
        padding-left: 1px;
        border-bottom: 1px solid #aaa;
}

.gwt-TabBar .gwt-TabBarRest {
        border-left: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
}

.gwt-TabBar .gwt-TabBarItem {
        border-top: 1px solid #aaa;
        border-left: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        background-color: white;
        font-size: 11px;
        font-weight: bold;
        color: grey;
        padding: 4px 20px 4px 20px;

        margin-left: 0px;

        cursor: pointer;
        cursor: hand;
}

.gwt-TabBar .gwt-TabBarItem-selected {
        color: black;
        font-weight: bold;
        background-color: beige;
        border-top: 1px solid #aaa;
        border-left: 1px solid #aaa;
        border-bottom: 1px solid beige;
        padding: 4px 20px 4px 20px;
        cursor: default;
}

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to Google-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to