Search code examples
cssinternet-explorerbackground-imagetapestry

Background image fixed with vertical scroll bar in IE, broken by Tapestry5 components/css

** EDIT November 17th **

Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.

//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
//    configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false");   Not available until 5.2

** END Edit **

I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.

However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.

I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy. 

background: #470077 url( images/abcd.jpg ) repeat-x scroll;

I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.

Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest) Firefox:

top of page

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

scrolled down a bit

oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------------------------------------
--------------------------------------

IE:

top of page

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

scrolled down a bit

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

Current CSS:

body {

margin: 0;

padding: 0;

background: #470077 url( images/abcd.jpg ) repeat-x scroll;

text-align: justify;

font: 15px Arial, Helvetica, sans-serif;

}

Source of a page with the issue: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>

<body><!-- start header -->
<div id="header">

<div id="logo">
  <h1><a href="/x/"></a></h1>
</div>
<div id="menu">
  <ul>
    <li><a href="/a/">a</a></li>
    <li><a href="b">b</a></li>
    <li><a href="c">c</a></li>
    <li class="current_page_item"><a href="d">d</a></li>
    <li><a href="e">e</a></li>
  </ul>
</div>

</div>
<!-- end header -->

<!-- start page -->
<div id="page">

<!-- start sidebar -->
<div id="sidebar">
  <ul>
    <li style="background: none;" id="search"></li>
  </ul>
</div>
<!-- end sidebar -->

<!-- start content -->
<div id="content">
  <div class="post">
    <div class="title">
     <h2>Merchant / Partner Login</h2>
    </div>
    <div class="entry">

    <!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->

    <!-- snip content -->

    </div>
  </div>

</div>
<!-- end content -->

<br style="clear: both;"/>
</div>
<!-- end page -->

<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->

</body>
</html>

Added after isolating issue to Tapestry component tags

Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?

/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}

DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}

DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}

DIV.t-error LI {
margin-left: 20px;
}

HTML>BODY DIV.t-error LI {
margin-left: -20px;
}

.t-invisible {
display: none;
}

LABEL.t-error {
color: red;
}

INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}

IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}

IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}

IMG.t-sort-icon {
margin-left: 4px;
}

DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}

DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-exception-report LI {
margin-left: -40px;
}

DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}

DIV.t-exception-report LI {
list-style: none;
}

SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}

SPAN.t-exception-stack-controls {
display: block;
float: right;
}

UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}

LI.t-usercode-frame {
font-weight: bold;
color: blue;
}

LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}

H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}

DIV.t-exception-report DT:after {
content: ":";
}

DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}

TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}

TABLE.t-data-table TH {
background-color: black;
color: white;
}

TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}

DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}

DIV.t-beaneditor-row LABEL:after {
content: ":";
}

DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}

DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}

DL.t-beandisplay DT:after {
content: ":";
}

DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}

INPUT.t-number {
text-align: right;
}

DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}

TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}

TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}

TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}

TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}

DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-data-grid-pager {
margin: 8px 0px;
}

DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}

DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}

DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}

TABLE.t-data-grid TR TH A {
color: white;
}

IMG {
border: none;
}

DIV.t-env-data-section {
padding-left: 5px;
}

DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}

DIV.t-env-data LI {
margin-left: -25px;
}

DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}

TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}

TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}

TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}

TD.t-location-current {
background-color: #FFFFCF;
}

TD.t-location-content-first {
border-top: 1px solid black;
}

DIV.t-palette {
display: inline;
}

DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}

DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}

DIV.t-palette-available {
float: left;
}

DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}

DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}

DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}

DIV.t-palette-selected {
float: left;
clear: right;
}

DIV.t-palette-spacer {
clear: left;
}

IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}

DIV.t-autocomplete-menu {
z-index: 9999;
}

DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}

DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}

DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}

DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}

HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}

DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}

HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}

UL.t-data-list LI {
list-style-type: square;
}

DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}

DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}

DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
Solution

  • This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:

    bodyTag.style.backgroundAttachment = 'fixed';