|
CSS - Container Div Background Img/color Not Showing
hello all. thanks for your time.
i am having some issues with a background image & color not showing up in a container div. here is the snippet from the CSS where the background image and color are defined. you can view the full CSS http://americanwalkincoolers.com/test/css/site.css Code: #container {
background: url('./img/faux_bg.gif') repeat-y top left #496d9d;
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
and the page is he http://americanwalkincoolers.com/test/index.html i am attempting to cheat on the layout by placing a background color/image that will make the right column extend the length of the page. currently the right column has a graphic that says "featured products" followed by a gap that runs the length of the container. can anyone help me? bonus points if you can explain to me why the BG color & BG image aren't showing up from the container. thanks again. Similar TutorialsHey guys, I've recently started working on my css and for some reason my background image isn't showing up in my container. Any idea why? CSS Code: Original - CSS Code /* CSS Document */ * { margin: 0; padding: 0; } body { font-size: 62.5%; background: #344149; } p, li { font: 1.2em/1.8em Tahoma, sans-serif; margin-bottom: 10px; } h1 { font: 2.0em Tahoma, sans-serif; color: white; height: 0px; } h2 { font: 1.8em Tahoma, sans-serif; color: green; margin-bottom: 10px; } ul { margin-left: 25px; } img { border: none; } #page-wrap { background: black; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto"); } #page-wrap #inside { margin: 10px 10px 0px 10px 10px; padding-top: 10px; padding-bottom: 10px; } #main-content { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; padding-left: 180px; padding-right: 180px; padding-top: 20px; } #header { background: #000000; text-align: center; } #left-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: left; padding-left: 15px; padding-top: 20px; } #right-sidebar { background: transparent url(/Images/Background_Content.jpg) no-repeat top right; width: 150px; float: right; padding-right: 15px; padding-top: 20px; } #footer { background: #267f23; text-align: center; padding-top: 20px; padding-bottom: 20px; color: white; } /* CSS Document */ It's the Background_Content.jpg that isn't loading for some reason. It resides in the Image folder located in the same directory as the html file. Oh and the reason I had it included so much was to test to see if it was just the main-content that wouldn't load it. The main content should include the left-sidebar and right-sidebar right? Please help! I've been working on converting to css for table-like layout. I have the three column variety with a header. Around all 4 is a container to keep things ship shape. My issue is that even though I've specified a background colour for the container it doesn't seem to override the body color making the column lengths uneven. 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" xml:lang="en" lang="en">
<head>
<title>mrhodges.net: A web site for Mr. Hodges classes</title>
<style type="text/css" >
body { background-color: #014e82;
text-align: center;
font-family: Georgia, serif;
}
#container { width: 90%;
margin: 10px auto;
background-color: #ffffff;
text-align: left;
}
#banner { background-color: #014e82;
padding: 1px;
}
#banner p.title { font-size: 2.5em;
color: #ffffff;
background-color: #014e82;
text-align: center;
margin: 0;
padding: 0 0 5px 0;
}
#banner ul { list-style-type: none;
text-align: center;
padding: 0 0 10px 0;
margin: 0;
font-family: Verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
}
#banner ul li { display: inline;
}
#banner ul li a { text-decoration: none;
padding: 0;
}
#banner a:link { color: #ffffff;
padding: 0;
}
#banner a:visited { color: #ffffff;
padding: 0;
}
#banner a:hover { color: #ffffff;
text-decoration: underline;
padding: 0;
}
#banner a:active { color: #54b818;
text-decoration: underline;
padding: 0;
}
#leftnav { float: left;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#leftnav ul { margin: 0;
padding: 0;
list-style-type: none; }
#leftnav a { display: block;
color: #049;
background-color: #fff;
text-decoration: none;
padding: 0 0 0 5px;
}
#leftnav a:hover { background-color: #ddd;
color: #049;
}
#rightnav { float: right;
width: 160px;
margin: 0px;
padding: 3px 5px 5px 5px;
background-color: #fff;
}
#middle { margin-left: 160px;
margin-right: 160px;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<p class="title">mrhodges.net</p>
<ul>
<li><a href="http://www.cbc.ca/news/">CBC News</a> |</li>
<li><a href="http://dictionary.reference.com/">Dictionary</a> |</li>
<li><a href="http://www.fmcsd.ab.ca">FMCSD</a> |</li>
<li><a href="http://www.google.ca">Google</a> |</li>
<li><a href="http://www.mymcmurray.com">mymcmurray</a> |</li>
<li><a href="http://www.theweathernetwork.com/weather/cities/can/Pages/CAAB0124.htm">Weather</a> |</li>
<li><a href="http://en.wikipedia.org/wiki/Main_Page.html">Wikipedia</a></li>
</ul>
</div>
<div id="leftnav">
<ul>
<li><a href="overview.html">Course</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="outline.html">Outlines</a></li>
<li><a href="outline.html#modules">Modules</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="rap.html">RAP Program</a></li>
</ul>
<br />
<ul>
<li>Safety</li>
<li>Consent</li>
<li>.pdf form</li>
</ul>
<br />
<ul>
<li><a href="dates.html">Dates</a></li>
<li><a href="dates.html#term">Term</a></li>
<li><a href="dates.html#plc">PLC Days</a></li>
<li><a href="dates.html#holi">Holidays</a></li>
<li><a href="dates.html#inter">Interviews</a></li>
<li><a href="dates.html#mod">Module</a></li>
<li><a href="dates.html#exam">Exam</a></li>
</ul>
<br />
<ul>
<li><a href="http://www.mrhodges.blogspot.com">Daily Log</a></li>
<li><a href="http://www.mrhodges.blogspot.com">Class Log</a></li>
</ul>
<br />
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">School</a></li>
<li><a href="contact.html">Mr. Hodges</a></li>
</ul>
<br />
</div>
<div id="rightnav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="middle">
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. </p>
</div>
</div>
</body>
</html>
Look at this page - http://certified.tmhdesign.com/about.asp I have a div called container, then in that div one called header, content_right, content_left, and footer. What is frustrating me is that I have to hard code a min-height for the left and right colums and if you scroll down you'll see where the background color of the body appears below the right column which I want to be white. When I specify the color of the container that does not fix the issue. Any help would be appreciated. Thanks. Hi all, I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox. Here's xhtml code: xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> Heres the CSS: css Code: Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; } /* CSS Document */ Thanks for your time! Hello, I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA! Here is the code for the MPE: <cc1:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="btnShowModalPop" PopupControlID="divPop" BackgroundCssClass="modalBackground" PopupDragHandleControlID="panelDragHandle" DropShadow="true"/> Here is the code in my css file: .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPop { background-color:Gray; border-width:3px; border-style:solid; border-color:Black; padding:0; width:250px; color:White; } .drag { background-color:#ff0000; cursor: move; border: solid 2px white; } I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly: #body div div { background: url(images/body_tr.gif) top right no-repeat; } #body div div div { background: url(images/body_bl.gif) bottom left no-repeat; } #body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; } #body div div div { background: url(images/body_bg.gif) bottom left no-repeat; } #body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; } #body .inner div { background: none; } I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P Edit/Delete Message My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag. I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up. Thanks in advance for any help! html code -> cosmosristorante dot com / ox / index.asp Can anyone give me an idea why the color for the background of the Wordpress site I am revising the css script shows up 2/3 the color I want and the top one third is remains the original color. There is no "wrapper" option to revise. This is the 3 lines that seems to determine those changes.. *************************************** body { background: #180033 url (1-default/bodybg.png) repeat-x top; } a { color: #9BCB65; } a:hover { color:#180033; } *************************************** Could the problem be "repeat-x top;" ???????? Big thanks to anyone who offers help. Edited because now that I posted I finally discovered the problem, I was missing a semi-colon after my width statement... The container should put a 1px solid border around the website, and it does in IE, however, in FF it just puts a border around the top couple pixels. Here is the website, http://www.sdtars.com/development/index.php I can't figure out how to get the #container's height to take on the height of the website. Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad Hi I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these. The following page shows the problem LINK And CSS The text in the container div leads off the bottom of the page. The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div. I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work. Any suggestions? Thanks Jake Hoping someone can help me out as I'm still pretty new to the whole web design thing. I'm using CSS to create a container wrapper. As you can see from the code I have a bottom, top and center image. When I was using JPEG images everything lined up correctly, however I needed to switch to PNG image files (to take advantage of transparency) and now the top and bottom sections of the wrapper are offset. Here is a live link: storrepictures.weebly.com/projects.html -Please find an image of the resulting problem he http://i.imgur.com/YnTS8.png -This is how it looks when I use JPEGs instead of PNGs: http://i.imgur.com/2WMFN.png Here is my CSS wrapper code: Code: #wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) top center no-repeat;
}
#wrappertbtm{
background: url(containerbtm.png) bottom center no-repeat;
padding-bottom: 65px;
}
And here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrappertop">
<div id="wrapper">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
<div id="wrappertbtm">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hi, my css is probably a mess as I've been hacking things together for a few days. my site:jasondaydesign.com I have a div where my content divs are contained. In firefox & chrome, the background for the div shows fine. In IE, the background does not show. I'm not sure where the css issue is that's causing this. Could someone point me in the right direction for solving this? Thanks! Hi: I have the following in my CSS file: PHP Code: #body { background: url('images/columns.gif') repeat-y; text-align: left; } The problem is that the background image is not showing up un MS Internet Explorer. It works fine in Firefox. Is this a bug? Do I need a hack? 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, 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? 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; } 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 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 |
|||||||