|
CSS - Background-image And -color Not Working In Firefox
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? Similar TutorialsI have just started writing a page and the first thing I did was establish a body background color and image. It works in IE but not FF. Can someone please give me a clue what is wrong. I have searched all the CSS books and the internet but I cannot find an answer. Thanks in advance. The URL is http://www.childrens-stories.me.uk/ 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> Hello all, When viewing in IE my background is dark red like it's suppose to be. When viewing the same site in Firefox the background is white. Firefox is not seeing that portion of code within my CSS file. Can someone shine some light for me? Thanks in advance!! Please help I need Please send me a message for URL. For some odd reason Dev won't allow me to post a link to my site for you. I have the following code, in the sidebar DIV in Firefox the background does not show up, it does in IE7. What have I done wrong? CSS code: Code:
#content {
margin-left: 25px;
background: #fff;
width: 990px;
padding: 15px 20px 20px 20px;
}
#blog {
padding: 0;
margin-right: 40px;
background: #fff;
width: 660px;
color: #545454;
float: left;
padding-top: 5px !important;
}
#sidebar {
width: 250px;
padding: 8px;
background: #ccc;
}
XHTML/HTML code: Code:
<div id="content">
<div id="blog">
blah blah blah
</div>
<div id="sidebar">
<h2>blah</h2>
blah blah blah
</div>
</div>
I've been looking it at for a while, and while it's probably something minor I'm just simple over looking, I can't figure it out. Everything works, is in the correct place, except the grey background (#ccc) isn't showing up on the sidebar. Im setting the background color of a division to #FFFFFF which in IE is perfectly white as you would expect. However in firefox it is coming out as a really faint green colour. Is this because of the way ive coded it or is this a problem with firefox? Hello there. I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE Can anyone help? .navbar { width: 960px; line-height: 30px; background-color: silver; z-index:100; display: block; clear: both; } .navbar ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:100; } .navbar ul li { display: block; position: relative; float: left; width: 120px; font-weight: bolder; z-index:100; } .navbar li ul { display: none; line-height: 20px; z-index:100; } .navbar ul li a { display: block; text-decoration: none; color: #48fc30; padding: 4px 15px 4px 15px; background: #silver; margin-left: 1px; } .navbar ul li a signup { background: #black; } .navbar ul li a:hover { background: #grey; } .navbar li:hover ul { display: block; position: absolute; } .navbar li:hover li { float: none; font-size: 11px; } .navbar li:hover a { background: #red; } .navbar li:hover li a:hover { background: #blue; } After years of developing, I finally decided to ditch the tables and use CSS properly for formatting. Things are going well, but I've run into a few odd problems. One is this one - I've chomped the page right down to illustrate the problem. In IE, the page renders as I'd hope, a bg color showing right across the page, with the left & right cols within that. In Firefox, the bg color renders, but STOPS where the left & right cols display. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hmmm...</title>
<style type="text/css">
<!--
body {
background-color: #403E3E;
margin: 0px;
padding: 0px;
}
#pagebodywrapping {
background-color: #A3AAAF;
margin: 0px;
padding: 0px;
width: 100%;
}
#pagebody {
margin: 0px auto;
padding: 0px;
width: 750px;
}
#pagebody .leftcol {
margin: 0px 0px 0px 0px;
padding: 0px;
width: 499px;
border-right: 1px solid #fff;
background-color: #FFF;
float:left
}
#pagebody .rightcol {
margin: 0px 0px 0px 0px;
width: 250px;
background-color: #5D757E;
float:left;
}
-->
</style>
</head>
<body>
<div id="pagebodywrapping"><br>
<div id="pagebody"><br>
<div class="leftcol"><br></div>
<div class="rightcol"><br></div>
</div>
</div>
</body>
</html>
I'm sure it's something very simple, but for the life of me, I can't figure it out. I've searched around to no avail either. ANY help would be very much appreciated. Thanks in advance. I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe.. the code for the iframe = Code: <iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="524" height="100%" src="news.php"></iframe> then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code: Code:
.bodyiframe {
background-color: #F4F4F4;
background-image: url(../images/bgiframe.gif);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}
It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help Hi; i don't known why background color does not cover over all the boxs in Firefox but IE does, could anyone help, please. my code as following Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
html,body{
padding: 0;
margin:0;
}
#container {
position: relative;
width: 796px; /* width + border for IE 5.x */
w\idth: 790px; /* real width */
height: auto;
border: 0px;
padding: 0;
margin-top: 10px;
margin-bottom:auto;
margin-left: auto;
margin-right: auto;
background-color:#f0f0ec;
}
#wrapper{
margin: auto;
border:0;
padding:0;
width: 640px;
height:auto;
}
.box{
border:0;
padding:0;
width:190px;
height:220px;
float: left;
margin-left:15px;
margin-top:20px;
background-color:#FFFF99;
color:#333333;
text-align:center;
overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
//in here i am goning to use while loop to select all the data from database, so i may have 30 boxs, or 50boxs.
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
<span class="box">
gskjhdlk JAHDSLKAJSHD ADHSLKAHDLKSA HASDLADSLK ADHSAlds
</span>
</div>
</div>
</body>
</html>
for some reason my background color won't show in firefox.. http://losemybreath.org/ take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas? this is the css Code: body {
margin: 0;
padding: 0;
background: #ECF0CD;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #666; }
#header {
margin-left: 25px;
width: 800px;
height: 524px;
background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
}
#center {
margin: auto;
width: 800px; }
#content {
width: 495px;
margin: auto;
text-align: left;
background: #BCD4B2; }
#blog {
float: left;
margin-left: 10px;
width: 290px;
text-align: justify;
display: inline;
background: #BCD4B2; }
#sidebar {
float: right;
margin-right: 10px;
width: 165px;
text-align: justify;
display: inline;
background: #BCD4B2;}
p {
font: 12px Arial, Helvetica, sans-serif;
color: #666;
margin-top: 0;
text-align: justify; }
h1 {
text-align: center;
background-color: #ECF0CD;
margin-bottom: 0;
padding-bottom: 0;
margin-top: 0;
padding-top: 0;
letter-spacing: 3px;
font-weight: bold;
font: 12px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #77936C; }
ul,li {
list-style-type: none;
margin: 0;
padding: 0; }
a:link, a:visited {
color: #669257;
text-decoration: none; }
a:hover,a:active {
color: #666666;
background: #ECF0CD;
text-decoration: underline; }
hr {
width: 100%;
color: #ECF0CD; }
.right {
float: right; }
textarea, select, input {
color: #666666;
background: #ECF0CD;
border: 0px none;
margin: 0px;
padding: 2px;
font: 10px Arial, Helvetica, sans-serif; }
#question {
border: 1px solid #ECF0CD;
padding: 2px; }
Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here? Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
I'd like to have a table with a background image that does not repeat, and if the table extends below the height of the image, I want a solid background color. But this does not seem to work. Why? Code:
table.main {
border: 1px solid #01228a;
border-collapse: collapse;
background: url(./images/bluehills.jpg) no-repeat top
background-color: #01228a;
}
[EDIT] Sorry, the problem is while the bg image is there and does not repeat, the solid bg color isn't there... Imagine that the background image is supposed to fade into the background color... Thanks... Hi everyone. developing a page where I use CSS style #content { width: 760px; background-image: url(didyouknow1.png); background-repeat: no-repeat; background-color: #cccccc; height: 300px; } Page background is #cccccc. When I add the div tag <body> <div id="content">Content for id "content" Goes Here</div> </body> and preview in IE 6 there is a lighter color gray AROUND the image . Have not tested in FF. IMAGE Attached. Any suggestions how to make the tranparency really work? Looks fine in Dreamweaver8. Thanks Roman Hi, I have a DIV container and inside there, I have another DIV used to contain images throughout the web site to float left, right - whatever. I set the background color to this container DIV (figure1) and my image went missing (in IE , Firefox displayed it correctly ). Does anyone have any ideas as to why or how I can fix this? Thanks. Code:
<div id="figure1">
<h2>Figure 1. The infectious path of rabies virus</h2>
<div class="imgspot" style="margin: 0 20px 0 0;"><img src="images/ani_raccoon_rabies_virus.gif" width="188" height="122" /></div>
<ol>
<li>Raccoon is bitten by a rabid animal.</li>
<li>Rabies virus enters the raccoon through infected saliva.</li>
<li>Rabies virus spreads through the nerves to the spinal cord and brain.</li>
<li>The virus incubates in raccon's body for apporximately 3-12 weeks. The raccoon has no signs of illness during this time.</li>
<li>When it reaches the brain, the virus multiplies rapidly, passes to the salivary glands, and the raccoon begins to show signs of the disease.</li>
<li>The infected animal usually dies within 7 days of becoming sick.</li>
</ol>
</div>
Hi all, I am having difficulty with the background for an image link. I have the following: Code:
<!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" xml:lang="en" lang="en">
<head>
<title>Test page</title>
<style type="text/css">
a:hover { color: #FFFFFF; background: #0000ff; text-decoration: none; }
a:hover img { background: none; }
.box { background: #00ff00; padding: 1em; }
.box img { border: 0; }
</style>
</head>
<body>
<div class="box">
<p><a href="#"><img src="images/a1a8aa6a43.jpg" alt="" /></a></p>
<p><a href="#">Text link</a></p>
</div>
</body>
</html>
I have a global style for links that change the background color and the color of the text. However, this also changes the background color of an image link which makes it look odd. I attempted to fix this with Code: a:hover img { background: none; }
But this does not fix the issue. Any thoughts? I am using XHTML strict because the CMS I am using forces me to an XHTML stylesheet. Also, this is just a snippet of the code of the actual page but the bug is present in this snippet. The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? hello. this has us stumped. here is the page: http://www.praxishosting.com/dev/csstest/testindex.htm it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through). any suggestions? the style code for the background container is rather simple: Code:
#container {
width: 750px;
background: url(../media/bkgrd.gif) repeat fixed center top;
margin-right: auto;
margin-left: auto;
height: 100%;
}
I have two bits of code that work in IE, but not in Firefox, and I have no idea why! They both use the background-image property Here is the first: Code:
a.bio {
display: block;
width: 150px;
height: 26px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio.jpg);
background-repeat: no-repeat;
}
a.bio:hover {
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\btn_bio_h.jpg);
}
Code: <a class="bio" href=""></a> And the second: Code:
td.window
{
width:670;
height:31px;
background-image:url(C:\Apache 2.2\htdocs\_empaudio\test\images\window_nav_repeat.jpg);
background-repeat:repeat-x;
padding:0px;
margin:0px;
border-spacing:0px;
border:0px;
}
Code: <td class="window"></td> Does ANYONE know why this is happening?? I'm trying to get a repeating background image to show up in my Firefox browser but can't get it to work. Grateful if somebody can tell me what is wrong with this code? Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#header {
background:#A31135 url(images/fill.gif) repeat-x fixed;
height:100px;
}
</style>
</head>
<body>
<div id="header">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
Many thanks. hello all, I am not very well experienced with CSS, so, please, bear with me. this question may sound stupid. I have a web page that is comprised of one main table. Except for the banner on top (1 column), the main row has two columns. These columns will comprise of: 1) left column: Menu 2) right column: page content. In the left column, the menu, I would like to have a background image sitting behind the menu. I have attempted to use CSS to put an image behind the menu: Code: .menu_back {background: url('Pics/Web/menu_background.jpg') no-repeat #ffffff;}
And my html looks like this: Code: <table width = "100%" class = "menu_back"> This does not work. After scouring the web without any real success , I humbly ask for ur help. I am designing for Firefox hoping it will work fine under IE. Thanking u in advance. |
|||||||