INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Viewing form through portal messing up .css formatting

Viewing form through portal messing up .css formatting

(OP)
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.

RE: Viewing form through portal messing up .css formatting

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-specif...

----------------------------------
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

RE: Viewing form through portal messing up .css formatting

(OP)
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.

RE: Viewing form through portal messing up .css formatting

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

RE: Viewing form through portal messing up .css formatting

(OP)
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; }

...

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close