CSS - Container Div Background Color Issue

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

Hey 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 */


 * {


     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;


 } 

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!

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>

Good Day,

I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added.

This is what the page looks like with limited text:

http://lisawesselsphotography.ca/services.html

It looks ok from here

This is what it looks like when a greater amount of text is inserted:

http://lisawesselsphotography.ca/services-test.html

Not so cool looking

Here is my css:

Code:

html, body {
		height: 100%;
}

body {
		margin: 0px;
		padding: 0px;
		background: #11121A url(images/bg1_01.jpg) repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #5A5D6A;
}

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
}

p, ol, ul {
		margin-top: 0px;
}

ol, ul {
		margin: 0px;
		padding: 0px;
}

p {
		line-height: 220%;
}

strong {
		font-weight: normal;
		color: #FFFFFF;
}

a {
		color: #A40000;
		outline: none;
}

a:hover {
		text-decoration: none;
}

a img {
		border: none;
}

img.border {
}

img.alignleft {
		float: left;
		padding-right: 25px;
}

img.alignright {
		float: right;
}

img.aligncenter {
		margin: 0px auto;
}

hr {
		display: none;
}

ul.style1 {
		margin: 0px;
		padding: 0px 0px 0px 15px;
}

ul.style1 li {
		padding: 3px 0px;
}

ul.style1 span {
		color: #FFFFFF;
}

/** WRAPPER */

#wrapper-content {
		background: url(images/bg1_02.jpg) repeat-x left top;
}

#wrapper {
		background: url(images/bg1_05.jpg) repeat-y center top;
}

#wrapper-bgtop {
		background: url(images/bg1_03.jpg) no-repeat center top;
}

#wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg1_04.jpg) repeat-y center bottom;
}

.homepage #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.homepage #wrapper-bgtop {
		background: url(images/bg3_01.jpg) no-repeat center top;
}

.homepage #wrapper-bgbtm {
		background: url(images/bg3_02.jpg) no-repeat center bottom;
}

.single #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.single #wrapper-bgtop {
		background: url(images/bg2_01.jpg) no-repeat center top;
}

.single #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg2_02.jpg) no-repeat center bottom;
}

.gallery #wrapper {
		background: url(images/bg4_03.jpg) repeat-y center top;
}

.gallery #wrapper-bgtop {
		background: url(images/bg4_01.jpg) no-repeat center top;
}

.gallery #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		padding-bottom: 60px;
		background: url(images/bg4_02.jpg) no-repeat center bottom;
}

.container {
		width: 900px;
		margin: 0px auto;
}

.clearfix {
		clear: both;
}

/** HEADER */

#header {
}

/** LOGO */

#logo {
		width: 300px;
		height: 174px;
}

.homepage #logo {
		width: 300px;
		height: 350px;
}

#logo h1, #logo p {
		margin: 0px;
		line-height: normal;
		text-indent: -9999em;
}

#logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 174px;
		background: url(images/homepage02.png) no-repeat left top;
}

.homepage #logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 350px;
		background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}		
		
}

/** MENU */

#menu {
		height: 45px;
		padding: 15px 0px 0px 40px;
}

#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: normal;
}

#menu li {
		float: left;
		padding: 0px 30px;
}

#menu a {
		float: left;
		display: block;
		height: 23px;
		margin: 0px;
		padding: 6px 0px 0px 0px;
		line-height: 1;
		letter-spacing: -1px;
		text-decoration: none;
		text-transform: uppercase;
		text-shadow: #270000 -1px 2px 3px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
}

#menu a:hover {
		text-decoration: underline;
}

#menu .active {
		background: url(images/subpage1_02.jpg) repeat-x left top;
}

/** PAGE */

#page {
}

/** CONTENT */

#content {
}

.homepage #content {
		height: 290px;
		background: url(images/homepage022.jpg) no-repeat center top;
}

.gallery #content {
		padding: 0px 45px;
}

.single #content {
		padding: 100px;
}

/** SIDEBAR */

#sidebar {
}

/** FOOTER */

#footer-wrapper {
		height: 200px;
		background: url(images/bg1_06.jpg) no-repeat center top;
}

#footer {
		padding-top: 40px;
}

#footer p {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		line-height: 220%;
		color: #31343F;
}

#footer .column1 {
		float: left;
		width: 575px;
}

#footer .column2 {
		float: left;
		width: 50px;
		height: 82px;
		background: url(images/subpage1_03.jpg) no-repeat center top;
}

#footer .column3 {
		float: right;
		width: 275px;
		text-align: right;
}

#footer .copyright {
		padding-top: 5px;
		font-size: 10px;
		color: #252732;
}

#footer .copyright a {
		color: #252732;
}

.box-style {
}

.box-style .title {
		margin: 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 28px;
		font-weight: bold;
		color: #FFFFFF;
}

.box-style .byline {
		margin: -10px 0px 30px 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		color: #363945;
}

/*  GALLERY   */

#slideshow {
}

#gallery {
		position: relative;
		width: 804px;
		height: 337px;
		margin: 38px 0px 50px 0px;
}

#gallery .slide {
		width: 634px;
		height: 337px;
		position: absolute;
		left: 85px;
		top: 0px;
		background: url(images/gallery_01.jpg) no-repeat left top;
}

#gallery .output {
		position: absolute;
		top: 17px;
		left: 17px;
}

#gallery .border {
		width: 600px;
		height: 300px;
		position: absolute;
		top: 17px;
		left: 17px;
		background: url(images/gallery_borders.png) no-repeat left top;
}

#gallery .captions {
		width: 600px;
		height: 55px;
		position: absolute;
		left: 17px;
		top: 262px;
		background: url(images/gallery_caption.png) repeat left top;
		font: 12px Arial, Helvetica, sans-serif;
		text-transform: uppercase;
}

#gallery .captions p {
		margin: 0px;
		padding: 22px 0px 0px 0px;
		line-height: 1;
		text-shadow: #000000 0px 2px 0px;
}

#gallery .captions .left {
		float: left;
		padding-left: 20px;
		color: #FFFFFF;
}

#gallery .captions .right {
		float: right;
		padding-right: 20px;
		color: #777777;
}

#gallery .prev, #gallery .next {
		display: block;
		width: 68px;
		height: 106px;
		position: absolute;
		top: 116px;
		text-indent: -9999em;
}

#gallery .prev {
		left: 0px;
		background: url(images/gallery_02.jpg) no-repeat left top;
}

#gallery .next {
		right: 0px;
		background: url(images/gallery_03.jpg) no-repeat left top;
}

#gallery-thumbnails {
		width: 750px;
		margin-left: 30px;
}

#gallery-thumbnails ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
}

#gallery-thumbnails li {
		float: left;
		display: block;
		width: 120px;
		height: 60px;
		padding: 15px;
		position: relative;
}

#gallery-thumbnails img {
}

#gallery-thumbnails .border {
		display: block;
		width: 130px;
		height: 70px;
		position: absolute;
		left: 10px;
		top: 10px;
		background: url(images/gallery_borders.png) no-repeat left bottom;
}

#gallery-thumbnails .active .border {
		background-position: -130px 100%;
}

Hey guys

I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container.

Here is the page in question: http://srh.com/taxgirl/

There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages.

Here are the CSS links:
http://www.srh.com/taxgirl/srh2008.css
http://www.srh.com/taxgirl/css/mainsrh.css
http://www.srh.com/taxgirl/css/srh_index.css

Code:

#contentcontainer {
	position: absolute;
	z-index: 3;
	width: 740px;
	left: 11px;
	top: 505px;
	right: 11px;
	height: auto;
	margin-bottom: 70px;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
}

Code:

#contentbg {
	background-image: url(../images2/required/layout/contentbg.png);
	background-repeat: repeat-y;
	background-position: center top;
	overflow: visible;
	position: relative;
	width: 760px;
	top: 55px;
	height: 900px;
	left: 1px;
	right: 0px;
	bottom: 65px;
	z-index: 2;
	margin-bottom: 63;
}
#contentcontainterfooter {
	height: 15px;
	width: 760px;
	position: relative;
	left: 1px;
	right: 0px;
	z-index:3;
}

Here is the HTML:
Code:

 <div class="contentbg" id="contentbg">    <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div>
<div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div>

The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved.

If anyone could help I would be forever greatful

Please take a look and let me know if you have any advice.

Thanks you so--o much!
~beth.

ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for

To all that read: Have a fantastic day and thank you for your time.

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

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.

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 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?

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 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;
}

On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops.

Here's the main css behind it:
#slogan
{
border-bottom:2px solid black;
border-right:2px solid black;
border-left:2px solid black;
background-color:#ABAABB;
font-family:comic sans ms;
width:40%;
}

Attactched is the screenshot from IE and firefox.

How can I make it look like it does in IE for all browsers (i.e., what is the correct code?)

The full code can be seen here.

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've been trying various fixes with my template, so that the grey background color in the sidebar, extends beyond the content to the bottom of the page.

Alas... nothing is working.

Here's my code:

Code:

#l_sidebar { color: #cccccc; background-color: #3a3a3a; width: 160px; float: left; float: left; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#l_sidebar p{
        margin: 0px;
	line-height: 16px;
        padding: 0px 0px 5px 0px;
	}
#l_sidebar h2 {
	color: #ffbfea;
	font-size: 18px;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	list-style: none;
	padding: 10px 0px 10px 0px;
        margin: 0px;
	}


#l_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#l_sidebar li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#l_sidebar ul li {
	list-style: none;
	margin: 0px;
	padding: 6px 0px 5px 0px;
	}
	
#l_sidebar ul li a {
	color: #c04080;
	text-decoration: none;
	}

#l_sidebar ul li a:hover {
	color: #c04080;
	text-decoration: underline;
	}


#r_sidebar { color: #c04080; background-color: #3a3a3a; width: 160px; float: right; position:relative; margin-top: 0; margin-bottom: 20px; padding: 0 15px 15px 15px; }
#r_sidebar p{
        margin: 0px;
	line-height: 16px;
        padding: 5px 0px 10px 0px;
	}
#r_sidebar h2 {
	color: #ffbfea;
	font-size: 18px;
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	list-style: none;
	padding: 10px 0px 10px 0px;
        margin: 0px;
	}

#r_sidebar ul {
	list-style: none;
	margin: 0px;
	padding: 0px 0px 20px 0px;
	}
	
#r_sidebar li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#r_sidebar ul li {
	list-style: none;
	margin: 0px;
	padding: 6px 0px 5px 0px;
	}
#r_sidebar ul li a {
	color: #c04080;
	text-decoration: none;
	}

#r_sidebar ul li a:hover {
	color: #c04080;
	text-decoration: underline;
	}