CSS - Printing Background-color???
OK - I know all about the media="print" attribute. But I don't know how to force a background color (styled in a div tag; ie "background-color: black;") to print when the webpage is printed. I would think this would be a fairly common requirement but have not stumbled upon it.
Also, it probably doesn't matter but I have been using Javascript to add the divs to the page dynamically, so I don't know if that would have any effect. Probably not. Any help would be appreciated. Similar TutorialsIs there a way to forcefully print the background of a table cell? I am generating an attendance list, and it would be kinda nice if it would print the backgrounds, just a simple grey shading to seperate the lines. Having an issue with the background color in a div. The color shows up in I.E. but not in Firefox. I have a div with a width of 100%. Inside the div is an unordered list with two list items. Here is the css: div#nav { width: 100%; margin: 0; background-color: #EAE9E4; } #nav ul {margin: 0; padding: 0; } #nav li { list-style: none; float: left; margin: 0; padding: 0; width: 15%; font-size: 11px; line-height: 20px; white-space: nowrap; } Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color. Any help appreciated. Hey Guys! I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script. If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction? Thanks! Here is a link to my page: shipswatchdotcom/forum/vanilla/aaa.html Here is the css script: Code: #Body { margin: 0; width: 99.9%; position: relative; background: #F6F6F2; } #Head { background: #B8D4B8; padding:0; margin: 20px 20px 0; text-align: left; position: relative; } div.Popup h1, div.Popup h2, div.Connect h1, div.Connect h2 { background: #F6F6F2; border-bottom: 1px solid #3b5998; } .Banner { padding: 10px; text-align: left; position: relative; background: #F6F6F2; } .Banner ul { background: #B8D4B8; padding: 0; margin: 0; } .Banner ul li { display: inline; padding: 0; margin: 0; } .Banner ul li a { font-weight: bold; padding: 3px 6px; font-size: 11px; color: #336633; display: inline-block; } .Banner ul li a:hover { background: #E5F0E5; } .Banner ul li a.SignOut { font-weight: normal; position: absolute; top: 10px; right: 10px; } .Banner ul li a span { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 1px 2px 0 1px; background: #F6F6F2; border-right: 1px solid #F6F6F2; border-bottom: 1px solid #F6F6F2; color: #F6F6F2; font-size: 9px; position: relative; top: -3px; } #Content { float: none; width: auto; margin: 0 280px 0 10px; background: #F6F6F2; } #Panel { float: right; margin-right: 10px; background: #F6F6F2; } #Panel div.SearchBox input.InputBox { width: 200px; margin-right: 4px; background: #F6F6F2; } div.SearchBox { margin-bottom: 6px; } body.Profile div.SearchBox { display: none; } body.Profile #Content { float:none; width: auto; margin: 0 10px 0 280px; background: #F6F6F2; } body.Profile #Panel { margin: 0 0 0 10px; background: #F6F6F2; } form.Activity textarea { width:99%; background: #F6F6F2; } #Foot div { width: auto; background: #F6F6F2; } body.Post #Content { width: auto; margin:0 20px; background: #F6F6F2; } #ConversationForm textarea.MultiComplete, #ConversationForm .TextBox, #MessageForm textarea, div.Comment div.CommentForm, div.Comment div.CommentForm textarea, div.CommentForm textarea, #DiscussionForm input.InputBox, #DiscussionForm textarea { width:99%; background: #F6F6F2; } #ConversationForm form { border: none; } div.Preview div.Message, ul.MessageList div.Message { clear: none; } #DiscussionForm form { background: #F6F6F2; border: 1px solid #ccc; } div.MessageForm, div.Tabs { background: #F6F6F2; border-bottom:1px solid #ccc; } /* Tabs */ div.Tabs { background: #F6F6F2; padding: 0; border-bottom: 1px solid #aaa; } div.Tabs ul { padding: 0 8px; white-space: nowrap; } div.MessageForm { padding: 8px 8px 5px; } div.MessageForm div.Tabs { padding: 0 8px; } div.Tabs li a, div.Tabs li a:link, div.Tabs li a:hover, div.Tabs li a:active, div.Tabs li a:visited { font-size: 11px; margin: 0; border: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background: #F6F6F2; color: #336633; text-decoration: none; padding: 8px 10px; line-height: 11px; } div.Tabs li a:hover { text-decoration: underline; } a.Active, div.Tabs li.Active a { background: #F6F6F2; color: #336633; margin: 0; border: 1px solid #aaa; border-bottom: none; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; display: inline-block; font-size: 12px; line-height: 12px; font-weight: bold; text-decoration: none; padding: 6px 10px; position: relative; top: 1px; } div.Tabs li a span { line-height: 1; font-size: 80%; padding: 0 3px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; font-weight: normal; background: #F6F6F2; color: #4A7023; margin: 0 0 0 4px; } div.DiscussionsTabs div.SubTab { font-size: 11px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-top: 1px solid #aaa; background: #F6F6F2; margin:0; padding:4px 8px; } div.HeadingTabs ul { margin: 8px 0 0; } body.Discussion a.Bookmark { margin: 6px 2px; } div.Preview { border: 1px solid #aaa; background: #F6F6F2; margin:0 0 8px; padding: 8px; } .Foot { background: #F6F6F2; border: none; } div.MorePager a, div.MorePager a:link, div.MorePager a:visited, div.MorePager a:active, div.MorePager a:hover { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; background: #F6F6F2; border: none; color: #4A7023; line-height: 1; padding: 0; text-decoration: none; } div.MorePager a:hover { color: #4A7023; text-decoration: underline; } body.add #Content { margin: 0 10px; background: #F6F6F2; } /* Panel Boxes */ #Panel div.Box { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background: #F6F6F2; padding: 0; } div.Box h4 { color: #4A7023; } ul.PanelActivity, ul.PanelInfo { border-top:1px solid #ccc; } ul.PanelActivity li, ul.PanelInfo li, ul.PanelInfo li.Active { background: #F6F6F2; border-bottom: 1px solid #ccc; } ul.PanelInfo li.Active { background: #F6F6F2; } #Status { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #eee; color: #000; line-height: 1.6; padding: 3px 6px; margin: 0 0 8px; } body.Profile ul.PanelInfo { border: #F6F6F2; } body.Profile ul.PanelInfo li { margin: 0; padding: 0; } body.Profile ul.PanelInfo li a { font-size: 12px; display: block; padding: 0 6px; background: #F6F6F2; } body.Profile ul.PanelInfo li a:hover { background: #F6F6F2; } /* Sign In Page */ body.Entry #Content { text-align: center; margin: 0 auto !important; } body.Entry #Content div.Box { background: #F6F6F2; border: 0; } div.Methods { border-left: 1px solid #ccc; } /* Messages */ div.DismissMessage { background: #F6F6F2; border: 1px solid #ccc; padding:6px 8px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } div.DismissMessage a.Dismiss:hover { color: #000; } div.Warning { background: #d00; border: 1px solid #b00; color: #F6F6F2; text-shadow: 1px 1px 1px #444; } div.Warning a.Dismiss { color: #F6F6F2; } #Content div.Box { color: #000; background: #F6F6F2; border: 1px solid #F6F6F2; } body#dashboard_entrycontroller_signin div.Box { border: none; } /* Autocomplete */ .ac_results { border: 1px solid #d7d8da; color: #000; border-top: 0; background-color: #F6F6F2; } .ac_results li { border-bottom: 1px solid #d7d8da; } .ac_lastitem { border-bottom: 0 !important; } .ac_results strong { background: #F6F6F2; } .ac_over strong { background: #F6F6F2; } .ac_over { background: #3b5998; color: #fff; } Hi there people, I have a question about CSS but before I start off asking this question I'll introduce myself. I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer". Ok so now you know me a little, I'll start off asking my question. Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it). So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes? Tnx, Dwight i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color. is there any way that i can set so that their choice will stay throught their surfing ? any thoughts ? hanks Hi, I have made a page using <div> tags. <div id="page"> <div id="leftmenu"> </div> <div id="mainarea"> </div> </div> My problem is that sometimes, the leftmenu is longer than the main area(1) and sometimes its the opposite- the main area is longer than the leftmenu(2). I want them both to be of the same height. (3) How can I do this? Plz Help! I have pasted the style codes for the 3 tags below. (1) (2) (3) #mainarea { background-color:#FFFFFF; float:left; position:relative; right:0pt; width:630px; } #leftmenu { background-color:#EEEEEE; float:left; left:0pt; position:relative; width:140px; } #page { background-color:#FFFFFF; position:relative; width:770px; } Hi, I am trying to apply a background color to an item other than the body but I cannot make it display in IE 6 or 5.5. I have tried applying it to both <div>'s and <p>'s. Does IE not support the background-color property outside of the page background? i have a problem dynamically setting the html background color when i initially set it with css. if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks 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 three "buttons" that are essentially <div> elements on a page made to look like a button. I would like to make the background color change for the button on the "hover" state, but for some reason the only part of the background that changes on the hover state is the area only behind the text. Here's my code. I'd like the whole background area to change, anyone know what I'm doing wrong? Code: .prioritycontainer { width: auto; float: left; display: inline; margin: 0px 0px; padding: 10px 0px; } .prioritybutton { float: left; width: 150px; height: auto; display: inline; margin: 0px 20px 0px 0px; padding: 3px 3px 3px 3px; background-color: #978047; border: solid 1px #CCBC77; color: #fff; font-weight: bold; text-align: center; vertical-align: middle; } .prioritybutton a:link { color: #fff; text-decoration: none; } .prioritybutton a:visited { color: #fff; text-decoration: none; } .prioritybutton a:hover { color: #fff; background-color: #A19058; text-decoration: none; } .prioritybutton a:active { color: #fff; background-color: #A19058; text-decoration: none; } Markup on .html page is as follows: Code: <div class="prioritycontainer"> <div class="prioritybutton"><a href="one.htm">One</a></div> <div class="prioritybutton"><a href="two.htm">Two</a></div> <div class="prioritybutton"><a href="three.htm">Three</a></div> </div> Any help would be very helpful. Thanks, Brian 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... I want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color? (I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point) Thanks, Beth I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS 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 Hello All. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666. How do i do this? So far i've only be able to change background colors of element tags, which is not what i need. This was the Example give for this particular step. Edit: i tried to link a picture for a visual. For some reason its blocked to new members. Any help would be appreciated. Here is my code: Code: body { background-color: yellow; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; } None of the attributes such as background color, margins, border, padding are showing up when I test it out. Can someone help me? Can someone look at my site at http://www.personalhurricanecenter.....com/index.php? using Internet Explorer? The problem is that on the initial load, the background of the main section (white in the middle) is fine, even though I had to drop the padding to 3em. You'll notice if you minimize and then maximize the window, resize it, or click on the "submit" button on the upper-right (which will redirect you back to this page) that the background turns blue. If you scroll down, then the lower portion is white. If you scroll back up, the background miraculously turns white again. But the section that remains visible during scrolling stays blue. Also, you can select the text in the blue and then deselect it and it'll be white! This does not occur in Netscape or Firefox. Can someone tell me what in the world is the deal? I've spent a week getting this layout set so I can move on and it's holding me up. Thanks. Tim P.S. I have my background color set to blue in the body section of my css, and the main background color set to white. Those are the only bg color configurations (except for link options). Howdy, Okay, this is driving me nuts...i have the background-color set the same for the header and the footer, only the header is displaying darker than the footer. I've been going over it with a fine-toothed comb, but can't find the problem. here's the site and here's the css; Code: /* Graphix Plus V 4.0 Styles */ h1 { font-family:arial; font-size:16px; font-color:#006696; font-weight:bold; } h2 { font-family:arial; font-size:14px; font-color:#006696; font-weight:bold; } body { padding:0px; margin-top:0px; background-image:url(images/bground-pattern.gif); background-color:#FFFFFF; font-family:arial; font-size:12px; color:black; text-decoration:none; text-align:left; border: 1px solid #E5E5E5; } .contentarea { background-color:#FFFFFF; padding:6px; border: 1px solid #E5E5E5; } .flankers { background-color:#C6C6C6; padding:4px; border: 1px solid #E5E5E5; } .header { background-color:#006696; padding:4px; background-image:url(images/gp_v4_header.gif); background-position:top left; background-repeat:no-repeat; } a.mainnav:link { font-family:arial; font-size:12px; color:black; text-decoration:underline; } a.mainnav:visited { font-family:arial; font-size:12px; color:black; text-decoration:underline; } a.mainnav:hover { font-family:arial; font-size:12px; color:#006696; text-decoration:underline; } /* MAIN MENU LIST STYLE BEGINS - UL class = 'NAV'*/ ul#nav, ul#nav ul { margin: 0; padding: 0; list-style: none; width: 100%; border-bottom: 1px solid #E5E5E5; background-image: url(http://www.graphixplus.com/images/no-pic.gif); background-color:#C6C6C6; } ul#nav li { position: relative; } li ul { position: absolute; left: 99%; top: 0; display: none; background-color: #006696; } ul#nav li a:hover { display: block; text-decoration:none; color:#E5E5E5; background-color:#006696; } ul#nav li a { display: block; font-family:arial; font-size:11px; text-decoration: none; color: #006696; padding: 1px; border: 1px solid #E5E5E5; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul#nav li { float: left; height: 1%; } * html ul#nav li a { height: 1%; } /* End */ ul#nav li:hover ul, ul#nav li.over ul { display: block; } /*MAIN MENU LIST STYLE ENDS */ /* FOOTER STYLES */ .footer { padding:10px; background-color:#006696; font-family:arial; font-size:10px; color:#c6c6c6; text-decoration:none; border: 1px solid #E5E5E5; } a.footnav:link { font-family:arial; font-size:10px; color:#c6c6c6; text-decoration:underline; } a.footnav:visited { font-family:arial; font-size:10px; color:#c6c6c6; text-decoration:underline; } a.footnav:hover { font-family:arial; font-size:10px; background-color:#E5E5E5; color:#006696; text-decoration:underline; } /* end of footer */ Any help is greatly appreciated! Take a look at the main menu on this site: http://www.infund.net Why doesn't the grey stretch across the entire table? Here's the code I have: Code: a.mainlevel:link, a.mainlevel:visited { width: 100%; background: url(../images/bluebug.png) no-repeat; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; font-size: 11px; text-align: left; padding-left: 30px; background-color: #c2c2c2; margin-bottom: 1px; white-space: nowrap; text-align:left; } a.mainlevel:hover, a.mainlevel:hover { text-decoration: underline; background: url(../images/redbug.png) no-repeat; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; vertical-align: middle; font-size: 11px; font-weight: bold; color: #8B1414; text-align: left; padding-left: 30px; background-color: #c2c2c2; width: 100%; white-space: nowrap; margin-bottom: 1px; text-align:left; } What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? What is wrong with this? I can't seem to see any of the background colors in Firefox or Camino? I have tried setting the background color in the body, and by enlosing the rest of the elements within a containing "main" div... but neither seem to work. Any ideas? http://buffalonationsmuseum.ca Right now the property is just "background" but I have tried... background-color: |