CSS DIV background issue in Firefox only - help!

Discussion in 'CSS' started by thechunger, Jul 2, 2008.

0
  1. #1
    Hello,

    I am having an issue with DIV background image or background color for that matter -- they will not appear in Firefox only. In IE it is appearing as expected. (I've tried the .clearfix:after method to address this problem to no avail.)

    Please see the sample code below and offer any insight if possible - your assistance is greatly appreciated!

    (For the sake of simplicity, I've added the CSS directly to the html page.)

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page language="C#" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
	*{
		margin:0;
	}
	
	
/* LAYOUT - main body of page */
#wrap {
	overflow:hidden;
	min-width:770px;
	max-width:975px;
	margin: 0 auto;
	position:relative;
	}
	

/* LAYOUT - HEADER */
/*#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}*/
#header {
	height:58px;
	/*background: #ffff00 url("images/header/128898_background.gif") repeat-x 0 100%;*/
	background: #0F2B3F url("css/images/header/49528_background.gif") repeat-x 0 100%;
	margin: 0 0 0 0;
	padding: 0 0 0px 0px;
	/*border:thin;
	border-color:red;
	border-style:dotted;*/
	}


	#coLogo {
		height:58px;
		/*background: transparent url("images/header/128898.gif") no-repeat;*/
		background: transparent url("css/images/header/49528.gif") no-repeat;
		font:200% arial;
		letter-spacing:-.05em;
		margin:0 0 0 0;
		padding:3px 0;
		color:#FFFF00;
		/*border:thin;
		border-color:aqua;
		border-style:dotted;*/
	}
}


/* RadTabStrip */
#menu {
	height:29px;
	background: #ffff00 url("css/images/nav_bar.gif") repeat-x;
	padding: 0;
	margin: 0 0 20px;
	list-style: none;
	/*border:thin;
	border-color:yellow;
	border-style:dotted;*/

	}

	
	

	
</style>
	
</head>
<body>


<div id="wrap">

	<div id="header">
		<div id="coLogo"></div>
	</div>

	<div id="menu">
		BACKGROUND IMAGE/COLOR IS NOT APPEARING HERE IN THIS "menu" DIV IN FIREFOX ONLY!!
	</div>

</div>



</body>
</html>
    Code (markup):
     
    thechunger, Jul 2, 2008 IP
  2. amollimaye

    amollimaye Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I tried to see if I can do something...but there does'nt seem to be any problem in the code....
    May be You should try apply things like float:left or clear:both;
    I don't know how but it works sometimes in such kind of problems.
     
    amollimaye, Jul 2, 2008 IP
  3. Cobnut

    Cobnut Peon

    Messages:
    184
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You have a rogue closing } in your code above /* RadTabStrip */ so the #menu definition isn't being read by Firefox, perhaps IE is more forgiving.

    Jon
     
    Cobnut, Jul 2, 2008 IP
  4. thechunger

    thechunger Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    unbelievable. thanks for taking notice of that - much appreciated!
     
    thechunger, Jul 2, 2008 IP