homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS background in Firefox
Problems displaying CSS backgrounds in firefox
El_Matador

5+ Year Member



 
Msg#: 3178681 posted 2:46 pm on Dec 5, 2006 (gmt 0)

I've been having problems with the css background being displayed in firefox, the main problem being the background isn't showing up!

It works fine in I.E, which seems weird, as normally any problems I have are the opposite.

I cant post any code as i'm not on the comp with the code and the site is not live yet. I know it sounds pretty vague as i cant point to specific code, but im just wondering if anyone instinctively knew what the problem could be?

Any help would be greatly appreciated!

 

Geoffrey james

5+ Year Member



 
Msg#: 3178681 posted 3:05 pm on Dec 5, 2006 (gmt 0)

Would really help to see code...I will wait until then.

Geoffb

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3178681 posted 3:50 pm on Dec 5, 2006 (gmt 0)

This is almost always a case where you've got some container that you've assigned a background to, and then the immediate child elements of that container are all floated. For example:

<div id="container">
<div id="thisIsFloated">...</div>
<div id="thisIsFloatedToo">...</div>
</div>

Floating an element takes it out of the normal flow, so in the example above "container" is essentially empty, so no background will be shown. IE6 will incorrectly make "container" still contain the floated children, which is why the background shows up in IE.

To fix this, add something that clears the floats after them. For example:

<div id="container">
<div id="thisIsFloated">...</div>
<div id="thisIsFloatedToo">...</div>
<br class="endOfSection">
</div>

Then your styles would include:

.endOfSection { clear: both; }

Since the br is not floated, "container" still contains it. And since the br is set to clear both, it must appear below any floats. Therefore, it will appear as though "container" still contains the floated elements.

Another solution may be to float "container" as well. But this generally makes it harder to center.

Hope that helps.

El_Matador

5+ Year Member



 
Msg#: 3178681 posted 1:23 pm on Dec 6, 2006 (gmt 0)

Thanks for the help guys.Problem is solved now.

I took over a site and have been trying to change the CSS style, which was a bit mish-mash. Seemed the problem was something to do with background-repeat and/or background-position.

Thanks again though!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved