I am applying a stylesheet to a form, which is working beautifully EXCEPT for the column labels on a tabbed table. The text on the column labels is displaying properly, but the ugly protruding borders around the column labels on the tabbed table won’t go away! I’ve tried several things with the CSS, but the borders remain. Anybody run across this?
Subject: CSS tabbed table problem
This where you cheat (assuming this for a web browser, which you did not state):
Do not used the standard tabbed tables but make them stand alone tables and use your own background graphics/tab graphics (with on and off states. Then you just display the table based on the “tab” selected.
This also allows you to use DHTML and not having to have a server hit every time you switch between tabs.
HTH
Subject: RE: CSS tabbed table problem
Yeah, I thought of that. I’d like to NOT have to rebuild the entire table, but it’s a good idea!
Subject: RE: CSS tabbed table problem
Oh you would not have to rebuild it, just cut and paste…the painful part will be with the hide whens and
tags.
Subject: RE: CSS tabbed table problem
well, that’s true, and I’ve never used
tabs! I may end up doing it that way - it’s a shame Domino is smart enough to apply the table tags to everything BUT the tab labels!
Subject: CSS tabbed table problem
Have you tried:
TABLE {border-collapse:collapse}
in your stylesheet?
The borders are still there, but they aren’t quite as ugly.
Subject: RE: CSS tabbed table problem
I will have to try this one out.
Subject: doesn’t work in Netscape, but looks great in IE
I used border-collapse:collapse AND
border-style:solid
and it looks just like I want it to - in IE. It is still hideous in Netscape, but my customer is converting to IE, and this application isn’t going to roll for several months, so it’s fine for my purposes. Thanks!
Subject: RE: doesn’t work in Netscape, but looks great in IE
Oh everything you want to do design wise is hideous in Netscape…you might want to show the customer FireFox…
Subject: RE: doesn’t work in Netscape, but looks great in IE
Wouldn’t it be cool if multi-platform Firefox “coasters” were as ubiquitous as the AOL ones are?
Subject: RE: doesn’t work in Netscape, but looks great in IE
Now would that not be a treat. Of course, Firefox is not without its flaws…
Subject: RE: doesn’t work in Netscape, but looks great in IE
If it’s really an issue and you need to support NS4.x, then you can attack the table border with JavaScript:
document.tables[‘tablename’].border = ‘whateverYouNeed’
or
document.tables[indexNumber].border = etc.
That’s not a bad idea in any case. In IE5+ or Mozilla/Pheonix/Firebird/Firefox and other DOM-compliant browsers, you can remove the border attribute from the table altogether, which will give CSS back all of the control you need.
Subject: CSS tabbed table problem - much better!
Never heard of it, but it looks MUCH better now - thanks!
Subject: RE: CSS tabbed table problem - much better!
Glad it helped. I think it only works in IE.
Subject: *And it seems to work differently in IE5.5 than in IE 6, which is annoying
Subject: Use Domino’s standard CSS properties
You can control the appearance of the column labels by adding the default Domino tabbed table classes to your CSS file/page.
If put some examples below that you can use and customize to suit your preferences:
TD.dominoTopTab
{
background-color: #D6D3CE;
background-image: url(bgTabUnselected.gif?OpenImageResource);
background-position: middle;
background-repeat: repeat-x;
vertical-align: middle;
height: 100%;
border-top: 0px solid #E7E3E7;
border-left: 0px solid #E7E3E7;
border-right: 1px solid #848284;
font-family: arial,san-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
}
TD.dominoTopTab A
{
color: #000000;
text-decoration: none;
cursor: hand;
height: 100%;
width: 100%;
}
TD.dominoTopTab A:hover
{
color: #ff0000;
}
TD.dominoTopTab A:visited
{
color: #000000;
}
TD.dominoSelTopTab
{
vertical-align: middle;
background-color: #336699;
font-family: arial,san-serif;
font-size: 11px;
color: #ffffff;
border-top: 1px solid #E7E3E7;
border-left: 1px solid #E7E3E7;
border-right: 1px solid #848284;
}
Regards,
Alex Elliott
AGE Computer Consultancy
Subject: thanks!
Thanks! I’ll try that!
Hopefully that will solve the additional problem I have discovered: the CSS works great in IE on an EXISTING document, but when I create a new document in IE, the CSS properties don’t work at all … must be an undocumented feature …
Subject: RE: thanks!
That’s probably a relative URL problem. If your stylesheet is linked with a relative URL (i.e., you aren’t using the full “http://www…” URL AND you aren’t using the stylesheet resource object in the HTML Head), then you need to allow for a difference bewteen a Form’s URL:
http://server.domain.tld/path/db.nsf/Form?OpenForm
and a Document’s URL:
http://server.domain.tld/path/db.nsf/View/UNID?OpenDocument
Because the view appears to be a folder to the browser, your stylesheet cannot be relatively linked from both locations with the same URL stub. If you use “stylesheet.css”, it will work on the form for new docs, and if you use “…/stylesheet.css” it will work for existing documents. You need something that will work for both, and the easy solution is to use the stylesheet resource object rather than a text link.
Subject: RE: thanks!
That’s most likely the case. When I constructed a demo form to make sure this worked before I posted, I just put the style statements right in the HTMLHeader section of the form. Of course the border-collapse then worked just fine on new documents.
I agree with Stan. If this is an ND6 only solution, use the stylesheet resource object.
Subject: RE: Use Domino’s standard CSS properties
Hi…
I am new in domino web development and I would to know how do i do to use this style definition in the tabbed table…
Thanks