8 replies [Last post]
mvierow
Offline
newbie
Last seen: 13 years 21 weeks ago
Timezone: GMT-8
Joined: 2007-03-09
Posts: 5
Points: 0

I've developed a page that displays a stock quote in a floating element on the page. This worked perfectly fine until we noticed that the line spacing wasn't looking to good on a Mac. So I increased the line height a small amount and all was well. Well at least until I checked the site in IE6 on XP. If the window was small enough so that the floating element was off the screen, the background image would begin to tile as I scrolled the browser window.

I've modified the page to remove all of the elements that weren't necessary in demonstrating this effect. If viewed in IE 6 with the browser window small enough that the vertical scrollbar appears, the background image will tile as the page is scrolled.

If anyone can provide direction as to why this is happening, I would be very thankful. My searches for line-height, float, background, scroll, etc have all returned unrelated issues.

Mike

The following code has been validated.

test


#content {
font-size: 12px;
line-height: 16px;
}
#quote {
background: url(http://wwwimages.adobe.com/images/globalnav/adobe.png) no-repeat top;
}
.rowcontainer {
}
.rowtitle {
float: left;
width: 60px;
}
.rowdata {
margin-left: 69px;
}




Price:

$0.00 (US Dollar)



Change:

0.00 (0.00%)



Volume:

0,000,000



Date:

April 25, 2007



Time:

1:15 PM ET
(20 min delay)



purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 43 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Possible Solution

add height and width to your content div eg

#content {
height: 300px;
width: 300px;
font-size: 12px;
line-height: 16px;
}

then simply adjust these settings

hope this helps!

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

mvierow
Offline
newbie
Last seen: 13 years 21 weeks ago
Timezone: GMT-8
Joined: 2007-03-09
Posts: 5
Points: 0

Thanks for the reply

Thanks for the reply purewebdesigner, I added that to the page but it didn't stop the image from breaking into many pieces as the page is scrolled.

Removing line-height will stop the issue. Removing float will stop the issue. Specifying a matching font-size and line-height in the rowcontainer class will also stop the problem from happening, but looks ugly.

Using gif,jpeg,png for the background image all had the same effect.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Welcome to the world of

Hi

Welcome to the world of the crappy IE browser bugs.

It is a rendering engine problem. You need to force IE to re-render the page as you scroll.

So, add the word scroll to the background css:

background: url(http://wwwimages.adobe.com/images/globalnav/adobe.png) no-repeat scroll top;

mvierow
Offline
newbie
Last seen: 13 years 21 weeks ago
Timezone: GMT-8
Joined: 2007-03-09
Posts: 5
Points: 0

Still no change..

Thanks for the reply. This didn't seem to have any effect either. Added a few photos to a flickr account to demonstrate the effect if that is helpful. I'm continuing to search around to see if anyone else has run into this problem and still no luck. Seems odd that no one would have tried to use a background image with floats and line-height before...

http://www.flickr.com/photos/[email protected]/

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ok Try this: html

Ok

Try this:

html {background:url(not-real.gif);}

If that works, put it in a conditional comment for IE lt 7

mvierow
Offline
newbie
Last seen: 13 years 21 weeks ago
Timezone: GMT-8
Joined: 2007-03-09
Posts: 5
Points: 0

Interesting..

That had a pretty interesting effect. No longer breaking the image up like it did previously, but it moved the background image around as the page was scrolled. It also broke the background image applied to the body, which I didn't include in my markup because it didn't have an effect on the issue.

Any recommendations on how I could get more exposure to this issue?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

OK Try something else. This

OK

Try something else. This also works on my machine. I put a few breaks in to make it overflow the page.

test

#content {
font-size: 12px;
line-height: 16px;
}
#quote {
background: url(http://wwwimages.adobe.com/images/globalnav/adobe.png) no-repeat top;
}
.rowcontainer {
}
.rowtitle {
float: left;
width: 60px;
}
.rowdata {
margin-left: 69px;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

Price:
$0.00 (US Dollar)
Change:
0.00 (0.00%)
Volume:
0,000,000
Date:
April 25, 2007
Time:
1:15 PM ET
(20 min delay)








































































mvierow
Offline
newbie
Last seen: 13 years 21 weeks ago
Timezone: GMT-8
Joined: 2007-03-09
Posts: 5
Points: 0

Very Cleva..

That definitely fixed the problem, albeit with the addition of a small bit of space to the bottom of the quote container. For some reason the background image didn't appear over that part, but I was able to work around that by setting a background color to the same value as the border color (omitted from the example), then disabling the bottom border.

Big time thanks for your help, ClevaTreva.

Mike