1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Background color in scrollbox ends abruptly

         

piroman

4:43 am on Mar 22, 2010 (gmt 0)

10+ Year Member



Whenever I use my scrollbox in a non IE browser the data that was not displayed in the original view has no background color, instead switching to regular white background. Here is my example html: 
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

p{white-space:nowrap;font-family:consolas,fixedsys,monospace;
font-size:13px;margin:0px}

#data{width:100%;overflow:auto;height:120px;}

</style></head>
<body><div id="data" ;="">
<p style="background-color: #FFFFA0;">
data1 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data2 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA 
</p><p style="background-color: rgb(240, 144, 159);">
data3 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data4 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA 
</p><p style="background-color: rgb(144, 208, 176);">
data5 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data6 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
</p></div></body></html>


How can I fix this?

piroman

4:12 pm on Mar 22, 2010 (gmt 0)

10+ Year Member



Ok, I figured it out. The data inside the scrollbox needs to be turned into tables. Then the background color will stretch across the width of the row. 
<html><head>
<style type="text/css"></style>
</head>

<body>
<div style="width:100%;overflow:auto; height:auto;white-space:nowrap;font-family:consolas,fixedsys,monospace;font-size:13px;margin:0px">

<table cellpadding="0" cellspacing="0" style="background-color:#FFFFA0;;white-space:nowrap;font-family:consolas,fixedsys,monospace;font-size:13px;">
<td>
data1 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data2 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
</td>

</table><table cellpadding="0" cellspacing="0" style="background-color:rgb(240, 144, 159);white-space:nowrap;font-family:consolas,fixedsys,monospace;font-size:13px;">
<td>
data3 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data4 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
</td>        

</table><table cellpadding="0" cellspacing="0" style="background-color: rgb(144, 208, 176);white-space:nowrap;font-family:consolas,fixedsys,monospace;font-size:13px;">
<td>
data5 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
<br>
data6 01 00 5D 16 B0 84 00 86 58 82 B0 8A 20 82 08 8D 1E 80 23 17 07 80 41 17 04 80 48 17 02 00 76 15 44 00 28 F0 00 00 20 BE 83 20 C8 83 20 D5 83 20 99 11 22 D1 05 A0 30 75 8C 78 15 A0 00 00 8C 7A 15 A0 00 00 8C 76 15 A9 32 8D 7C 15 9C 59 16 9C 5A 16 9C 5D 16 A9 01 8D 5C 16 8D 5B 16 60 A2 7D 00 9E 7E 15 CA
</td>
</table>

</div>
</body>
</html>

drhowarddrfine

4:47 pm on Mar 22, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It does not "need" to be but it looks like tabular data so it "should" be a table.

I see the problem but didn't immediately see a fix for the original markup.

piroman

7:03 pm on Mar 22, 2010 (gmt 0)

10+ Year Member



I don't need to make a table out of this data, so if I can do it without tables that would be good. But the problem is that if I don't make them into tables then the background colors will not stretch beyond the original width of the scroll box.

piroman

5:18 pm on Mar 24, 2010 (gmt 0)

10+ Year Member



I just noticed that the solution does not work in Internet Explorer. So although the original one did and the 2nd one works for firefox, I need one that works for both. Does anyone have any ideas?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:17 pm May 1, 2026