CSS - Td Background Not Working

I searched google to see if there was a fix for this problem, and found a few hits, however, the solutions were not solutions. I tried them, yes the backgrounds of my clear .png's were still being filled with some random color.

Is there anyone than can tell me how to make a .png's background clear in internet explorer?

Am trying to solve an annoying IE problem:

I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas?

The code is:

Code:

#item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }

I'm trying to create a tiered vertical navigation menu and I'm nearly there. Everything works correctly in FF but in IE the background-position property on the current menu item fails to position the bullet image. Removing the property displays it but at the margin which is set to 0px.

I'm not that savvy with CSS so if there's a better approach to this I'm open to suggestions.

Thanks for your help!

Open in FF to see how it's supposed to work:
Open in IE to see problem.

Here's the HTML

Code:

<div id="Menu">
<div id="nav_header">

   <div id="text">

            
		    Admissions & Financial Aid

            </div>


</div>

<ul id="nav_level_1">

         <li id="submenu"><a href="../index.php">Applying to Union</a></li>

			<ul id="nav_level_2">

               <li id="nav_active"><a href="index.php">Types of Admission</a></li>

			<ul id="nav_level_3">

               <li><a href="Transfer.php">Transferring to Union</a></li>

         <li><a href="Early.php">Early Decission</a></li>


         <li><a href="Regular.php">Regular</a></li>

         <li><a href="international.php">International Admission</a></li>

         <li><a href="aop_heop.php">AOP/HEOP</a></li>

         <li><a href="Medical.php">Eight-year Medical</a></li>

         <li><a href="Law.php">Six-year Law</a></li>

         <li><a href="MBA.php">Five-year MBA</a></li>


         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

			<li><a href="../Applications.php">Apply Online</a></li>

         <li><a href="../Forms/index.php">Download Application Materials</a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

            <li><a href="../../FAQs/index.php">Have a Question?</a></li>


         <li><a href="../../Financial_Aid/index.php">Financial Aid</a></li>

         <li><a href="../../Events/index.php">Events/Programs & Visiting</a></li>

         <li><a href="../../interviews.php">Interviews</a></li>

         <li><a href="../../PerfectSchool/index.php">Tips for College Search</a></li>

         <li><a href="../../About/index.php">Admissions Staff</a></li>


         <li><a href="../../AlumniAdmissions/index.php"></a></li>

         <li><a href="../../Media/index.php"></a></li>

         <li><a href="/union/admissions/Viewbook/index"></a></li>

         <li><a href="/union/admissions/Alumni/index"></a></li>

         <li><a href="../../sample.php"></a></li>

         <li style="line-height:0px;font-size:0px;">*</li>

		 </ul>

   

</div>

Here is the pertinent CSS

Code:

/* Style for three levels of unordered lists */
#Menu #nav_level_1 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: #d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_2 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

#nav_level_3 {
    list-style-type:none;
    width: 200px;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#e5dece;
    line-height:17px;
    word-wrap: break-word;
}
/* End unordered list base styles */

/* To get indented, wrapping, text that's cross browser compatible
   we need to additionally style the unordered lists and line items under each top <ul>
*/

#nav_level_1 li {
    margin-left:20px;
}

#nav_level_1 li ul {
    margin-left:-20px;
}

#nav_level_2 li {
    margin-left: 40px;
}

#nav_level_2 li ul {
    margin-left:-40px;
}

#nav_level_3 li {
    margin-left:60px;
}

#nav_level_1 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 4px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 20px;
}

#nav_level_2 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 24px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 40px;
}

#nav_level_3 #nav_active {
    background-image: url(http://waterfall.union.edu/images/navigation/nav_current.gif);
    background-repeat: no-repeat;
    background-position: 44px;
    background-color: #f2ede1;
    margin-left:0px;
    padding-left: 60px;
}

#Menu #submenu {
    list-style-type: circle;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#d2c6aa;
    line-height:17px;
    word-wrap: break-word;
}

#submenu2 {
    list-style-type:circle;
    margin-left: 0px;
    padding-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color:#ded4bc;
    line-height:17px;
    word-wrap: break-word;
}

Hi everyone,

I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore.

Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus.

When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image.

So what doesn't work?
Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7...

Please help me...!!

I've attached the relevant code, added comments and colored the parts that I think might cause the problem.

html:

Code:

	<div id="globalnav">
    
		<ul id="menu1">
        	<li id="nav_home"><a href="../home/" title="Home">home</a></li>
        	<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
      		<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
		</ul>

	  	<ul id="menu2">
       	  <li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
       	  <li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
   		  <li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
	  	</ul>
        
    </div>

css:

Code:

@charset "utf-8";

/* English Menu bar */

/* Box for the entire menu (two rows of ul) */

#globalnav	{
	height: 130px;
	width: 675px;
	}

/* Create box and put background image for each menu line */

#globalnav ul#menu1	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu1.jpg) top left no-repeat;
	padding: 0;
	position: relative;
	margin: 0 0 5px 0;
	}

#globalnav ul#menu2	{
	height: 62px;
	width: 675px;
	background: transparent url(../images/menu2.jpg) top left no-repeat;
	margin: 0;
	padding: 0;
	position: relative;
	}
/* Boxes for each link square on the menu */

#globalnav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	width: 75;
	}
	
#globalnav li, #globalnav a {
	height: 62;
	display: block;
	}
	
 #globalnav a {
	line-height: 62px;
	text-decoration: none;
	text-indent: -9999px;
	display: block;
} 

/* Define the area on the background image of the ul which coressponds to each link box */

#nav_home		{left: 0; width: 75px;}
#nav_about		{left: 225px; width: 75px;}
#nav_recruit 	{left: 525px; width: 75px;}
#nav_company	{left: 150px; width: 75px;}
#nav_clients	{left: 375px; width: 75px;}
#nav_contacts	{left: 600px; width: 75px;}

/* Maybe the next part is unnecessary... */

#nav_home		{background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about		{background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit	{background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company	{background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients	{background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts	{background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}

 /* Hovered menu items  */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */ 

#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;} 

/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */

body#home #nav_home			{background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about		{background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit	{background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company	{background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients	{background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts	{background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}

By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6.

Oh and I'm using transitional DTD. is that ok?

Hi,

I wanted to make active page link as bold and blue. When I hover the menu/link it works but when I click the menu item/link it doesn't. Here is my script. Please help its driving me crazy.



#menu {
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 14px;
font-weight: none;
position: absolute;
height: 27px;
top: 60px;
left: 0px;
width: 100%;
padding: 0px;
color: #000000;
background-color: #eee
}

a:link {
font-weight: none;
text-decoration: none;
color: #000;
}

a:visited {
font-weight: none;
text-decoration: none;
border-bottom: 1px dotted #369;
color: #000;
}

a:hover {
text-decoration: underline;
font-weight: bold;
border-bottom: 1px solid #036;
color: blue;
}

a:active {
text-decoration: underline;
font-weight: bold;
border-bottom: 1px solid #036;
color: blue;
}


#menu a:active {
text-decoration: underline;
font-weight: bold;
border-bottom: 1px solid #036;
color: blue;
}

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

I'm trying to set the background image of my header and for some reason its not being applied at all.

CSS:
Code:

#header
{
    background: url('../Images/Master/Header_Background.jpg');
    color: White;
    width: 1000px;
    height: 150px;
    position: relative;
}

The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing.

Thanks.

Disregard pot

I simply transposed li and a tag

thanks anyway...

The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left.

Know why?

I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox.

css code for the body tag is:

body { background-color: #0d005e;
background-image: url('images/bgmain.jpg');
background-repeat: repeat-x; }

Any thoughts?

Hi,

I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why?

CSS:
Code:

body {
	font-family : Arial, Helvetica, sans-serif;
	font-size: 16px;
	background: #330000;
	text-align:center;
	margin: 0; 
	padding: 0
}

#mainarea {
	background-image:
	url('alexandertea_bg_v03.jpg');
	width: 719px;
	height: 650px;
}

HTML:
Code:

<body>
	<div class="topbar">
		<img src="images/lemonreghome.gif" id="home">
		<img src="images/lemonregstory.gif" id="story">
		<img src="images/lemonregwheretobuy.gif" id="wheretobuy">
	</div>
	<div id="mainarea">
		Hellow
	</div>
</body>

I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?

Thanks,
Carlos

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
  <div id="navbar">
    <p>testing</p>
    <p>testing</p>
    <p>testing</p>
  </div>
</div>
</body>
</html>

My CSS


Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #000;
	margin-top: 17px;
	margin-bottom: 15px;

}
#header {
	background-image: url(images/header.jpg);
	margin:0 auto;
	height: 167px;
	width: 810px;
	background-repeat: no-repeat;
}

#maincontent {
	background-image: url(images/coatedmetalsm.jpg);
	background-repeat: repeat;
	margin:0 auto;
	width: 810px;
	height: auto;
}
#navbar {
	float: left;
	width: auto;
	position: relative;
}

I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this?

The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever.

http://www.area51entertainment.co/index.php?about

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.