1 reply [Last post]
perlion
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-05-03
Posts: 2
Points: 0

Everything has gone great since an upgrade of my CMS. The result of which scrambled IE in some way. Here are a couple of screenshots in Firefox. correctly displaying and IE not correctly. I have tested in IE6 and IE7 with the same results. Notice the extra height in the portal top of the IE screenshot. Thanks to anyone who can point me in the right direction.

firefox

IE

The pertinent code:

/*
 *  This is the file where you put your CSS changes. 
 *  You should preferrably use this and override the 
 *  relevant properties you want to change here instead 
 *  of customizing plone.css to survive upgrades. Writing
 *  your own plone.css only makes sense for very heavy 
 *  customizations. Useful variables from Plone are 
 *  documented at the bottom of this file.
 */
 
/* <dtml-with base_properties> (do not remove this <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
 
 
/* DELETE THIS LINE AND PUT YOUR CUSTOM STUFF HERE */
 
/* @group Header */
 
#portal-header {
	float: left;
	width: 1000px;
	padding-top: 170px;
	padding-bottom: 15px;
	background: url(logonew5tan.jpg) no-repeat;
}
 
a#portal-logo {
	height: 79px;
	width: 190px;
	float: left;
	position: relative;
	margin-left: 17px;
	top: -15px;
}
 
/* The global section tabs. */
#portal-globalnav {
background-color: transparent;
padding: 0em 0em 0em 0em;
white-space: nowrap;
list-style: none;
margin: 0;
height: auto;
line-height: normal;
}
#portal-globalnav li {
display: inline;
}
#portal-globalnav li a {
/* The normal, unselected tabs. They are all links */
background-color: #160376;
border-color: &dtml-globalBorderColor;;
border-width: &dtml-borderWidth;;
border-style: &dtml-borderStyle; &dtml-borderStyle; none &dtml-borderStyle;;
color: #ffffff;
height: auto;
margin-right: 0.5em;
padding: .75em 1.75em;
text-decoration: none;
text-transform: &dtml-textTransform;;
}
#portal-globalnav li.selected a {
/* The selected tab. There's only one of this */
background-color: &dtml-globalBackgroundColor;;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
border-bottom: &dtml-globalBackgroundColor; &dtml-borderWidth; &dtml-borderStyle;;
color: #ffffff;
}
#portal-globalnav li a:hover {
background-color: &dtml-globalBackgroundColor;;
border-color: &dtml-globalBorderColor;;
border-bottom-color: &dtml-globalBackgroundColor;;
color: #ffffff;
}
#portal-personaltools {
/* Bar with personalized menu (user preferences, favorites etc) */
background-color: &dtml-globalBackgroundColor;;
border-top-color: &dtml-globalBorderColor;;
border-top-style: &dtml-borderStyle;;
border-top-width: &dtml-borderWidth;;
border-bottom-color: &dtml-globalBorderColor;;
border-bottom-style: &dtml-borderStyle;;
border-bottom-width: &dtml-borderWidth;;
line-height: 1.6em;
color: #160376;
padding: 0em 3em 0em 3em;
margin: 0;
text-align: right;
text-transform: &dtml-textTransform;;
list-style: none;
}
#portal-personaltools .portalUser {
background: transparent url(&dtml-portal_url;/user.gif) center left no-repeat;
padding-left: 18px;
}
#portal-personaltools .portalNotLoggedIn {
/* Used on all descriptions relevant to those not logged in */
color: &dtml-fontColor;;
padding: 0;
background: transparent;
background-image: none;
}
#portal-personaltools li {
color: #160376;
margin-left: 1em;
display: inline;
}
#portal-personaltools li a {
text-decoration: none;
color: #160376;;
}
#portal-personaltools .visualIconPadding {
padding-left: 10px;
}
.visualCaseSensitive {
text-transform: none;
}
#portal-languageselector {
margin: 0 1em 0 1em;
float:left;
}
#portal-languageselector li {
display: inline;
}
#portal-breadcrumbs {
/* The path bar, including breadcrumbs and add to favorites */
border-bottom-color: &dtml-globalBorderColor;;
border-bottom-style: &dtml-borderStyle;;
border-bottom-width: &dtml-borderWidth;;
padding-left: 2em;
padding-right: 2em;
text-transform: &dtml-textTransform;;
line-height: 1.6em;
display: inline;
}
#portal-breadcrumbs a {
text-decoration: none;
color: #160376;
}
.breadcrumbSeparator {
font-size: 120%;
}
.addFavorite {
vertical-align: bottom;
}
.documentEditable {
padding: 0em 1em 1em 1em !important;
margin: 0 -1em;
}
 
 
#portal-personaltools li a {
text-decoration: none;
color: #160376;
}
 
 
 
/* New navtree styles */
 
.portletNavigationTree {
padding: 0;
list-style: none !important;
list-style-image: none !important;
line-height: 1em;
}
.navTree {
list-style: none;
list-style-image: none;
margin-top: 1px;
}
.navTree li {
margin-bottom: 1px;
}
.navTreeItem {
display: block;
padding: 0;
margin: 0;
}
.navTreeItem a,
dd.portletItem .navTreeItem a {
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-backgroundColor;;
display: block;
text-decoration: none;
padding-top: 0.2em;
padding-bottom: 0.25em;
}
.navTreeItem a:hover,
dd.portletItem .navTreeItem a:hover {
background-color: &dtml-globalBackgroundColor;;
color: #F2AD2E;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}
.navTreeCurrentItem {
background-color: &dtml-globalBackgroundColor;;
color: green;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor; !important;
}
li.navTreeCurrentItem {
display: block;
padding: 0 0 0 1px;
margin: 0 0 2px -1px;
}
li.navTreeCurrentItem a,
li.navTreeCurrentItem a:hover {
display: block;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBackgroundColor;;
min-height: 1.6em;
line-height: 1.6em;
height: auto;
}
 
/* Another workaround for broken Internet Explorer */
* html li.navTreeCurrentItem a,
* html li.navTreeCurrentItem a:hover {
height: 1.6em;
}

More code in the public.css

/*
** Plone style sheet - Public-facing Elements
**
** Style sheet documentation can be found at <a href="http://plone.org/documentation
**
**" rel="nofollow">http://plone.org/documentation
**
**</a> You should preferrably use ploneCustom.css to add your own CSS classes and to
** customize your portal, as these are the base fundaments of Plone, and will
** change and be refined in newer versions. Keeping your changes in
** ploneCustom.css will make it easier to upgrade.
**
** Feel free to use whole or parts of this for your own designs, but give credit
** where credit is due.
**
*/
 
/* <dtml-with base_properties> (do not remove this <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
 
/* Accessibility elements, applied by JS */
body.largeText { font-size: 95%; }
body.smallText { font-size: 60%; }
 
/* Padding for the columns */
 
#portal-column-one .visualPadding {
    padding: 2em 0em 1em 2em;
}
#portal-column-two .visualPadding {
    padding: 2em 2em 1em 0em;
}
 
/* Content area */
h1, h2 {
    border-bottom: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    font-weight: normal;
}
/* Compensate for the inline editing hover, since we have a 1px border */
body.kssActive h2.inlineEditable:hover,
body.kssActive h1.inlineEditable:hover,
body.kssActive h2.formlibInlineEditable:hover,
body.kssActive h1.formlibInlineEditable:hover {
    padding-bottom: 1px;
}
 
 
h3, h4, h5, h6 {
    border-bottom: none;
    font-weight: bold;
}
 
.documentFirstHeading {
    margin-top: 0;
}
 
.documentContent {
    font-size: 110%;
    padding: 1em 1em 2em 1em !important;
    background: &dtml-backgroundColor;;
}
.documentContent ul {
    list-style-image: url(&dtml-portal_url;/bullet.gif);
    list-style-type: square;
    margin: 0.5em 0 0 1.5em;
}
.documentContent ol {
    margin: 0.5em 0 0 2.5em;
}
 
/* Links with differently colored link underlines - only for content */
.documentContent p a {
    text-decoration: none;
    border-bottom: 1px #ccc solid;
}
.documentContent p a:visited {
    color: &dtml-linkVisitedColor;;
    background-color: transparent;
}
.documentContent p a:active {
    color: &dtml-linkActiveColor;;
    background-color: transparent;
}
#content a:target {
    background-color: #fd7 !important;
}
.documentContent li a {
    text-decoration: none;
    border-bottom: 1px #cccccc solid;
}
.documentContent li a:visited {
    color: &dtml-linkVisitedColor;;
}
.documentContent li a:active {
    color: &dtml-linkActiveColor;;
}
.documentContent dd a {
    text-decoration: none;
    border-bottom: 1px #cccccc solid;
}
.documentContent dd a:visited {
    color: &dtml-linkVisitedColor;;
    background-color: transparent;
}
.documentContent dd a:active {
    color: &dtml-linkActiveColor;;
    background-color: transparent;
}
/* End links */
 
/* End edit form elements */
 
#visual-portal-wrapper {
    margin: 0;
    padding: 0;
}
 
/* Logo properties */
#portal-logo img {
    border: 0;
    padding: 0;
    margin: 1em 0em 1em 2em;
}
 
/* The skin switcher at the top, only shows up if you have multiple skins available */
#portal-skinswitcher {
}
#portal-skinswitcher a {
    display: block;
    float: left;
}
#portal-top {
    /* Top section */
    margin: 0;
    padding: 0;
    background-color: transparent;   
}
 
/* Site-wide action menu - font size, contact, index, sitemap etc */
#portal-siteactions {
    background-color: transparent;
    white-space: nowrap;
    list-style-image: none;
    list-style-type: none;
    margin: 1px 0 0 0;
    height: auto;
    line-height: normal;
    float: right;
    padding: 3px 2em 3px 0;
}
#portal-siteactions li {
    display: inline;
}
#portal-siteactions li a {
    background-color: transparent;
    border: 1px solid &dtml-backgroundColor;;
    color: &dtml-discreetColor;;
    height: auto;
    padding: 0.2em;
    margin-right: 0.2em;
    text-decoration: none;
    text-transform: &dtml-textTransform;;
}
#portal-siteactions li.selected a {
    background-color: &dtml-globalBackgroundColor;;
    color: &dtml-globalFontColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}
#portal-siteactions li a:hover {
    background-color: &dtml-globalBackgroundColor;;
    color: &dtml-globalFontColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}
 
/* Searchbox style and positioning */
 
#portal-searchbox {
    float: right;
    clear: right;
    background-color: transparent;
    margin: 1.5em 0 0 0;
    padding: 0 2em 0 0;
    text-align: right;
    text-transform: &dtml-textTransform;;
    white-space: nowrap;
    z-index: 2;
}
#portal-advanced-search {
    margin-top: 0.2em;
    clear: both;
}
#portal-advanced-search a {
    color: &dtml-discreetColor;;
    text-decoration: none;
    text-transform: &dtml-textTransform;;
}
 
/* Search results elements */
 
dl.searchResults dt {
    font-size: 140%;
    font-weight: normal;
}
 
form.searchPage {
    text-align: center;
}
 
input.searchPage {
    font-size: 200% !important;
}
 
form.searchPage input.searchButton {
    background-position:5px 7px;
    padding:1px 10px 1px 25px;
}
 
/* LiveSearch styles */
.LSRes {
    font-family:  <dtml-var fontFamily>;
    visibility: visible;
    color: &dtml-globalFontColor;;
    background-color: &dtml-backgroundColor;;
    vertical-align: middle;
    display:block;
    list-style-image: none;
    list-style-type: none;
    text-align: left;
    min-width: 16.5em;
    text-transform: none;
    margin-left: 0;
    line-height: 1.1em;
}
#LSHighlight,
.LSHighlight {
    background-color: &dtml-globalBackgroundColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    color: &dtml-globalFontColor;;
}
.LSTable {
    margin: 1em 0;
}
.LSRow {
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-backgroundColor;;
    white-space: normal;
    padding:0;
    margin: 0;
    list-style-image: none;
    list-style-type: none;
}
.LSRow a {
    text-decoration: none;
    font-weight:bold;
    white-space:nowrap
}
.LSDescr {
    color: &dtml-discreetColor;;
    text-transform: &dtml-textTransform;;
    padding-left:2.1em;
    margin-top:-0.1em;
}
.LSResult {
    position: relative;
    display: block;
    text-align: right;
    padding-top: 5px;
    margin: 0;
    left: 3px;
    z-index: 3;
}
.LSShadow {
    position: relative;
    text-align: right;
}
.livesearchContainer {
    background-color: &dtml-backgroundColor;;
    margin-top: 0;
    padding: 0 !important;
    position: absolute;
    right: 0px;
    /* Currently exposes a rendering bug in Mozilla */
    top: 0;
    white-space: normal;
    font-family:  <dtml-var fontFamily>;
    visibility: visible;
    text-align: left;
    color: &dtml-globalFontColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    width: 30em;
    text-transform: none;
}
* html .livesearchContainer {
    padding: &dtml-borderWidth; !important;
    padding-top: 0 !important;
    background-color: &dtml-globalBorderColor;;
    border: 0;
}
#livesearchLegend {
    line-height: 1em;
    margin-top: -2em;
    margin-left: -0.1em;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    border-bottom: 0;
}
* html #livesearchLegend {
    margin-top: -1.9em;
    margin-left: -8px;
    position: relative;
}
 
/* Workaround for Internet Explorer's broken z-index implementation */
.LSIEFix {
    background-color: &dtml-backgroundColor;;
    padding: 0.5em !important;
    z-index: 20;
}
.LSBox {
    clear: left;
    float: left;
    text-align: right;
    padding-right: 1px;
    display:block;
}
#LSNothingFound {
    text-align: center;
    padding: 2px;
}
.LSBox label {
    font-weight: normal;
}
 
/* The global section tabs. */
#portal-globalnav {
    background-color: transparent;
    padding: 0em 0em 0em 2em;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    height: auto;
    line-height: normal;
}
#portal-globalnav li {
    display: inline;
}
#portal-globalnav li a {
    /* The normal, unselected tabs. They are all links */
    background-color: transparent;
    border-color: &dtml-globalBorderColor;;
    border-width: &dtml-borderWidth;;
    border-style: &dtml-borderStyle; &dtml-borderStyle; none &dtml-borderStyle;;
    color: &dtml-globalFontColor;;
    height: auto;
    margin-right: 0.5em;
    padding: 0em 1.25em;
    text-decoration: none;
    text-transform: &dtml-textTransform;;
}
#portal-globalnav li.selected a {
    /* The selected tab. There's only one of this */
    background-color: &dtml-globalBackgroundColor;;
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    border-bottom: &dtml-globalBackgroundColor; &dtml-borderWidth; &dtml-borderStyle;;
    color: &dtml-globalFontColor;;
}
#portal-globalnav li a:hover {
    background-color: &dtml-globalBackgroundColor;;
    border-color: &dtml-globalBorderColor;;
    border-bottom-color: &dtml-globalBackgroundColor;;
    color: &dtml-globalFontColor;;
}
#portal-personaltools {
    /* Bar with personalized menu (user preferences, favorites etc) */
    background-color: &dtml-globalBackgroundColor;;
    border-top-color: &dtml-globalBorderColor;;
    border-top-style: &dtml-borderStyle;;
    border-top-width: &dtml-borderWidth;;
    border-bottom-color: &dtml-globalBorderColor;;
    border-bottom-style: &dtml-borderStyle;;
    border-bottom-width: &dtml-borderWidth;;
    line-height: 1.6em;
    color: &dtml-fontColor;;
    padding: 0em 3em 0em 3em;
    margin: 0;
    text-align: right;
    text-transform: &dtml-textTransform;;
    list-style: none;
}
#portal-personaltools .portalUser {
    background: transparent url(&dtml-portal_url;/user.gif) center left no-repeat;
    padding-left: 18px;
}
#portal-personaltools .portalNotLoggedIn {
    /* Used on all descriptions relevant to those not logged in */
    color: &dtml-fontColor;;
    padding: 0;
    background: transparent;
    background-image: none;
}
#portal-personaltools li {
    color: &dtml-globalFontColor;;
    margin-left: 1em;
    display: inline;
}
#portal-personaltools li a {
    text-decoration: none;
    color: &dtml-globalFontColor;;
}
#portal-personaltools .visualIconPadding {
    padding-left: 10px;
}
.visualCaseSensitive {
    text-transform: none;
}
#portal-languageselector {
    margin: 0 1em 0 1em;
    float:right;
}
#portal-languageselector li {
    display: inline;
}
#portal-breadcrumbs {
    /* The path bar, including breadcrumbs and add to favorites */
    border-bottom-color: &dtml-globalBorderColor;;
    border-bottom-style: &dtml-borderStyle;;
    border-bottom-width: &dtml-borderWidth;;
    padding-left: 2em;
    padding-right: 2em;
    text-transform: &dtml-textTransform;;
    line-height: 1.6em;
}
#portal-breadcrumbs a {
    text-decoration: none;
}
.breadcrumbSeparator {
    font-size: 120%;
}
.addFavorite {
    vertical-align: bottom;
}
.documentEditable {
    padding: 0em 1em 1em 1em !important;
    margin: 0 -1em;
}

perlion
Offline
newbie
Last seen: 11 years 15 weeks ago
Joined: 2009-05-03
Posts: 2
Points: 0

One additional thing. The

One additional thing. The top code (custom.css) overrides the bottom public code, but I may have missed something when creating the custom code.

I also have these IE fixes already applied.

IEFixes.css

/*
** Stylesheet with Internet Explorer-specific workarounds.
*/
 
/* <dtml-with base_properties> */
 
* html #portal-columns {
width: 100%;
}
* html*#portal-columns {
width: auto;
}
input {
margin-bottom: 1px; /* bug fix */
}
table.listing td.top {
/* insane IE row bug workaround */
position: relative;
left: -1px;
top: -1px;
}
div#portal-columns div#portal-column-one,
div#portal-columns div#portal-column-two {
overflow: hidden;
}
textarea {
width: 97%;
}
.visualOverflow {
width: 88%;
}
.visualGhosted {
filter:alpha(opacity=20);
}
 
/* make spans within ABBR have a border in IE6 the same way it is in all other browsers */
* html abbr .explain {
border-bottom: &dtml-borderWidth; dotted &dtml-fontColor;;
}
 
/* Fix bottom margin on tabs in IE */
#portal-globalnav li.selected a {
position: relative;
}
#portal-colophon .colophonIcon {
height: 0px !important;
height /**/: 15px;
}
.actionMenu .actionMenuHeader a {
display: inline;
}
.actionMenu .actionMenuContent {
top: 1.4em;
}
 
/* Calendar fixes */
.ploneCalendar {
border-collapse:collapse;
width:auto;
height:1%;
}
.ploneCalendar td {
width:1%;
}
.ploneCalendar .todaynoevent,
.ploneCalendar .todayevent {
position: relative;
}
.hiddenStructure { /* This is necessary to eliminate the 1px high object in
the document flow in place of .hiddenStructure block objects */
position: absolute;
}
 
/* These work in IE only, changes the look of the scrollbar + textareas
We disabled these in Plone 3.0, but if you want them back, uncomment
*/
/*
body {
scrollbar-base-color: &dtml-globalBackgroundColor;;
scrollbar-highlight-color: &dtml-globalBackgroundColor;;
scrollbar-track-color: &dtml-evenRowBackgroundColor;;
scrollbar-darkshadow-color: &dtml-evenRowBackgroundColor;;
scrollbar-3dlight-color: &dtml-globalBorderColor;;
scrollbar-shadow-color: &dtml-globalBorderColor;;
scrollbar-arrow-color: &dtml-globalFontColor;;
}
*/
 
/* Holly hack to kill the Peekaboo bug in IE - details at
http://www.positioniseverything.net/explorer/peekaboo.html
"* html" syntax is added to hide it from IE5/Mac. ~limi
*/
 
#floatholder, #float {
height: 1%;
}
 
* html .link-external,
* html .link-external a,
* html .link-mailto a,
* html .link-mailto {
height: 1%;
}
 
/* Fix for IE float bug */
* html .visualIEFloatFix,
* html h1,
* html h2,
* html h3,
* html h4,
* html h5,
* html h6,
* html dd,
* html .documentDescription,
* html .visualClear,
* html .portalMessage,
* html .portalWarningMessage,
* html .portalStopMessage,
* html .system-message,
* html #error-handling,
* html .documentContent {
height: 0.1%;
}
 
/* Fix for IE float bug - have to use the Limi Hack here, since the paragraph
tag doesn't take nicely to the height hack above in IE. */
* html p {
position: relative;
}
* html h1.documentFirstHeading {
height: auto;
}
 
/* There appears to be a bug in some IE 6 versions that causes dashed borders
to get positioned strangely (i.e. out of the portlet in this case), and
to move about when scrolling. May be related to:
http://mtiki.mmf.at/mt/archives/000011.html */
dd.portletFooter {
border-top-style: solid;
}
 
/* Rounded corner workarounds for IE */
* html .portletHeader {
height: 1%;
}
.portletTopRight,
.portletTopLeft {
top: 0px;
}
.portletTopRight,
.portletTopLeft,
.portletBottomRight,
.portletBottomLeft {
font-size: 1px;
}
 
/* fix for the horizontal scroll due to the floated searchbox without width definition */
* html #portal-searchbox {
overflow: auto;
}
* html body.fullscreen #portal-searchbox {
overflow: visible;
}
 
 
/* IE doesn't know what to do with the caption element, hide it */
table.ploneCalendar caption {
display: none !important;
}
 
/* IE6 adds gap between portalMessage's DT and DD. We need to minimize it */
* html dl.portalMessage dt {
margin-right: 0;
}
 
/* Buttons in IE are rediculously wide. We need to fix it */
/* Fir somw unknown reasons the following works <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
.context,
.formControls .actionButtons .button,
.documentEditable * .context,
.standalone,
.documentEditable * .standalone,
.destructive,
.documentEditable * .destructive {
overflow: visible;
background-position:6px 1px;
}
input.searchButton {
overflow: visible;
}
 
/* </dtml-with> */