Viewing form through portal messing up .css formatting

[ghbeers]

I have a .css file that is linked to a form that is built by system software which generates the html code. There are tables, etc. in the display. It looks great when viewing it directly through the web interface. However, when I go through the institution's portal, my formatting is overridden by stuff that is going on in the portal and messes it up. For example, I am losing table headers, some lines are appearing directly beneath a table with no spacing between, some vertical alignment problems in grouped tables, and worst of all, I can't seem to get it to print properly without going outside the report margins that are specified by a system class which was not a problem when viewing it directly on the web.

Any hints as to ways to override what the portal is "assuming" will be greatly appreciated. Thank you.

 

[vacunita]

Yes, make your CSS be more specific than the portals CSS, and maybe make it !important so it is not overridden by the other CSS.

CSS Specificity

http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ghbeers]

I thought I had enough specificity in my .css, but mine is still be overridden by whatever the portal is doing, and I can not view what those overrides are. This is the portal delivered by the vendor of the software. My position: relative are not being consistently interpreted, font sizes are being overridden, etc. Reporting through the portal will not allow bolding, etc. so I doubt I can override that. But I would like to get the report to fit on the page without truncation. I'm not a pro at all with .css, so I'm not sure what I am able to do - what will or will not work. I guess I will just start trying things one at a time to see what happens. Thank you.

 

[vacunita]

If you use either Firefox or Chrome, (I think I.E. can do it too, but differently) you can use their Inspect Element option form the right click menu to view the computed CSS from the website for a specific element. That way you'll know what is overriding your CSS.

You can even make changes there to the CSS, and see their effects in real time. Though you will need to then apply the changes to your source files, at least its helpful to get an idea of what is going on.


Other than that, its hard to suggest anything without seeing the website and your CSS.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ghbeers]

So I have nearly all of the problems resolved when this .css file is going through our portal. But there is still a very puzzling issue I can't get resolved no matter what I try. The groupTitles will not display over a series of 3 tables, no matter what I try. Using the Inspect Element feature in the browser, I see that the titles are in the generated rules, but they will not display. Below is the portion of the syntax that involves these tables from the beginning of the file. The remaining syntax for other fields is not included. The group titles display when going directly to the web using the same syntax. Is there a problem with vertical spacing when going through the portal???? I am no css expert by any means, so I don't know what to try next to override whatever the portal is doing.

#WebAdvisorContent table { border-collapse: separate; }
#WebAdvisorContent table td { vertical-align: top; padding: 0px; }
#WebAdvisorContent table th { white-space: nowrap; }

.vertical {border: 1px solid black; position: relative; margin-top: 5px; padding-right: 10px; }
#WebAdvisorContent hr {display: none;}
#WebAdvisorContent p {margin: 0px; }

#VAR1 { background-color: transparent; }
#VAR2, #VAR3, #VAR4, #VAR5 { background-color: black; color: white; font-size:12px; font-family:arial; font-weight: bold; white-space: nowrap; text-align: center; padding-left: 10px; padding-right: 10px;}

/* Grp_WPA_EARN_TYPES changes */
#GROUP_Grp_WPA_EARN_TYPES { position: relative; left: 4px; top: 20px; border-right: 2px solid white;}
#GROUP_Grp_WPA_EARN_TYPES td.WPA_EARN_TYPES { text-align: left; padding-left: 1px;}
#GROUP_Grp_WPA_EARN_TYPES td.WPA_EARN_HRS { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_EARN_TYPES td.WPA_EARN_PAYMENTS { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_EARN_TYPES th { position: relative; top: -3px; background-color: transparent; color: black; border: 1px solid black;}
#GROUP_Grp_WPA_EARN_TYPES table th.groupTitle { position: relative; display: table-cell; background-color: black; color: white; }
* html #GROUP_Grp_WPA_EARN_TYPES table th.groupTitle { display: block; }

/* Grp_WPA_TAX_CODES changes */
#GROUP_Grp_WPA_TAX_CODES { position: relative; vertical-align: top; left: 4px; top: 20px; border-right: 2px solid white;}
#GROUP_Grp_WPA_TAX_CODES td.WPA_TAX_CODES { text-align: left; padding-left: 1px;}
#GROUP_Grp_WPA_TAX_CODES td.WPA_CURRENT_TAXES { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_TAX_CODES td.WPA_YTD_TAXES { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_TAX_CODES th { position: relative; top: -3px; background-color: transparent; color: black; border: 1px solid black;}
#GROUP_Grp_WPA_TAX_CODES table th.groupTitle { position: relative; display: table-cell; background-color: black; color: white; }
* html #GROUP_Grp_WPA_TAX_CODES table th.groupTitle { display: block; }

/* Grp_WPA_DEDUCTION_DESCS changes */
#GROUP_Grp_WPA_DEDUCTION_DESCS { position: relative; vertical-align: top; left: 4px; top: 20px; border-right: 2px solid white;}
#GROUP_Grp_WPA_DEDUCTION_DESCS td.WPA_DEDUCTION_DESCS { text-align: left; padding-left: 1px;}
#GROUP_Grp_WPA_DEDUCTION_DESCS td.WPA_CURRENT_DEDUCTIONS { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_DEDUCTION_DESCS td.WPA_YTD_DEDUCTIONS { text-align: right; padding-right: 1px;}
#GROUP_Grp_WPA_DEDUCTION_DESCS th { position: relative; top: -3px; background-color: transparent; color: black; border: 1px solid black; text-align: center;}
#GROUP_Grp_WPA_DEDUCTION_DESCS table th.groupTitle { position: relative; display: table-cell; background-color: black; color: white; }
* html #GROUP_Grp_WPA_DEDUCTION_DESCS table th.groupTitle { display: block; }

...