Where does the pink background come from?

JavaScript
1

I need assistance with a problem that I can’t identify. Either I’m overlooking something really simple, or something utterly bizarre is happening.

I’m developing a web page (attached) that’s divided into two divs: a left sidebar with a fixed width and a main div that fills the rest of the window. The left div is further divided into a bottom div that resizes itself to fit its content and a top div that fills the rest of the sidebar. In the finished page, the top-left div will display a table of contents, the main div will display a page loaded from the table of contents, and the bottom-left div will display the page’s URL. (For simplicity, this version fills all of the divs with fixed text.)

It works, except that the background of the table of contents div is a garish salmon pink (rgb=xF0E0E0). I used that color in an early stage of development when I just wanted the colors to contrast.

I’ve changed the main div’s background to white and the URL and T.O.C. background to light grey (xF0F0F0). The main div and the URL display their new colors correctly. The T.O.C. is still pink.

I’m developing with Chrome. When I load the page, Chrome’s View Page command shows that the T.O.C. div’s background color is xF0F0F0. The Developer Tools window’s Elements tab assures me that the color is xF0E0E0. That tells me that the server is delivering the correct version of the page; whatever the problem is, it is lurking on the client side.

I know what you’re thinking: clear the cache. I did. It made no difference.

I tried loading the page in Firefox. The T.O.C. background was pink there, too. Again, clearing the cache made no difference.

I tried Internet Explorer. It displayed the T.O.C.'s background color correctly but gave me a mysterious “Object Expected” error when it tried to execute a JavaScript function that resizes the divs. I looked up the error and found many explanations, but the only relevant one was a problem with some of IE’s DLLs.

I moved the source file to another machine where it never existed before. IE executes the JavaScript function correctly there, but Chrome, Firefox, and IE all display the wrong background color.

The source file contains no instance of the string xF0E0E0, and does not load any CSS or define any global styles. (If it did, the in-line style should override them.)

Where is the salmon pink background coming from?

2

Can you post a link

3

I just approved the attachment :slight_smile:

4

The salmon pink colour is coming from line 21 (background:#ffe0e0):

document.getElementById('top').setAttribute('style',  "background:#ffe0e0; position:absolute; float:top; width:100%; min-height:128px; overflow-y:auto; " + 'height:'+topHeight+'px' );

Remove that and it should revert to being gray, as per line 31 (background:#f0f0f0):

<div id='top' style="background:#f0f0f0; position:absolute; width:100%; padding:5px; overflow-y:auto;">
  <strong>text top</strong>
  xxxxxxx xsaasaszzzzxkjsdf sdlksdlkj ewfjcsj sdkdkj cj  jdasfolk amqwwejos xdasj23ozs sjwio
  xxxxxxx xxkjsdf sdlksdlkj ewfjcsj sdkdkj cj  jdasfolk amqwwejos xdasj23ozs sjwio
  xxxxxxx xxkjsdf sdlksdlkj ewfjcsj sdkdkj cj  jdasfolk amqwwejos xdasj23ozs sjwio
</div>
5

Thank you! Interesting… my editor still does not find it, even though it’s in plain sight. Clearly I’ve got another issue to resolve. :slight_smile:

6

I opened the index.x.html file you uploaded in a text editor (TextMate ), removed the ‘background:#ffe0e0;’ and the pink background is gone.

Inline css styles in the html or Javascript are always harder to fix. It would be easier to have a separate css file or at least css within <style> tags on the same page.

7

Agree with that.
A clean separation of concerns is always good to aim for.

8

My experience has been that during early development it’s a lot easier to write the styles inline, then move them to styles when the design reaches a certain level of stability. Apart from the simplicity of dealing with one file instead of two, it eliminates the difficulty of thinking about the project in abstract terms before its concrete nature is clear.

I don’t think there’s a right or wrong side to this. It’s a matter of how an individual developer thinks.