Background image disappears when div floated (FF) [Archive]

Click to See Complete Forum and Search --> : Background image disappears when div floated (FF)

rickl

11-02-2007, 09:49 PM

Hi everyone,
I have this problem in Firefox where the background image of the H3 elements (i'm doing image replacement) inside a div disappear when I float the div.

This is my CSS:

div#sponsors_wrapper {
float: left;
}
div#sponsors_wrapper #sponsors_name {
float: left;
}
div#sponsors_wrapper #sponsors_offering {
float: left;
}
div#sponsors_wrapper h2 {
height: 34px;
background: url(sponsors.png) no-repeat;
background-position: 0px 0px;
text-indent: -6000px;
font-size: 2em;
margin-bottom: 10px;
position: relative;
left: -3px;
}
div#sponsors_wrapper h3 {
background: white url(sponsors_h3.png) no-repeat;
font-size: 1.4em;
margin-bottom: 10px;
}
div#sponsors_wrapper h3#name {
text-indent: -6000px;
background-position: 0px 1px;
}
div#sponsors_wrapper h3#offering {
text-indent: -6000px;
background-position: 0px -14px;
}
div#sponsors_wrapper ul {
padding-left: 10px;
padding-top: 5px;
margin-bottom: 10px;
}

And this is the markup:

<div id="sponsors_wrapper">
<h2>Sponsors</h2>
<div id="sponsors_name">

<h3 id="name">By Name</h3>
<ul>
<li>lorem</li>
</ul>
</div>

<div id="sponsors_offering">
<h3 id="offering">By Offering</h3>
<ul>
<li>lorem</li>
</ul>

</div>
</div>

Can anyone suggest something?

Many thanks!

Fang

11-03-2007, 05:01 AM

The background images are visible with the code you have given.

rickl

11-04-2007, 06:11 PM

The background images are visible with the code you have given.

Hi, Fang. Sorry about that. I didn't include enough contextual code. The elements in question appear in the sidebar. Here's the markup:

<div id="sidebar">

<ul id="comments_accordion">
<li>
<h3><span>Lorem ipsum</span></h3>
<div>
<ul>
<li><a href="#" title="Lorem ipsum">Lorem ipsum</a></li>
</ul>
<h4><a href="#">Lorem ipsum</a></h4>
</div>
</li>
<li>
<h3><span>Lorem ipsum</span></h3>
<div>
<ul>
<li><a href="#" title="Lorem ipsum">Lorem ipsum</a></li>
</ul>
<h4><a href="#">Lorem ipsum</a></h4>
</div>
</li>
</ul>

<div id="flickrcontainer">
</div>

<div id="sponsors_wrapper">
<h2>Sponsors</h2>
<div id="sponsors_name">

<h3 id="name">By Name</h3>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</div>

<div id="sponsors_offering">
<h3 id="offering">By Offering</h3>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>

</div>
</div>

</div>

And here's the CSS:

* {
margin: 0pt;
padding: 0pt;
}

div#sidebar {
float: right;
width: 253px;
}

/* COMMENTS_ACCORDION
-------------------------------*/
ul#comments_accordion {
width: 253px;
}
ul#comments_accordion li ul {
padding-top: 5px; /* removing this makes column headings appear */
}
ul#comments_accordion li li {
padding-top: 5px; /* removing this makes one of the column headings (right) appear */
}

/* FLICKR
-------------------------------*/
div#flickrcontainer {
width: 253px;
height: 200px; /* reducing this makes column headings appear */
position: relative;
}

/* SPONSORS
-------------------------------*/
div#sponsors_wrapper {
float: left;
}
div#sponsors_wrapper #sponsors_name {
float: left; /* makes headings disappear */
}
div#sponsors_wrapper #sponsors_offering {
float: left; /* makes headings disappear */
}
div#sponsors_wrapper h2 {
height: 34px;
background: url(sponsors.png) no-repeat;
background-position: 0px 0px;
text-indent: -6000px;
margin-bottom: 10px;
position: relative;
}
div#sponsors_wrapper h3 {
background: white url(sponsors_h3.png) no-repeat;
margin-bottom: 10px;
}
div#sponsors_wrapper h3#name {
text-indent: -6000px;
background-position: 0px 1px;
}
div#sponsors_wrapper h3#offering {
text-indent: -6000px;
background-position: 0px -14px;
}
div#sponsors_wrapper ul {
padding-top: 5px;
margin-bottom: 10px;
}

As you can see from some of the comments in the CSS, depending on what you change, sometimes the headings will appear. I don't know exactly what the issue is though.

Here's what I've noticed about this page:
- if the list (of sponsors) is short enough it appears to work (less than 7 items)
- if difft secions are taken out of the sidebar, it appears to work
- if difft sections are taken out of sections of the sidebar it appears to work

By "appears to work" I mean the headings (background images) are visible. It would be nice to know what's causing this behavior because taking things out of the sidebar isn't really an option...

Thanks for any suggestions!

rickl

01-17-2008, 10:39 PM

Does anybody have a possible solution for this problem? It doesn't work in FF, but works fine in IE.

I've put the page online so you can see it:
http://tinyurl.com/3c87to

The section in question is under "Sponsors" If you view it in IE6 (don't look at in IE7--which has other problems right now), you can see how it's supposed to look. In Firefox, it doesn't appear.

Thanks for any help.

Centauri

01-18-2008, 04:31 AM

The problem may be encoding mismatch - the server is sendng the file with utf-8 encoding information in the headers, whilst the encoding on the page is set to ISO-8859-1. Suggest you change the page encoding declaration to utf-8 and see if that helps.

drhowarddrfine

01-18-2008, 09:15 AM

Validate your css for a list of errors there.

rickl

01-18-2008, 10:28 AM

rickl

01-18-2008, 10:29 AM

Validate your css for a list of errors there.

It's all valid XHTML. Thanks.

WebJoel

01-18-2008, 10:34 AM

It's all valid XHTML. Thanks. No, -it's not... If the previously-mention URL is still the same site: Screenshot image: :o

Centauri

01-18-2008, 10:57 AM

The W3C validator doesn't even pick those up.

This is a little strange, as the problem rights itself as soon as I fire up the css edit on the webdeveloper toolbar......

It may be something to do with the negative text indent to hide the text. Try the following, which makes the text small and coloured white to hide it instead of indenting :div#sponsors_wrapper h3 {
background: white url(sponsors_h3.png) no-repeat;
height: 14px;
margin-bottom: 10px;
font-size: 1px;
line-height: 1px;
color: white;
padding-left: 10px
}
div#sponsors_wrapper h3#name {
background-position: 0px 1px;
}
div#sponsors_wrapper h3#offering {
background-position: 0px -14px;
}

rickl

01-18-2008, 01:38 PM

No, -it's not... If the previously-mention URL is still the same site: Screenshot image: :o

oh yeah that's interesting. i use the w3c validator and it didn't show any of that...
:)

thanks for the heads up

rickl

01-18-2008, 01:43 PM

The W3C validator doesn't even pick those up.

This is a little strange, as the problem rights itself as soon as I fire up the css edit on the webdeveloper toolbar......

It may be something to do with the negative text indent to hide the text. Try the following, which makes the text small and coloured white to hide it instead of indenting

thanks for the suggestion, centauri. i'm not sure i'll get a chance to try it out, though, because i've gone ahead and put the whole thing into a table, which works fine. i've fought with it long enough and decided to just throw in the CSS towel. :)

thanks to everyone for helping out. i appreciate it.

i think in the future i will fall back on tables more quickly rather than repeatedly throwing my head against the CSS wall...

drhowarddrfine

01-18-2008, 05:10 PM

It's all valid XHTML. Thanks.
I said validate your CSS!

WebJoel

01-18-2008, 06:54 PM

... I use the W3C Validator and it didn't show any of that.. These ARE only "warnings", however, all too often a "warning" turns out to be a page-busting event... :eek: I would trust W3C over TIDY, but I PREFER "TIDY" over W3C for ease-of-use and thoroughness (even if it lets me occasionaly use the wrong !doctype)...

rickl

01-19-2008, 09:58 AM

I'll look into TIDY. Good to know. Thanks!