CSS - How To Overflow A Div With Dynamic Child Elements

Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other.

I tried the Code:

margin 0px auto;

which works if the child is smaller, but it doesn't seem to work in this case, any other ideas?

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!

How do I distinguish <li> that have child from the one that does not in an unordered list, using CSS?

I wrote a little div based expandable tree but am having trouble setting some of the conditional styling when a div has children.

What I'd like, is that when a div has children, the "font-weight" should be set to bold. Ideally, I'd also like to use the "div:after" property to append a '>' indicating that the div has children, but that's not critical.

I tried the following but it didn't work right:

Code:

/* Styles the child, not the parent */
div.tnode > .tnode {
	display: none;
	font-weight: bold;
	}

/* Doesn't do anything */
div.tnode:after > .tnode {
	content: '>';
	}

And here's the basic css with html

Code:

<html>
	<head>
		<style>
			/* Node container styles */
			div.tcontainer {
				width: auto;
				height: auto;
				font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
				font-size: 12;
				color: black;
				padding: 5 5 5 30;
				}
			
			/* Node styles */
			div.tnode {
				display: inherit;
				padding: inherit;
				}
			
			div.tnode:hover {
				cursor: pointer;
				}
			
			/* Node child styles */
			div.tnode > .tnode {
				display: none;
				font-weight: bold;
				}
			
			div.tnode:hover > .tnode {
				display: block;
				}
			
			/* doesn't work
			div.tnode:after > .tnode {
				content: '>';
				}
			*/
		</style>
	</head>
	<body>
		<div class='tcontainer'>
			<div class='tnode'>North America
				<div class='tnode'>USA
					<div class='tnode'><img src='http://images.infoplease.com/images/states_imgmap.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Canada
					<div class='tnode'><img src='http://www.infoplease.com/images/mapcanada.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Mexico
					<div class='tnode'><img src='http://www.infoplease.com/images/mmexico.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
			</div>
		</div>
	</body>
</html>

Any help appreciated

Thanks

Ken

Hey, all!

I'm having a seemingly simple problem... and I'd really appreciate if you guys could help me out! I have no idea how to do what I want done, but I know it's possible.

I want to give every <tr> in <table class="forumList"> a 'border-bottom: 1px solid #000;' style.... except for the last <tr>. HOWEVER, if a new table is created, I want it to start showing the border-bottom again... until the last <tr> in the table. How would I go about doing this?

Is there any way to change the background image of an element that is inside the current one? Kinda like this.child.style.backgroundImage = ""?

Not sure if this would be more of a javascript question, if so sorry.

I have an a tag with an ID and I want to change the background position of the child element which is an input button

Code:

<a href="javascript:;" id="buttonLeft" class="fromButtInput" onMouseOver="buttHover(this)" onMouseOut="buttOff(this)" >
	<input type="submit" id="buttonRight" value="Submit" border="0" />
</a>

The "buttHover(this)" offsets the background image of the a tag. I can't figure out how to target the <input> inside without affecting all the other buttons.

Hi,

i am trying to get first-child to work in ie7 but i am not sure why it wont recognise it or overwrite the css. it works fine in every other browser apart from ie7:

Code:

<div id="container">
<h4></h4>
<p></p>
<h4></h4>
<p></p>
</div> 

what i am trying to do is remove the border-top on my first h4. i have tried many different variations:

Code:

#news-container h4:first-child {
    border-top: none;
}

i have also added first-child to my parent div but that still wont solve it. could some one please advise me where i am going wrong.

thanks in advance

http://weightlossforever.ca/


Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it.

Thoughts?

I have the following code:
Code:

<div class="Outer">
	<div class="Inner">
		Text one
	</div>
</div>
<div class="Outer">
	<div class="Inner">
		Text two
	</div>
</div>

I have the following CSS
Code:

.Outer{
width:150px;
float:left;
}
.Inner{
Margin:10px:
}

I would like to set the Inner div in first instance of Outer to have a margin-left of 0px.
I have tried the following
Code:

 .Outer:first-child .Inner{
margin-left:0px;
}

This works in Chrome but not in IE, but it does work if I apply the style inline to the First Inner Div. Can it be done within the CSS file?

I was just wondering if there was an alternative other than adding a last class to the last element in a list for internet explorer.

To explain the situation, I have a navigation list in a ul: Code:

<div id="navigation">
      <ul>
         <li><a href="/" title="Homepage">Home</a></li>
         <li><a href="/" title="Homepage">About</a></li>
         <li><a href="/" title="Homepage">News</a></li>
         <li><a href="/" title="Homepage">Contact</a></li>
      </ul>
   </div> <!-- navigation -->

To get the look I want, tiled vertically with a white line in between elements, I am applying this style Code:

div#navigation
{
   width: 200px;
   margin: 0 0 0 10px;
   float: left;
}
   div#navigation ul { list-style-type: none; margin: 0; padding: 0;}
      div#navigation ul li { background: #585858; border-bottom: 2px solid #e4eaef; padding: 0; }
         div#navigation ul li a { display: block; color: #e4eaef; text-decoration: none; padding: 6px; }
         div#navigation ul li a:hover { background: #fab511; display: block; color: #2c2c2c; text-decoration: none; }
         
      /* only works in Mozilla */
      div#navigation ul li:last-child { background: #585858; border-bottom: none; }

but of course the last-child pseudo class does not work in IE. Just curious.

Also, what is the fix for the anchor element not expanding to the full width of the list item?

I have a typical suckerfish men that I am using but on the second level I am putting a left border around each list element. However, for Firefox I used the first-child pseudo selector but that will not work for Internet Explorer 6 and for some reason the alternative I'm using is not working. Here is the layout of my suckerfish menu.


Code:

<div id="menu">
  <ul id="nav">
    <li class="option1">Option 1
      <ul class="secondlevel">
        <li class="first">Option A</li>
	<li>Option B</li>
	<li>Option C</li>
      </ul>
    </li>
    <li class="option2">Option 2
      <ul class="secondlevel">
        <li class="first">Option A</li>
        <li>Option B</li>
      </ul>
    </li>
    <li class="option3">Option 3
      <ul class="secondlevel">
        <li class="first">Option A</li>
      </ul>			
    </li>
    <li class="option4">Option 4
      <ul class="secondlevel">
        <li class="first">Option A</li>
        <li>Option B</li>
      </ul>			
    </li>		
  </ul>
</div>

To reference the first child I should be able to call the class called first. So this is what I have and it doesn't work

Code:

ul#nav li.first {
	border-left-style: none;
}

Any help would be greatly appreciated,

thanks,
teamhonda81

I have a couple of divs that slide out from the side of the browser window when the user hovers over a button which is sticking out from that div.

This is easily accomplished in every browser except for IE. The problem is that there is other elements inside this div and when the mouse hovers over these other elements the slide out div goes back off the screen, because it thinks the mouse is no longer over the div when in fact it is.

Has anyone ever ran into a problem like this and know how to fix it.

I've been working will many css hacks. I just can't seem to get anything to work with the "first child"

posting the full css doc. Hopefully someone can help me.
PHP Code:
.gridContainer {

    padding:20px;

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600');
    /*    background-color: #006600;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700)); 
    background-image: -webkit-linear-gradient(top, #003300, #007700); 
    background-image:    -moz-linear-gradient(top, #003300, #007700); 
    background-image:     -ms-linear-gradient(top, #003300 0%, #007700 100%); 
    background-image:      -o-linear-gradient(top, #003300, #007700); 
    background-image:         linear-gradient(top, #003300, #007700); 

    /* Grid Shadow */
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
}

/* Font Family, Size and Color */
.gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input {
    font-family:arial;
    font-size:10px;
    font-weight:bold;
    color:#fff;
}

.grid {
    border-spacing:0px;
    border-collapse:collapse;
    /* if you want cell separation
    border-spacing:1px;
    border-collapse:separate;
    */

    background:#005501;
}


/*********************************************************************************/
/*********************************************************************************/
/*****************************      END COLORS       *****************************/
/*********************************************************************************/
/*********************************************************************************/


/* if you want to turn off animations for speed reasons turns these off */
.gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div {
    /*
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    */
}

/* padding of the cells */
.grid td, .gridHeaderRow th {
    padding:0px;
    border-left:1px solid #636470;
    padding-left:6px;
}
.grid td {
    border-left-color:transparent;
}

.grid td:first-child, .gridHeaderRow th:first-child {
    padding-left:12px;
}

.grid td {
    padding-top:5px;
    padding-bottom:5px;
}

/* ODD ROWS */
.grid tr:nth-child(2n) {

}
/* EVEN ROWS */
.grid tr:nth-child(2n+1) {

}

/* this can't inherit the color because its fixed to the bottom of the page */
.gridPager.fixed {
    background:#222;
}

/* Row Highlight */
.gridWrapper tr:hover, .gridContainer th:hover,  .gridWrapper tr:hover input, .gridWrapper tr:hover a{
    color:#ffe;
    background-color: #005500;
}

/* Current Cell Highlight */
.grid td:hover {
    background-color: #008800;
}


/* Cell Borders */
.grid td {

}

.gridHeaderRow {    
    border-collapse:collapse;
}


/* column hilte */
.grid td.hilite {
    background-color:#2A8ADD;
    color:#000;
}

/* stuck row */
.stuckRow td{
    padding:8px;
    background:#003300;
    color:#fff;
}
/* right click menu main box */
.gridContext {
    background-color:white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:3px 3px 15px #000;
    -webkit-box-shadow:3px 3px 15px #000;
    box-shadow:3px 3px 15px #000;
}
/* right click menu each item */
.gridContext div {
    color:black;
    font-size:12px;
    padding:6px 15px;
}
/* right click menu hover */
.gridContext div:hover {
    background-color:#4071ee;
    color:white;
}
/* editable cell */
.editableInput[type="text"] {

    border-width:0px;
    /*border-bottom:1px dashed #ccc;*/
}

textarea.editableInput {

}

/* title bar */
.gridTitle {
    padding:10px;
    font-size:14px;


}

/* structure for entire grid */
.gridContainer {
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    border-collapse:collapse;
}

/* minimum shown before scroll bar apppears */
.gridWrapper {
    max-height:500px;
    overflow-x:hidden;
}
   

.gridHeaderRow tr:first-child {
    position: relative;


    background-image:     -ms-linear-gradient(top, #006600, #002200);

    background: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); 
    background-image: -webkit-linear-gradient(top, #006600, #002200); 
    background-image:    -moz-linear-gradient(top, #006600, #002200); 

    background-image:      -o-linear-gradient(top, #006600, #002200); 
    background-image:         linear-gradient(top, #006600, #002200); 

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)";
}

/* the header row cells */
.gridHeaderRow th {
    width:150px;
    cursor:pointer;
    padding-top:12px;
    padding-bottom:12px;

}

.gridHeaderRow th:first-child {
    border-left:0px;
}
.gridHeaderRow th:last-child {
    border-right:0px;
}

/* expand the inner components to meet the size of the container */
.grid, .gridHeaderRow {
    width: 100%;
}

/* all input fields */
.gridContainer input, textarea {
    background-color:rgba(255,255,215,.8);
    background-color: #CCDCAC;
    border:1px solid rgba(255,255,255,.2);
    outline:0px;
    height:2em;
    margin-top:-2px;
    -moz-border-radius:3px;
    border-radius:3px;   
    -webkit-box-shadow: inset 0px 2px 5px #111111;
    -moz-box-shadow: inset 0px 2px 5px #111111;
    border:0px;
    color: #000;
}

/* no border left on first cell */
.grid td:first-child {
    border-left:0px;
}
/* no border right on last cell */
.grid td:last-child {
    border-right:0px;
}
/* select drop down boxes */
.grid td select {
    width:95%;
    border: 1px solid rgba(255,255,255,.1);
    outline:0px;
}
/* the pager */
.gridPager {
    width:auto;
    height:25px;
    overflow:hidden;
    padding:10px 0px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;

    background-color: rgba(0,0,0,.2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2))); 
    background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1)); 
    background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:     -ms-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:         linear-gradient(top, transparent, rgba(0,0,0,.2));

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600');
}
/* when the pager is fixed */
.gridPager.fixed {
    position:fixed;
    bottom:0;
    z-index:999;
    width:100%;
}
/* the last button in the pager when its fixed */
.gridPager.fixed > div:last-child {
    position: relative;
    left:-20px;
}
/* every div inside the pager */
.gridPager > div {
    margin-right:16px;
    float:left;
}

/* the text string inside the pager */
.gridTotal {
    padding:5px;
}
/* button styles */
.gridButton {
    padding:5px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
    text-align:center;
    font-size:11px;

    background-color: #006600;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); 
    background-image: -webkit-linear-gradient(top, #006600, #002200); 
    background-image:    -moz-linear-gradient(top, #006600, #002200); 
    background-image:     -ms-linear-gradient(top, #006600 0%, #002200 100%); 
    background-image:      -o-linear-gradient(top, #006600, #002200); 
    background-image:         linear-gradient(top, #006600, #002200);

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600');

    -webkit-box-shadow:1px 1px 5px #222;
    box-shadow:1px 1px 5px #222;

}

.gridButton:active {
    -webkit-box-shadow:-1px -1px 4px black;
    -moz-box-shadow:-1px -1px 4px black;    
}

/* buttons in the title bar */
.gridTitle .gridButton {
    margin-top:-3px;
    margin-right:6px;
    float:right;
}

/* save button in the pager */
.gridPager .gridSave {
    float:right !important;
    display:none;
}
/* refresh button is tinier */
.gridRefresh {
    font-size:10px;
}

/* the div inside of each th that will chagne size */
.colResizer {
    background-color:transparent;
    position:relative;
    height:inherit;
}
/* the handle on each th that will grab to resize */
.colHandle {
    height:100%;
    width:20px;
    background-color:transparent;
    position:absolute;
    right:0px;
    top:0px;
}
/* the bottom right corner div that allows you to resize */
.gridHandle {
    width:10px;
    height:10px;
    cursor:se-resize;
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,.5);
}

/* the right click menu */
.gridContext {
    position:fixed;
    width:200px;
    padding:2px;
    z-index:99999;
}
/* each option in the right click menu */
.gridContext div {
    cursor:pointer;
}
/* the close button in the right click  menu */
.closeContext {
    margin:0px !important;
    padding:0px !important;
    position:absolute;
    top:3px;
    right:3px;
    z-index:98;
    font-size:11px !important;
}
/* each input box inside the table inherits its parent styles */
.editableInput {
    width:95%;
    background:transparent;
    color:inherit;
    font-weight:inherit;
    font-size:inherit;
    font-family:inherit;
    margin:0px;
}
/* clickable nRows */
.nRows {
    cursor:pointer;
}
.grid a {
    text-decoration:underline;
} 

I have a multi-column layout. The "main" column has text within <p> tags defined thusly: Code:

#main p {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
padding:0 10px;
}

Within that main columns are some <div> blocks that are arranged in a row at a certain place, define like this: Code:

.mid_nav {
float:left;
width:110px;
margin:0px 10px 8px;
background:url("./images/pic_nav_bg.gif");
background-repeat: repeat-y;
}

I would like to define different qualities to the <p> tags within these <div> blocks, but the original #main p definitions seem to over-ride whatever I try.

Incidently, the reason I've defined the font-size in pixels is I need uniformity between IE and FF.

Any suggestions?