EWeb standards mode

eWeb now runs in W3C standards mode to support modern web browsers and web design.

Upgrading CSS

For the 2013 release, the base.css file (in the style folder) has been updated with classes that are compatible with these standards.

Many older CSS files may have classes that need to be modernized. This page outlines those classes and what needs to change.

Add these to your own personalized CSS file.

Note: In this section, we will document CSS classes that commonly need changes. If you have issues with CSS, please contact us.

New imports

Include these in the top of your CSS file:

@import "jquery-ui.css";

New Classes

Add these new classes to the bottom of your CSS file:

/* New Classes for 2013 */
.btn {  display: inline-block; text-decoration:none; padding: 4px 10px 4px;  font-size: 13px;  line-height: 18px;  color: #eee;  text-align: center;  vertical-align: middle;  cursor: pointer;  background-color: #bbbbbb;  border: 1px solid #cccccc;   -webkit-border-radius: 4px; -moz-border-radius: 4px;  border-radius: 4px;  }
 
.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {  background-color: #e6e6e6; -webkit-transition: background-position 0.1s linear;-moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear;}
.btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}
 
.PageFrameworkBODYModal{ background-image:none;}
 
.ui-dialog .ui-dialog-content { padding: 0;  }
.PageFrameworkBODYModal #ContentPane { padding:2px}

Altered Classes

These classes should be altered:

Form control issues

To style form controls:

.DataFormDivDefault input[type=text], input[type=text], input[type=password]  {padding:0px; font-size:8pt; margin:0;  -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;line-height:normal }
select, textarea { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;  padding:0px; margin:0px; font-size:8pt; font-family: Verdana; height:auto; width:auto}
input[type=file] {  height:19px;  line-height: 18px; font-size:8pt }
 
input[type=submit], input[type=button], button {font-size: 8pt; }

Image and links border issues

html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
a:focus {     outline: 0px; text-decoration:none}
a:hover {     outline: 0px;}
a:active {    outline: 0px;}
img {border: 0px currentColor; height: auto; vertical-align: middle; -ms-interpolation-mode: bicubic;}
select {margin: 0px; font-size: 100%; vertical-align: middle; }
textarea {margin: 0px; font-size: 100%; vertical-align: top; overflow: auto; }
input {line-height: normal; margin: 0px; font-size: 100%; vertical-align: middle }
button {cursor: pointer; -webkit-appearance: button; line-height: normal; margin: 0px; font-size: 100%; vertical-align: middle; }
input[type='button'] {cursor: pointer; -webkit-appearance: button;}
input[type='reset'] {cursor: pointer; -webkit-appearance: button;}
input[type='submit'] {cursor: pointer; -webkit-appearance: button;}
input[type='search'] {box-sizing: content-box; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;}

Font sizing

BODY , p , table, textarea, pre, code , label, button, input, select { font-family:Verdana; font-size:8pt !important; font-weight: normal; font-style: normal; font-variant:normal; line-height:normal; } /*text-rendering: optimizeLegibility; }*/

Page Title

In the section << add your css settings for page title here >>, include your own special styling

.PageTitle, .pageTitle, .pagetitle <<add your css settings for page title here>>