CSS - Background Color With Div Width

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?

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

With IE, the background of SELECT elements is not respecting the CSS file setting. But IE does respect the CSS for the INPUT element. Netscape 7.1 and Mozilla Firefox work correctly for SELECT and INPUT.

Here is a snippet from my stylesheet file:

SELECT
{
FONT-WEIGHT: normal;
BACKGROUND: beige;
COLOR: darkgreen
}
INPUT
{
FONT-WEIGHT: normal;
BACKGROUND: beige;
COLOR: darkgreen
}

I have tried #FFFFD8 and #F5F5DC as alternatives to the name "beige" for the SELECT entry. Result is always white. Yet my text boxes show properly as beige so I am confused about why that name is ignored for SELECT elements. Note that I can change the entry to something basic like BACKGROUND: yellow and that displays correctly (but I don't want yellow - I want beige - like the INPUT element).

These SELECT and INPUT elements are always in some table such as:
<td class=genericinputleft>Starting Date<select name=dd1 etc.

Could there be a cascading problem in IE ? Here is the CSS:

.genericinputLeft
{
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: black;
FONT-FAMILY: Arial;
text-align: left;
vertical-align: top
}

I have tried commenting out the BACKGROUND entry from the class above but that does not seem to help. Thanks.

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?

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

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

for some reason my background color won't show in firefox..

http://losemybreath.org/

take a look in IE and then in FF, I can't for the life of me figure out why it's not working.. any ideas?

this is the css
Code:

body {
	margin: 0;
	padding: 0;
	background: #ECF0CD;
	text-align: center;
	font: 12px Arial, Helvetica, sans-serif;
	color: #666; }
	
#header {
	margin-left: 25px;
	width: 800px;
	height: 524px;
	background: url(http://www.losemybreath.org/images/greenlayout.jpg) no-repeat;
	}
	
#center {
	margin: auto;
	width: 800px; }
	
#content {
    width: 495px;
	margin: auto;
    text-align: left;
	background: #BCD4B2; }
	
#blog {
	float: left;
	margin-left: 10px;
	width: 290px;
	text-align: justify;
	display: inline;
	background: #BCD4B2; }
	
#sidebar {
	float: right;
	margin-right: 10px;
	width: 165px;
	text-align: justify;
	display: inline; 
	background: #BCD4B2;}

p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #666;
	margin-top: 0;
	text-align: justify; }
	
h1 {
	text-align: center;
	background-color: #ECF0CD;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	padding-top: 0;
	letter-spacing: 3px;
	font-weight: bold;
	font: 12px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #77936C; }
	
ul,li {
	list-style-type: none;
	margin: 0;
	padding: 0; }
	
a:link, a:visited {
    color: #669257;
    text-decoration: none; }

a:hover,a:active {
    color: #666666;
	background: #ECF0CD;
	text-decoration: underline; }
	
hr {
	width: 100%;
	color: #ECF0CD; }
	
.right {
	float: right; }
	
textarea, select, input {
	color: #666666;
	background: #ECF0CD;
	border: 0px none;
	margin: 0px;
	padding: 2px;
	font: 10px Arial, Helvetica, sans-serif; }
	
#question {
	border: 1px solid #ECF0CD;
	padding: 2px; }

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

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:

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


 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;


 } 

Thanks for your time!

Hi,

I have a simple table

<table id="sometable">
<tr>
<td>
<a href="link1">link1</a>
<td>
<a href="link2">link2</a>
</table>

with a style sheet
table#sometable {width: 100%;}
table#sometable a:hover{background-color: #A9A9A9;}

What I want is on a hover the whole cell changes color, not just the link. How can I do this? Also should I be using a table in the first place?

Thanks

Colin

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.

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).