Jump to content

Firefox no background images showing

legacy800

By legacy800
in CSS

Recommended Posts

legacy800 Newbie

legacy800

Posted
Posted

All my background images seem to be gone when I preview this website in firefox, it works fine in internet explorer.I've tried looking up some solutions but nothing has worked so far. I validated both my css and html and they both are fine.I am pretty new to browser compatiblity and always previewed in IE so if someone can shed some light on this situation it would be appreciated.My html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Design N Creation - Home</title><link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="jquery.nivo.slider.pack.js" type="text/javascript"></script><script type="text/javascript">$(window).load(function() {	$('#slider').nivoSlider({		effect:'random',		slices:15,		animSpeed:500,		pauseTime:10000,		startSlide:0, //Set starting Slide (0 index)		directionNav:true, //Next & Prev		directionNavHide:false, //Only show on hover		controlNav:false, //1,2,3...		controlNavThumbs:false, //Use thumbnails for Control Nav		controlNavThumbsSearch: '.jpg', //Replace this with...		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src		keyboardNav:true, //Use left & right arrows		pauseOnHover:true, //Stop animation while hovering		manualAdvance:false, //Force manual transitions		captionOpacity:0.8, //Universal caption opacity		beforeChange: function(){},		afterChange: function(){},		slideshowEnd: function(){} //Triggers after all slides have been shown	});});</script></head><body><div id="container"><div id="maincontent">	<div id="header">        <a href="index.html" id="logo">logo</a>	<ul id="navigation">	  	  	<li class="home"><a href="index.html" title="home">HOME</a></li>            <li class="about"><a href="index.html" title="about">ABOUT</a></li>            <li class="portfolio"><a href="index.html" title="portfolio">PORTFOLIO</a></li>            <li class="blog"><a href="index.html" title="blog">BLOG</a></li>            <li class="contact"><a href="index.html" title="contact">CONTACT</a></li>	</ul>	</div>	    <div id="slider">		<img src="images/1.png" alt="" title="project 1" />		<img src="images/2.png" alt="" title="project 2" />		<img src="images/3.png" alt="" title="project 3" />		<img src="images/4.png" alt="" title="project 4" />	</div>        <div id="left_column">    	<h1>About</h1>    	<p>    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa mi, mollis ac placerat vulputate, semper 			 			quis metus. Donec pellentesque felis nec metus semper non congue justo blandit. Fusce a nisl nunc. Aenean 		 			ultrices aliquet adipiscing. <br />   			<br />    		Nam convallis egestas tincidunt. Nunc gravida ultricies purus at interdum. Donec nulla arcu, luctus vel lobortis 			eget, consectetur quis erat. Sed at vestibulum augue. Quisque metus tortor, ornare hendrerit tincidunt 	    	 			et,lobortis quis ligula. Duis quam ipsum, imperdiet a porttitor sed, commodo ac libero. Praesent eget eleifend    		diam.Quisque in adipiscing nisl. Nullam ut tortor arcu, rhoncus cursus orci. <br />    		<br />    		Morbi ullamcorper tempor mauris a condimentum. Maecenas vitae elit velit. Etiam dictum euismod dolor, vel  	 			 			consectetur nunc porta sit amet.    	</p>	</div>    	<div id="mid_column">    	<h1>Portfolio</h1>        <p>    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa mi, mollis ac placerat vulputate, semper 			 			quis metus. Donec pellentesque felis nec metus semper non congue justo blandit. Fusce a nisl nunc. Aenean 		 			ultrices aliquet adipiscing. <br />   			<br />    		Nam convallis egestas tincidunt. Nunc gravida ultricies purus at interdum. Donec nulla arcu, luctus vel lobortis 			eget, consectetur quis erat. Sed at vestibulum augue. Quisque metus tortor, ornare hendrerit tincidunt 	    	 			et,lobortis quis ligula. Duis quam ipsum, imperdiet a porttitor sed, commodo ac libero. Praesent eget eleifend    		diam.Quisque in adipiscing nisl. Nullam ut tortor arcu, rhoncus cursus orci. <br />    	</p>    </div>        <div id="right_column">    	<h1>Follow me on</h1>        <p>    		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa mi, mollis ac placerat vulputate, semper 			 			quis metus. Donec pellentesque felis nec metus semper non congue justo blandit. Fusce a nisl nunc. Aenean 		 			ultrices aliquet adipiscing. <br />   			<br />    		Nam convallis egestas tincidunt. Nunc gravida ultricies purus at interdum. Donec nulla arcu, luctus vel lobortis 			eget, consectetur quis erat. Sed at vestibulum augue. Quisque metus tortor, ornare hendrerit tincidunt 	    	 			et,lobortis quis ligula. <br />    	</p>    </div></div></div></body></html>

My css:

* {	margin: 0px;	padding: 0px;}a {	color: #fff;	text-decoration: none;	outline: none;}a:hover {	text-decoration: underline;}#container  {	width: 1000px;	margin: 0 auto;	text-align: left;}#maincontent {	width: 1000px;	background-image: url(images/Black_Texture___Ray_by_Ethenyl.jpg);}body {	color: #FFF;	font-family: Calibri;	background-color: #000;}h1 {	float: left;	position: absolute;	width: 230px;	font-size: 16pt;	padding: 10px;}p {	font-size: 8pt;	margin-top: 40px;	padding: 10px;}#left_column {	float: left;	width: 250px;	height: 350px;	margin-left: 100px;	background-image: url(images/column_bg.png);}#mid_column {	float: left;	width: 250px;	height: 350px;	margin-left: 25px;	background-image: url(images/column_bg.png);}#right_column {	float: left;	width: 250px;	height: 350px;	margin-left: 25px;	background-image: url(images/column_bg.png);}#logo {	background-image: url(images/logo.png);	float: left;	height: 75px;	width: 163px;	display: block;	text-indent: -9999px;	margin-left: 100px;	margin-top: 20px;}#navigation li{	display: block;	float: left;	list-style: none;	font-size: 16pt;	margin-left: 15px;	margin-top: 70px;}#navigation {	margin-left: 475px;}/* The Nivo Slider styles */.nivoSlider {	position:relative;	margin-left: auto;	margin-right: auto;	margin-bottom: 30px;	margin-top: 10px;}.nivoSlider img {	position:absolute;	top:0px;	left:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink {	position:absolute;	top:0px;	left:0px;	width:100%;	height:100%;	border:0;	padding:0;	margin:0;	z-index:60;	display:none;}/* The slices in the Slider */.nivo-slice {	display:block;	position:absolute;	z-index:50;	height:100%;}/* Caption styles */.nivo-caption {	position:absolute;	left:0px;	bottom:0px;	background:#000;	color:#fff;	opacity:0.8; /* Overridden by captionOpacity setting */	width:100%;	z-index:89;}.nivo-caption p {	padding:5px;	margin:0;}/* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a {	position:absolute;	top:45%;	z-index:99;	cursor:pointer;	background-image: url(images/arrows.png);	height: 34px;	width: 32px;	text-indent: -9999px;}a.nivo-nextNav {	background-position:-32px 0;	right:10px;}a.nivo-prevNav {	left:10px;}.nivo-controlNav a.active {	font-weight:bold;}

Link to comment
Share on other sites
legacy800 Newbie

legacy800

Posted
  • Author
Posted
Do you have a viewable demo of it?This is just a guess, but try usingbackground: url(images/image.jpg) no-repeat 0 0;
Tried doing that but it doesn't show any changes at all.I have just put it online here for others to check the differences with IE and FF.
Link to comment
Share on other sites
real_illusions Dedicated Member

real_illusions

Posted
Posted

Had a look in FF and IE8 and they look the same, except for part of the menu that sticks out to the right of the slideshow in IE8.Both the logo and the menu are hidden completely behind the top slideshow in FF, and majority of it is hidden behind it in IE8.In IE7 it looks like how it should look.So its not your background images - its your CSS. Its always best to build in Firefox - it should then work in others like Safari and Chrome and IE8, then make adjustments for IE7 and below, although IE6 is now been supported less and less.:)

Link to comment
Share on other sites
legacy800 Newbie

legacy800

Posted
  • Author
Posted

I have updated the slider to float aswell, the layout seems to be good now in both browsers.Can somebody give a good explanation why it is working now?One problem is that the div backgrounds are still not showing properly in FF, in IE I have opacity backgrounds(png files) behind my text while FF just display darkgrey background and no texture background(jpeg) in my maincontentbox either.So it's still refusing to show css backgrounds even when the rest of my css and html is good.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...