CSS - Firefox: Iframe Css Background-color Problem!
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 Similar TutorialsHi all, I am trying to do something that I think is trivial, but just cannot seem to get this to work in IE! I am trying to draw an IFRAME that contains a gray background that contains a document that has a white background. The result is supposed to make the scrolling document in the IFRAME look like a white piece of paper with a gray border of 8 pixels. This works perfectly in Safari and Firefox, but no matter what I try, I cannot figure out how to get this to work in IE (IE8 specifically). Here is the code: PHP Code: <iframe name='monkey' src='poopy.html' scrolling='auto' frameborder='0' style='background-color:gray;width:500px;height:150px;'></iframe> And the document in the IFRAME is trivial PHP Code: <div style='padding:8px;border:1px solid black;background-color:white;'> This is a bunch of txt THis is a bunch of txt ... (repeat this text a bunch so you have a scrollbar) </div> As far as I can tell, IE implements the background-color attribute for IFRAMES, but it seems to ignore the color - either that or its whacked-out box model requires some kinda bizarre workaround that I cannot find. Thanks in advance for the help. -- Jon 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. 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 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 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> 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? 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 have a horizontal ul: Code: <ul> <li>blah</li> <li>loooooooooooooooooooooong blah blah blah</li> </ul> If I set the background color: Code: li { background-color: yellow; } It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height. Is that possible? I don't want to have a fixed value for the height Hi, My code validates apart from some Mozilla specific stuff at the bottom. Basically, in the socialbes-hover' part towards the end i have the background-color set to #F9F7ED which works fine in Firefox however in IE it always reverts back to the earlier code of a:hover { color: #F9F7ED; background-color: #006E2E and i cant seem to get it right whatever it try! please help me its driving me mad arghh lol thanks Code: .style1 a:active { color: #FFCC00; font-size: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style1 a:link { color: #FFCC00; font-size: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style1 a:visited { color: #FFCC00; font-size: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; } .style1 a:hover { color: #FFCC00; font-size: 8px; font-family: Verdana, Arial, Helvetica, sans-serif; } a:link { color: #D15600; text-decoration:none } a:visited { color: #D15600; text-decoration:none } a:hover { color: #F9F7ED; background-color: #006E2E } .style1 {color: #D15600} .style2 {font-family: Verdana, Arial, Helvetica, sans-serif} .style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; } .style9 {color: #D15600; font-size: larger; } /************Main Menu******************/ .menu a:link { color: #36393D; text-decoration:none } .menu a:visited { color: #36393D; text-decoration:none } .menu a:hover { color: #D15600; background-color: #F9F7ED } /************Comments******************/ .comments :link { color: #D15600; text-decoration:none } .comments :visited { color: #D15600; text-decoration:none; } .comments :hover { color: #36393D; background-color: #F9F7ED /************Sociables******************/ } .sociable-hovers { opacity: .4; -moz-opacity: .4; filter: alpha(opacity=40); background-color: #F9F7ED; } .sociable-hovers:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); color: #36393D; background-color: #F9F7ED; } Hello, I can't seem to figure out how to get the body of this page to be white... you can see the page at: www.brandontutmarc.com/vlr and the attached CSS is at: www.brandontutmarc.com/vlr/viva.css Here is what I'd like it to look like: http://www.brandontutmarc.com/vlr/vlr1.jpg Any help is GREATLY appreciated... So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site. So this problem only occurs in IE, of course! When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010 The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve. It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky. Any ideas why this is displaying this way...and only in IE?! 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... Nevermind, fixed. Changed Pixels into Percentages. Delete thread. hello mates, for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color. But i can't make the two cohabitate peacefully. :'( i've tried with divs, span and p, no matter what it does not work. here is the way i first thought it would work: Code: <div id="footer" style="clear:both;width:100%"> <div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div> <div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div> </div> any idea how to make this happen ? I am trying to assign a background to footer div, it appears fine with internet explorer, but it does not appear at all with firefox. http://www.refinethetaste.com/html/ 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. I am trying to create a very basic div and css template with 3 columns. I want 3 columns visible, and want to give a backgroundcolor to the container. When my columns gets higher (the left, middle or the right column), I want the div wich contains these 3 columns to get higher (and reveiling this by the background color). All goes well in Internet Explorer 6, and even 7... but Firefox seems to have problems with it. Can anybody help me out? The following code is used: PHP 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=iso-8859-1" /> <title>Test</title> <style type="text/css"> .container{ width:600px; background-color:#660066; height:auto; } .kolomlinks{ /*COLUMNLEFT*/ float:left; width:80px; background-color:#66FF33; padding:10px; } .kolommidden{ /*COLUMNMIDDLE*/ float:left; width:380px; border:dotted 10px; background-color:#FFFFCC; } .kolomrechts{ /*COLUMNRIGHT*/ float:left; width:80px; margin:10px; background-color:#FF0000; } </style> </head> <body> <center> <div class="container"> <div class="kolomlinks">Left</div> <div class="kolommidden">Middle<br /> <br /> The background color of the overall container doesn't get extended in firefox. </div> <div class="kolomrechts">Right</div> </div> </center> </body> </html> |