Background color changes when text is enlarged?

Forum Moderators: not2easy

Message Too Old, No Replies

Background color changes when text is enlarged?

SnowTao

2:53 pm on Nov 7, 2009 (gmt 0)

Only one file, in Firefox, MSIE7 (but not 6). When one enlarges the text using CTRL Up, the background behind the text goes black. I managed to force the background in paragraphs, the header, and table cells to be white. However, when the font is "normal"-sized, the whole page background is white (as intended). The first enlargement, it's still white. The second enlargement the background suddenly goes black all the way to the margin (and the black is indented (slightly) in black between the paragraphs and headings).

I've coded the background to be white in body, wrapper, page, and maintext (and para.). But since it only happens when the text is enlarged -- I don't see how any of that can help -- and it hasn't.

I'm totally baffled. (Why only THIS file, too?!)

Any ideas? Thanks,
Elenor

D_Blackwell

3:21 pm on Nov 7, 2009 (gmt 0)

Can you supply enough CSS/HTML to replicate the problem?

Does adding background to <html> help?

html, body {
background-color: #fff;
}

Also could try to rest with

* {
background-color: #fff;
}

The second probably won't work, because the universal selector is the weakest and already over-ridden by something else.

SnowTao

5:51 pm on Nov 7, 2009 (gmt 0)

I'll try -- but it's only the one file -- all the other files (some-250 of them, all using the same style sheets) do not exhibit this problem. (AH, I did NOT try putting your first suggestion IN the specific file - I will do that and report back. Nah, still black when the text is enlarged.)

The below is the file-specific (in file) html. (Some added trying to make the black go away.

#maintext h2 {
text-align: left;
font-size: 160%;
margin-top: 2em;
background: #f0f8ff url(../art/yelback.jpg) repeat right top;
}

h3 {
border: none;
background: none;
text-align: left;
}

.small {
font-size: 80%;
border: none;
}

#maintext a {
line-height: 1.4;
}

.translated {
font-size: 98%;
text-align: center;
}

#ToC-list-wide {
width: 80%;
}

.backtocurrent {
font-size: 116%;
text-align: center;
margin-top: 1em;
margin-right: auto;
margin-bottom: 0.9em;
margin-left: auto;
background-color: #f0f8ff;
border: 1px solid #4682b4;
width: 80%;
}

.backtocurrent a:link, .backtocurrent a:visited {
display: block;
color: black;
padding: 0.1em 0.6em;
margin: 0;
text-decoration: none;
background: #f0f8ff url(../art/h2-7a.gif) repeat-x bottom center;
}

.backtocurrent a:hover {
display: block;
padding: 0.1em 0.6em;
margin: 0;
text-decoration: none;
background: #f0f8ff url(../art/h2-7.jpg) top center repeat-x;
}

* {
background-color: white;
}

#all-ftr * {
background-color: #f0f8ff;
}

===================
(and, now this too:
html, body {
background-color: #fff;
} )

I'll dig out the external style sheet bit that might apply in my next message.

SnowTao

6:04 pm on Nov 7, 2009 (gmt 0)

Oh, both the HTML (4.01) and the CSS (2.1) (for all four style sheets) validate. (Well, except the stupid "zoom" code I had to use because we have a huge number of MSIE6 viewers. {sigh}) The four style sheets this page references are: global, text-object (for the specific type of page this is), TofC (for pages with a Table of Contents), and a print style sheet. Oh, five actually: there's an MSIE style sheet, which does not pertain to this matter, as the background stays white in all versions of MSIE.)

Possible codes relating to this problem from the global stylesheet. (You can see I've added the background-white all over the place... Tried it in the para code, made no difference so I took it back out.)

====================
body {
margin: 0;
padding: 0;
background-color: white;
color: black;
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
}

#wrapper { /* start after header closes, sets pages width */
width: 96%;
max-width: 44em;
margin: 0 auto;
background-color: white;
}

#page { /* start (immediately) after wrapper, sets text width */
max-width: 42em;
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, Times, "Times New Roman", serif;
line-height: 1.2;
margin: 0 auto;
font-size: 110%;
width: 100%;
background-color: white;
}

#main-text {
margin-left: 0;
text-align: left;
font-size: 100%;
width: 100%;
background-color: white;
}

p {
text-align: left;
font-size: 100%;
line-height: 1.25;
width: 42em;
}
====================
From the 'text-object' style sheet:

body{ /* puts notebook paper behind body */
background: #ffffff url(../art/noteppr3.jpg) repeat left top;
}

The file is on the site <snip>

I appreciate ANY help you can give -- I get by okay with regular HTML and CSS -- but not the weird problems like this!

Elenor

[edited by: swa66 at 7:06 pm (utc) on Nov. 7, 2009]
[edit reason] specifics removal, please do not try to lead readers to a site. [/edit]

D_Blackwell

9:35 pm on Nov 7, 2009 (gmt 0)

Knew that source drop would get chopped. No site anywhere on the internet is as parochial or insular as this one. Even that comment could be construed as violation of TOS 4, 12, 14, 15, 16, and/or 24 if somebody was so inclined. It is what it is.

At any rate, I plugged in the code sample provided and saw no problem as described regarding the black background and Firefox 3.5.1, Opera, or IE7. Zoomed away and everything fine (except for IEs horrendous zooming issues. Hard to work a problem that I can't replicate.

IE patches the OS weekly; they can't build a browser? Or buy one that works and slap their on their brand?

SnowTao

11:52 pm on Nov 7, 2009 (gmt 0)

"IE patches the OS weekly; they can't build a browser? Or buy one that works and slap their on their brand?"

The second is probably the better choice (so they won't do it... {eye roll})

Thanks so much for trying D Blackwell. I keep hoping someone somewhere has had the same sort of idiot problem and has found a workaround.

There is nothing in any style sheet or file that has a black background, so I'm not even sure where it could be coming from. I'll ask over on the Firefox forum...