CSS coding for IE and Standardized banners

Wednesday, May 9, 2007
CSS coding for IE

Adam Engelsgjerd
UA Library


Browsers & Standards
Standards are a shifting target. Standards are not standards, but recommendations.

IE did many fix bugs in IE7, including:

  • Peek-a-boo bug
  • Guillotine bug
  • Duplicate character bug
  • Duplicate indent
  • 3 pixel text jog
  • Creeping text bug
  • Double float margin bug
  • Bottom margin bug on hover
  • IE/Win line:height bug
  • Quirky percentages in IE

Safe CSS Hacking examples:
/*\*/ /**/ Hides rules from Mac IE5
/*/*/ /**/ Hides rules from Netscape 4
/*\*//*/ /**/ Shows rules to Mac IE5
* html p { } Shows rules to Mac IE and Win IE (But not IE7 in standards mode)
@import ulr[“style.css”]; } Hides rules from Netscape 4.
P { width: 400px; voice-family: “\”}\””; width: 300px; } Hides Properties from Win IE5x

Conditional Statements

Allows you to serve different CSS for different IE browsers. Example:

<!-- [if IE 6]>
<link rel="stylesheet" href="style.css" type="text/css">
<![endif] -->

  • More Info on conditional statements: msdn2.microsoft.com/en-us/library/ms537512.aspx
  • The Statements can be added as an include to the header portion so they can be easily updated.
  • The Dean Edwards IE7 Script
  • IE7 loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. The lightweight script is a single-line inclusion in your HTML/XML document. No alteration of your original markup is necessary. Neither do you have to alter your CSS.
  • Can slow down sites with high traffic.These are two links to Eric Meyer's Browser Reset (and his "Reset Reloaded") stylesheets:
  • Reset Styles
  • Reset Reloaded


  • Develop in Firefox
  • Test in IE7
  • If possible, devote a machine to IE6 for testing. If not, consider running an IE6 standalone browser. See evolt.org to download standalone browsers.
  • IE6 standalone does not recognize conditional statements; standalones may not work the same as regular browsers
  • Standard TML element behavior is driven by local CSS files.html.css & quirk.css. these files are editable. See: intranet.library.arizona.edu/users/aengels/aea/meyer/tableGraph/
  • Standard HTML element behavior is driven by local CSS files.html.css & quirk.css. these files are editable. See: intranet.library.arizona.edu/users/aengels/aea/meyer/tableGraph/


Standardized banners

Leslie Johston
External Relations



  • Dr Shelton wants a stronger institutional image for print & web and contacted External Relations to begin the initiative to standardize the branding for the UA. External Relations created an initial group to look at standardized banners. Those involved in this initial group had a university wide perspective. The new vice president for External Relations made consistent web banners the first step in the goal to improve branding for the UA. Oregon state is an example of a university that is doing a good job of integrating branding across its website
  • Estimated number of pages within the Arizona.edu domain: 1,090,000 (pages in English) and 1,180,000 (total pages including other languages).
  • The banners are meant to be as least intrusive as possible. The first 42 pixels belongs to the UA; the remainder of the page belongs to the department. Departments can add anything below the banner but not modify the banner.
  • Additional Banner Choices:
  • Leslie presented 3 banner choices. 1 or 2 more banners may be added to the choices. Anyone can submit a proposed new banner to later be voted on by campus. Send proposed banner designs to Leslie.
  • Submitted banners must be 42 pixels in height and must include the block “A” logo with enlarged register mark. Timeline for submitting banner designs: 6 weeks. The “UA Home” text link was added because some users do not know to click on the logo.

Comments on Banner Choices:

  • Did you consider the one line logo? Stacked text within logos does not work well on websites. Reply: the one line logo did not look good
  • What is wrong with the banner currently used on the main UA website? Reply: it does not include the block “A” logo.
  • Can the banners be modified or adapted? Is there a possibility for compromise so depts. Can add links to the banner to conserve space on this sites? Reply: will bring this to the group; the banners must be plug-in-play so they are easy for everyone to include.
  • Bland, terrible design. Reply: if we add more, it interferes with the website; it needs to be simple.
  • If you want to be as least intrusive as possible, why not just say the block “A” logo must be used instead of standardized banners? Reply: the logo got lost.
  • Why not allow a black & white banner like in print? Reply: print can use black & white because of the prohibitive cost of printing in color.
  • With the decentralized culture at the UA; why should my department sacrifice 42 pixels? Reply: Upper admin would say, why can’t you give up 42 pixels?
  • Usability issues are not being addressed.

How it applies to websites:

  • The banners are mandatory on all internal & external sites. All pages must adopt the new banners except personal homepages. The main concern is for departments and colleges.


  • Would it apply to faculty course pages? Reply: No, not to personal pages.
  • Would it be prohibited on personal pages like at Oregon state? Reply: not yet considered
  • What about websites that represent collaboration among outside agencies? Reply: the group is look at this; the banners should not apply; the banners are for 100% UA sites – not collaborative sites.
  • Will Athletics be exempt from this requirement? Reply: Yes. Sites that are not part of the UA and are self funding may not need to comply, like the UA Wildcat, Foundation, Alumni Association.
  • We have research units maintained by UA employees. Do research units need to adopt the banners? Reply: we are mainly concerned with the core of the website – not peripheral sites


  • Color for the university becomes part of the branding; The associative value of our colors is very important. There is no initiative to make sites use the recommended secondary color choices but Shelton is interested in the overall look and branding of the UA site. Leslie displayed the secondary palette of colors. 4 colors work well with the UA Red; 4 colors work well with UA blue; plus 2 metallic colors that are specifically meant for print.


  • Is using the secondary colors required? Reply: No. They are suggested colors that work well with the UA colors but are not required.
  • If redesigning, you may want to consider using the UA colors/recommended secondary colors now in case these color choices are required in the future.

Implementation/Technical Concerns

  • Can the UA logo be modified to “University of Arizona College of Medicine” or “University of Arizona College of Science” Reply: No. That would create inconsistent banners across the website.
  • Does the text link and the logo need to be linkable to the UA homepage? Reply: Yes.
  • What does home mean to users? They may be expecting the Home to be the department’s home not the UA Home. Upper right corner is the default area that users are accustomed to clicking on to get to the specific department’s homepage.
  • The implementation of these banners could cause UI issues. For example, users click on upper right clickable area to go home, they may not go where they expect. Can the upper right area be used to click to my department’s site?
  • Using CSS, padding can be added so you can line up the banners to make them fit well on your page.
  • Will the banners be stored in a central location so they can be included on websites? Reply: Coding will be in the RedBar Café to be copied to individual sites instead of included.
  • If it was a global include, it might provide an improved means of communication, like during the shooting; all pages could automatically include a message. If global, if that one server goes down, the banners would not be available; may cause too many hits to that server. Includes from a central source would make it easier since any changes would apply automatically.

Feedback from Groups and Campus:

  • Are you meeting with other groups? Reply: Shelton & his cabinet approved the banners; we’ve met with the Deans as well. The Deans had concerns about implementing the changes
  • External Relations has a roll out plan to reach the entire campus.
  • Have you done usability testing on the site designs? Reply: based on comments, I think we should at the very least look at some of the issues brought up to help steer clear of potential problems.
  • Do you have a UI (User Interface) designers on the group? There are complex UI issues that should be addressed. Reply: No.
  • There should have been a polling from units to get feedback.
  • You need to recruit more technical people into the group decision make process.

Technical Support:

  • External Relations may be able to help in finding support for departments who need assistance implementing the banners; they may help find money to complete the work.
  • LTC will provide free technical support for 2-3 months to help get banners included on websites.


  • Shelton wanted it completed by June 30th. We are looking to the roll out to start in the fall.
  • Timeline does not provide enough time to redesign a site to make it work well with the banners.
  • Unfunded mandate? Will departments be compensated for the cost? Repy: No.
  • There are major technical issues involved; six months is not enough to modify an entire site. Departments are under more constraints than the upper admin realizes.
  • My department is redesigning there site now. Can the banners be used now? Reply: Yes. The red and blue banner are ready to use now; the gray banner many be changed.
  • Are the banners read for download? Reply: Not available now.
  • Is there a timeline for when graphics are finalized? Reply: No.


  • Is someone from External Relations going to be doing some sort of survey to see if departments are complying? Reply: Yes. External Relations has a mandate to do the policing of sites; they are looking into how policing will be done. One possibility that was tried at another university would be to unlink sites that do not comply with the standards.