CSS - Background Color And Image Won't Show In Firefox
I 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/ Similar TutorialsI 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? I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white. The following is the code I'm using in the body selector.. not much places where something could be going wrong. css Code: Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }
The link to the page is he http://montanlaw.com I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips? Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to. Thanks in advance for any help, chip19 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. 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. 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. 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? 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> <body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! 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> 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> 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 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. 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 My css code Code: #menu {width:172px; padding: 0; font-family: Verdana, Arial, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #333;} #menu ul {border: 1px black solid; list-style: none; padding: 0; margin: 0 0 1 0; background-color: #d1d1d1;} #menu li .menu_box {background-image: url('./images/menu_fill.gif'); margin-left: 200px;} #menu li {border: none; margin: 0;} #menu li a {display: block; padding: 5px 5px 5px 0.5em; background-color: #FFFFFF; text-decoration: none; width: 100%;} My html code Code: <div id='menu'> <ul> <li class='menu_box'><img src='./images/menu_news.gif' alt='' /></li> <li><a href='{$url}'>+ Home</a></li> <li><a href='{$url}about.php'>+ About Nascar Interior</a></li> </ul> <ul> <li class='menu_box'><img src='./images/menu_services.gif' alt='' /></li> <li><a href='{$url}portfolio.php'>+ Portfolio</a></li> <li><a href='{$url}enquiry.php'>+ Enquiry</a></li> </ul> </div> For some reason I can't get menu_fill.gif to fill the <li> with the class menu_box. Is there something wrong with my code? Hi, I have a page where I am including a background image via CSS. It looks fine when viewed in a browser, but when I print it the background does not show up. I have my stylesheet include set to both screen and print: <link rel="stylesheet" type="text/css" href="includes/css/form.css" media="screen, print"> The CSS code in question that sets the background image is: #title{ background: url(../../images/title_bg.gif); width: 398px; height: 52px; text-align: right; } <div id="title"> <div class="titleText"><cfoutput>#FormDETAIL.strTitle#</cfoutput></div> </div> Why can I not see this background image when I print the page?? Hello all! I'm having difficulties... in IE, showing background image works perfectly, however, on FireFox it does not show the background image... SAMPLE CODE: Code: #header385 { width: 1009px; margin: auto; background-image:url(http://www.zadarsport.com/20pozadina_385.png); background-repeat:repeat-y; } #kraj { width: 1009px; margin: auto; background-image:url(http://www.zadarsport.com/20kraj.png); background-repeat:repeat-y; z-index:-1; } i do not use height option because it's depending on how many words and images article has, however, it works in IE example: http://www.zadarsport.com/x.php please check #kraj and #header385 and try to help me PLEASE... thanks! Hello, Im using a separate style.css file to define everything through the site... ive put in this code: Code: .sideheadline {font-family:Verdana,Sans-serif; font-weight:bold; color:#FFFFFF; background-color: #003366; background-image: url(images/bg.gif); background-repeat:repeat; background-attachment:fixed; font-size:10px; } and connected to this line: Code: print "<tr class='sideheadline'><td>Look at the rest too</td></tr>"; But nomatter what i try the image wont show, i tried several images and theyre loadable from the urlbar... so the image works Now i went to w3schools and tested with the online editor... there this exact code works, but then when i copy it to my site it wont! Im using dreamweaver for a editor... Hi, I'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this? Regards, Nina |