CSS - Confusing - Not Using Values ??

What are all of the properties does ie not support the auto value for? I know width and height are a couple, anymore?

Hey all,

I'm working on a collapsable menu thing, and the CSS is just getting ugly. I'm basically rewriting this fantastic little thing.

Code:

<dt class="m_an" onclick="javascript:show(\'m2\');">Menu 2</dt>
  <dd id="m2">
     <ul>
         <li><a href="x">M 2.1</a></li>
	 <li><a href="y">M 2.2</a></li>
    </ul>
</dd>	

<dt class="m_my" onclick="javascript:show(\'m3\');">Menu 3</dt>
  <dd id="m3">
     <ul>
         <li><a href="1">M 3.1</a></li>
	 <li><a href="2">M 3.2</a></li>
    </ul>
</dd>	

The css:
Code:

#menu {}

#menu dt 
{
	margin: 2px 0;
	height: 20px;
	line-height: 20px;
	text-align: left;
	padding-left: 10px;
	font-weight: bold;
	border: 1px solid gray;
}
#menu dd 
{
        border: 1px solid gray;
}

#menu li {
	text-align: left;
	padding-left: 20px;
	background: #fff;
}

#menu li a, #menu dt a 
{
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
}

#menu li a:hover, #menu dt a:hover 
{ 
        background: #eee; 
}

.m_an { background: #3cf; }
.m_my { background: #6f3; }

Now, what I'm trying to do is to get m2 and m3 (and the four or five others) to have different colored a:hovers. Thing is these pseudo-selector things screw with my head. Also, is there anyway I can fix up this rather spaghetti styled css and make it more elegant?

Thanks heaps,
Simon

I'm animating an element and have tried to do a simple css transition in jquery

$("#myelement").css('top','100');

But it wont respond unless that value is 0. I've been using these for months and suddenly 'top' and 'left' no longer respond to JS.

I'm trying to create a "sticky footer" as described in css-tricks.com. When I enter -150px, it is "greyed out". If I delete the -, it's OK. Using Bluefish. The code for the sticky footer doesn't work w/o the -150px value. Any ideas why negative values are not being accepted? Can't find any postings that mention this problem anywhere.

Is it bad css form to use negative values when you are working with relative positioning? I have a graphic intensive site that was drawn in photoshop and I am trying to code it. The graphics require exact placement but also need to move with the design if the browser window is re-sized, relative positioning will do this but I find myself having to use negative values on some of the graphics to have them place properly.

I know if I move a graphic above another in the html code the relative values will change but I am having problems figuring out what should go first, second, third... I know relative positioning deals with the regular flow of the page but when you are dealing with all graphics how do you know what to put first etc...

I hope I made sense and I wish I had an address for you to look at the page but I don't at the moment... Can anyone help?

Thank you,
Jen

I have something similar to the following:

<div id="outer">
<div id="inner">Stuff</div>
</div>

#inner {
top: -175px;
}

which lets me position background elements as needed so everything blends together well. The idea is that the outer layer background element needs to start lower than the inner layer and repeat until it contains the entire inner layer, and then stop.

However, since I shift the inner layer upwards 175px, it gets the top where it needs to be, but it seems like it leaves 175px of the outer background repeating at the bottom...I don't need this space at the bottom.

How can I remove it or make it disappear?

An old draft of the file can be seen at

Old Draft.

The outer layer is the "carpet" background that repeats down the side and fades off in each direction. It needs to start where it does so it doesn't overlap the faded walls (applied to body tag). However, I want the desk area starting where it is now rather than where the faded walls end (too low on the page), so I shifted it upwards... I want to get rid of all carpet below the desk area, but the outer div expanded to contain the inner div, then the inner div was shifted upwards out of the top of the outer div, but outer div bottom did not shift upwards as well.

Hello all!

I wasn't sure where to post this since I don't know where my problem lies, in css or php.

In a nut shell, when displaying values from mysql database in a css div, the data is displayed correctly 9 times out of 10, but there is always that one time it is messed up.

Thank you for your help. Let me know if you need to take a look at my code (it is pretty lengthy to be posted on here).

Ok If you go to:

http://www.zahra-zahra.com/innerPage.html

if you hover over the side menu (sub/subcontact)which are supposed to be nested lists.. you will see some alignment issue with the pink and the brown-ish..

also the nested list was moved a bit forward so i added margin:-0.5em; but IE doesnt like it and has moved the li further back..
relevant code:
PHP Code:
#sideMenu {
    margin-top:0.2em;
    float:left;
    clear:left;
    width:24%;
}
#sideMenu ul {
    float:left;
    width:100%;
    list-style:none;
    margin:0em;
    padding:0em;    
}
#sideMenu li {
    clear:left;
    background-image:url(images/site/backgrounds/sideLi.jpg);
    padding:0.4em;
    margin-bottom:0.1em;
}
#sideMenu ul li ul {    
    margin:-0.5em;
    padding:0em;
    margin-top:0.3em;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
#sideMenu ul li ul li {
    width:100%;
    background-image:url(images/site/backgrounds/sideLiLi.jpg);
}
#sideMenu a {
    text-indent:0em;
    text-decoration:none;
    color:#663333;
    margin-left:0em;
    font-size:1em;    
}
.nestedList a {
    text-indent:0em;
    padding:0.3em;
    padding-left:3em;
}
.nestedList a:hover {
    background-image:url(images/site/backgrounds/sideLiLiHover.jpg);
    background-position: -0.4em 0em; 
} 





HTML

PHP Code:
<div id="sideMenu">
        <ul>                
                <li><a href="">Contact</a>
                    <ul class="nestedList">
                        <li><a href="">sub</a></li>
                        <li><a href="">SUBcontact</a></li>
                    </ul>
                </li>
                <li><a href="">Return</a></li>
                <li><a href="">News</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">bout us</a></li>
                <li><a href="">Home</a></li>
        </ul>
    </div> 





just a side question i have in the above code a nested class.. why cant i do something like

.nestedList ul {

}

i tried that but it didnt work...

Hi guys,

I am attempting to create a rather complex background, which needs to 'stretch' in a certain place.

Here is my code; which currently works flawlessly in Firefox:

CSS
Code:

body {
	margin: 0px; padding: 0px; height: 100%; background: #AAAAAA;
}
#cont {
	position: relative; margin: 0px auto; top: 20px; width: 760px; height: 800px;
}
#titlet {
	position: absolute; top: 0px; left: 0px; width: 742px; height: 9px; background: url(img/titlet.png);
}
#titletr {
	position: absolute; top: 0px; left: 742px; width: 17px; height: 9px; background: url(img/titletr.png);
}
#title {
	position: absolute; top: 9px; left: 0px; width: 742px; height: 164px; background: url(img/title.jpg);
}
#titler {
	position: absolute; top: 9px; left: 742px; width: 17px; height: 164px; background: url(img/titler.png);
}
#bgnd {
	position: absolute; top: 173px; bottom: 336px; left: 0px; width: 742px; background: url(img/bgnd.jpg);
}
#bgndr {
	position: absolute; top: 173px; bottom: 336px; left: 742px; width: 17px; background: url(img/bgndr.png);
}
#clouds {
	position: absolute; left: 0px; bottom: 17px; width: 742px; height: 319px; background: url(img/clouds.jpg);
}
#cloudr {
	position: absolute; left: 742px; bottom: 17px; width: 17px; height: 319px; background: url(img/cloudsr.png);
}
#cloudb {
	position: absolute; left: 0px; bottom: 0px; width: 742px; height: 17px; background: url(img/cloudsb.png) no-repeat;
}
#cloudbr {
	position: absolute; left: 742px; bottom: 0px; width: 17px; height: 17px; background: url(img/cloudsbr.png) no-repeat;
}

HTML
Code:

<body>

<div id="cont">
<div id="titlet"></div><div id="titletr"></div>
<div id="title"></div><div id="titler"></div>
<div id="bgnd"></div><div id="bgndr"></div>
<div id="clouds"></div><div id="cloudr"></div>
<div id="cloudb"></div><div id="cloudbr"></div>
</div>

</body>

The problem relates to the 'bgnd' and 'bgndr' values. I have combined 'top' and 'bottom' to have the backgrounds tile in exactly the right place between the other div elements.

Is there a hack that can allow me to use this method in IE?

I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

Here's my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1024px;
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
}

#accounttypeselector { /* select personal or business to affect page display */
	height: 25px;
	background: #0000FF;
}

#servicesbar { /* container for user services */
	height: 30px; /* 30px should be adequate height */
	width: 100%;
}

#servicesbar-services { /* container for user services once logged in */
	float: left; /* push this to left side */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	float: left; /* should push this just beside services */
	width: 25%;
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #8B2323;	
}

#header { /*header for the site - will contain logo, search, and main navigation */
	float: left;
	width: 1024px;
	height: 100px;	
}

#header-logo { /* will include site banner/logo - will be located on left side */
	background: #ff0000;
	width: 50%;
	float: left;
}

#header-rightcol { /* column for search and main nav */
	width: 50%;
	float: left;
}

#header-rightcol-search {
	min-height: 50%;
	max-height: 50%;
	background: #7FFFD4;
}

#header-rightcol-navmain { /* navbar that will be located below header */
	min-height: 50%;
	max-height:-50%;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	height: 100%;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	float: left;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 60%;
	background: #66CDAA;
	float: left;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 25%;
	background: #8A2BE2;
	float: left;
}

#footer { /* footer to be located at bottom of wrapper */
	margin: 0 auto;
	position: relative;
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

and here's my basic html
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
		</div>
		
		<div id= "header" >
			<div id= "header-logo" >
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
			in dui. In eget elit. Praesent eu lorem.</div>
			
			<div id= "header-rightcol" >
				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
			</div>
			
		</div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" >
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.
			</div>
			<div id= "bodywrapper-main" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
			<div id= "bodywrapper-news" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
		
		</div>
	
	</div>
	
	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</body>
</html>

Thanks in advance and any suggestions would be greatly appreciated.

Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space.

Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead.

A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div.

Almost makes me pine for the IE5.0 broken box model...

p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements?