CSS - Span Width Of Child Image Not Child Text

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

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

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

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.

http://weightlossforever.ca/


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

Thoughts?

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?

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.

Hi all, and thanks for reading.

I have a page where I'm changing the opacity of a DIV to 90%. However, I don't like that all of its child elements also have their opacity reduced.
I've thought about this, and the only solution I see is to create two identical DIVs with identical content (it doesn't have a fixed height) and position them absolutely with the one on the bottom having an opacity of 90% and the other being regular. The content shouldn't overlap, right?
However, I don't like this idea. Is there a better way to do this?

Thanks in advance.
-colin

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 elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have
ul.parent ul {
top: <bottom of parent>
}

How do I refre to it?

No, i'm not pregnant, nor can i be (male and all), but here's my question...

I've got a menu from bullets, and i did this:

Code:

#nav-menu li:first-child {
border: none;
}

Naturally, it looks perfect in Firefox, but IE6 ignores it.

Please note, i'm extremly new to CSS, asin.. just started saturday lol... but i'm a quick learner!

Anyone know of a work around that'll hide the border in ie6?

Thanks!

I have like this psudo-code:

Code:

<div id=parent  position: absolute>
<div id=child1 position: relative>
</div>
<div id=child2 position: absolute>
</div>
</div>

As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code:
Code:

<div  style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px">


<div style="border: solid green; position: relative; width: 150px">
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.

</div>

<div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;">
</div>
<div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;">
</div>
</div>

I also have a test page here

This pretty much does what I would expect(or what I want) in FF, but not IE or Opera.

I would like this to be dynamic and not use any javascript. Does anyone have any suggestions?

Thanks for your time,

CJB