DIV background color issue

@WolfShadeSep 19.2007

Hello, all.

I am trying to get four DIV layers that use “float:” for positioning to show the background color of the table cell they reside in. It works great in IE6; but FF2 only shows white. If I set “background-color” in the DIV’s, IE6 works with that, too, but FF2 only places the correct color within the DIV’s themselves, and leaves white gaps between them.

Is there a workaround for this?

Thanks,

^{^_^{^}}

PS. I originally tried using a background image, but apparently it’s not possible to stretch the image without chopping it up and using even more DIV’s.

to post a comment

CSS

13 Comments(s) _↴

@WebJoelSep 19.2007 — #Seeing your code is required. :rolleyes:

@CentauriSep 20.2007 — #Divs in a table cell? - sounds like incorrect use of tables to me......

@WolfShadeauthorSep 20.2007 — #Seeing your code is required. :rolleyes:[/QUOTE]

Sorry.. million things on mind..

The following is contained within one table cell.

<i>
 </i>
 &lt;div id="highlight1Layer" style="display:table-row; width:333px; max-width:333px; min-height:133px; height:expression('133px'); float:left; clear:left; cursor:pointer; text-align:left; vertical-align:top; padding:0px; background:inherit;"
 onClick="document.location='http://www.cpwr.org/index.cfm?n=8&amp;sn=1';"
 onMouseOver="return overlib('Click Here To Learn More..', FGCOLOR, '#FFFFFF', HEIGHT, 14, BELOW);"
 onMouseOut="return nd();"&gt;
 
 &lt;div class="fiHeadline" style="padding:5px; padding-bottom:0px; display:table-cell; clear:both;"&gt;About the 2009 Parliament&lt;/div&gt;
 
 &lt;div class="fiContent" style="padding:5px; display:table-cell; float:left;"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/div&gt;&lt;/div&gt;
 
 &lt;div id="highlight2Layer" style="display:table-row; width:333px; max-width:333px; min-height:133px; height:expression('133px'); float:right; clear:right; cursor:pointer; text-align:left; vertical-align:top; padding:0px; background:inherit;"
 onClick="document.location='http://www.cpwr.org/index.cfm?n=2&amp;sn=1';"
 onMouseOver="return overlib('Click Here To Learn More..', FGCOLOR, '#FFFFFF', HEIGHT, 14, BELOW);"
 onMouseOut="return nd();"&gt;
 
 &lt;div class="fiHeadline" style="padding:5px; padding-bottom:0px; display:table-cell; clear:both;"&gt;From the archives&lt;/div&gt;
 
 &lt;div class="fiContent" style="padding:5px; display:table-cell; float:left;"&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.&lt;/div&gt;&lt;/div&gt;
 
 &lt;div id="highlight3Layer" style="display:table-row; width:333px; max-width:333px; min-height:133px; height:expression('133px'); float:right; clear:right; cursor:pointer; text-align:left; vertical-align:top; padding:0px; background:inherit;"
 onClick="document.location='http://www.cpwr.org/index.cfm?n=3&amp;sn=3';"
 onMouseOver="return overlib('Click Here To Learn More..', FGCOLOR, '#FFFFFF', HEIGHT, 14, BELOW);"
 onMouseOut="return nd();"&gt;
 
 &lt;div class="fiHeadline" style="padding:5px; padding-bottom:0px; display:table-cell; clear:both;"&gt;Featured Item&lt;/div&gt;
 
 &lt;div class="fiContent" style="padding:5px; display:table-cell; float:left;"&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).&lt;/div&gt;&lt;/div&gt;
 
 &lt;div id="highlight4Layer" style="display:table-row; width:333px; max-width:333px; min-height:133px; height:expression('133px'); float:left; clear:left; cursor:pointer; text-align:left; vertical-align:top; padding:0px; background:inherit;"
 onClick="document.location='http://www.cpwr.org/index.cfm?n=5&amp;sn=4';"
 onMouseOver="return overlib('Click Here To Learn More..', FGCOLOR, '#FFFFFF', HEIGHT, 14, BELOW);"
 onMouseOut="return nd();"&gt;
 
 &lt;div class="fiHeadline" style="padding:5px; padding-bottom:0px; display:table-cell; clear:both;"&gt;Featured Item&lt;/div&gt;
 
 &lt;div class="fiContent" style="padding:5px; display:table-cell; float:left;"&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.&lt;/div&gt;&lt;/div&gt;

Thanks for anything you can do to illuminate the issue.

^{^_^{^}}

@WebJoelSep 20.2007 — #wow.. ? -I'm lost.

I would bet that whole thing could be much easier created using non-TABLE layout (you say that this is inside of a TD), and even then, simpler.

I am not seeing the effect I think you are after, as every time I hover over either of the four 'sections' of text, two concurrent javascript error dialogue boxes 'pop up' and ask to be ignored or cancelled.

What is supposed to be happening here? I think that you want certain text to be visible, and on-hover, certain other text to replace the first. -Am I close?

@WolfShadeauthorSep 20.2007 — #wow.. ? -I'm lost.

I would bet that whole thing could be much easier created using non-TABLE layout (you say that this is inside of a TD), and even then, simpler.

I am not seeing the effect I think you are after, as every time I hover over either of the four 'sections' of text, two concurrent javascript error dialogue boxes 'pop up' and ask to be ignored or cancelled.

What is supposed to be happening here? I think that you want certain text to be visible, and on-hover, certain other text to replace the first. -Am I close?[/QUOTE]
Well, truth be told, I am not experienced with table-less development and don't currently have the time to learn it as this project does have a deadline.

The effect that I am after is to have the background color of the table cell show through the DIV layer. IE understands that not setting a background color in the DIV should allow the color underneath it to show; FF2 does not parse it that way. And if I set the background color in the DIV, then FF2 only colors the background of the DIV's, leaving white gaps between the DIV's.

The error you are getting when you hover over the DIV's is because of the onMouseOver, onMouseOut, and onClick params not seeing the JS code for them because I didn't include them (Over and Out utilize the overLib by Erik Bosrup which displays a tooltip like message; the Click is a URL location.)

Look at the following in FF2:

http://cfd216.cfdynamics.com/static/

^{^_^{^}}

@WebnerdSep 20.2007 — #well for one, your

expression()

in the CSS will only work in IE and I'm really not sure why you are using that. It could be killing FF

@WolfShadeauthorSep 20.2007 — #well for one, your

expression()

in the CSS will only work in IE and I'm really not sure why you are using that. It could be killing FF[/QUOTE]
I had found on a website, somewhere, that using "height:expression('133px');" will be used by IE and ignored by FF. Probably old information. It has been replaced with a ColdFusion conditional to use height only if the browser is IE. At least, that is what I uploaded to the server - it has yet to actually display that way. Cache is cleared, yet it keeps showing up with expression().

^{^_^{^}}

@WolfShadeauthorSep 20.2007 — #Okay.. expression() is finally gone. Still same issue, though.

@WebnerdSep 20.2007 — #I hate to pick a the code but why this?

display:table-row

and why

background:inherit

@WolfShadeauthorSep 20.2007 — #I hate to pick a the code but why this?

display:table-row

and why

background:inherit[/QUOTE]
Attempts to see if they affected change. Forgot to remove them.

I came here for advice/assistance/help, not criticism.

^{^_^{^}}

@WolfShadeauthorSep 20.2007 — #Nevermind.. I'm junking the DIV's and going pure table.

WebJoel, thanks for looking at my code. Hope to see you on here, another time.

^{^_^{^}}

@WebnerdSep 20.2007 — #That is not criticism, I was just asking what they were being used for. I don't know of how applying a table-cell display changes the layout of the DIV tags and wanted to make sure that they were not the issue.

Also, background:inherit is not very commonly used. I want to know if this code is generated by Dreamweaver or something of that sort.

I apologize if you took that as criticism but you really mis-interpreted my response. I was trying to be as helpful as possible and a lot of the syntax used in the page you need help with is not typical. If you explain "exactly" what you are trying to do, maybe I can show you a cross-browser approach that works without some of what appears to be extraneous markup.

@WebJoelSep 20.2007 — #If you could present in image form, a representation of the desired finished outcome. An image drawn in PowerPoint, PaintShop, Paint, whatever. Because I am not understanding the intent of the code, I cannot visualize the outcome.

What I see, is four blocks of text. Two are aligned to the left-side of the browser and two are aligned to the right-side of the browser. My screen resolution leaves about 1/3rd the screen-width 'gap' in the middle. Re-sizing down until the two-left and the two-right blocks of text meet, they do not overlap (surprising, I'd have predicted that they might overlap).

Then, -what? Is this all that there is? Is something supposed to happen on-hover?

This looks to me to be something that could be constructed with CSS if I knew what the intent was. ?

Also in #CSS _↴

style ol before the counter?Nav Transition Contentwrap Align

Success!

Help @WolfShade spread the word by sharing this article on Twitter...

Tweet This

DIV background color issue

13 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV background color issue

13 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #CSS _↴