|
CSS - First-child Not Working In Ie7
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 Similar TutorialsI'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. 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? How do I distinguish <li> that have child from the one that does not in an unordered list, using CSS? 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. 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 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 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 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? http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? 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 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 hey guys, need some help with css on mys site take a look at this using firefox http://home.no.net/kumar/test/earthtemplate_div.php3 http://home.no.net/kumar/test/skins/flyaway_yellow.css ie diplays the the container expanding to include the text, but ff (and maybe even mozillla) doesnt. anyone know how to get around this. i found a hack that i used to make sure that the container for the whole site wrapped around all shild elements but it is not working for the text. i have a left column, rightcoloum and the content div i the middle, all places using flaots, not absolute pos. also, the content div contains another div (content2), inside which the text is (this is oinly to get around widht issues in ie.) im suire that there is a way to get the contetnt or the content2 to wrap around the text...so any help is appreciated... thansk kumar 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? 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 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? A minimal example is easier than trying to describe the problem: analogdawn.com/test/overlap.html I understand what the problem is, the children are set to fill 100% of the parent, and that doesn't include the padding and border widths. My question is: How can I fix that easily, while still using padding and borders? I need to have a liquid width, so the DIV widths need to stay percentage based. Any help will be appreciated. Here is the code: Code: <html>
<head>
<style>
body {
background-color: grey;
}
#wrap {
width: 75%;
border: 2px solid red;
}
.border {
width: 100%;
border: 2px solid yellow;
padding: 2px;
background-color: orange;
}
.text {
color: white;
width: 100%;
border: 2px solid lightgreen;
padding: 2px;
background-color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pellentesque. Curabitur lectus. Etiam pellentesque, nunc et fringilla lacinia, ante velit blandit libero, nec sollicitudin nisl nunc eu dui. Duis eu sapien. Proin justo magna, fermentum quis, scelerisque eu, commodo et, quam. Pellentesque tortor nulla, auctor in, feugiat tempus, tempus vel, eros. Quisque elit. Aliquam quam orci, sagittis a, laoreet sit amet, euismod non, pede. Donec a lacus. Nullam porta, nibh eget sagittis volutpat, sapien nibh porttitor arcu, ut aliquam turpis justo ut erat. Integer ut velit. Mauris scelerisque bibendum sapien. Nulla imperdiet tincidunt urna. Praesent sollicitudin dolor pharetra mauris. In hac habitasse platea dictumst. Vestibulum at sapien nec justo egestas sollicitudin. </div>
</div>
</div>
</body>
</html>
I am working on a website that contains a message mailbox interface that was designed entirely without tables. Whoever designed it had obviously taken comments against design-by-tables to heart, in my mind excessively so. The problem is, the entire interface is designed by left-floating labels and content, so it's like: Code:
<style type="text/css">
.messages {
clear: left;
float: left;
}
.message {
clear: left;
float: left;
}
.left {
clear: left;
float: left;
}
.right {
float: left;
}
</style>
...
<div class="messages">
<div class="message">
<div class="left">From</div><div class="right">NAME</div>
<div class="left">Subj</div><div class="right">SUBJ</div>
<div class="left">Body</div><div class="right">BODY</div>
</div>
<div class="message">
<div class="left">From</div><div class="right">NAME</div>
<div class="left">Subj</div><div class="right">SUBJ</div>
<div class="left">Body</div><div class="right">BODY</div>
</div>
<div class="message">
<div class="left">From</div><div class="right">NAME</div>
<div class="left">Subj</div><div class="right">SUBJ</div>
<div class="left">Body</div><div class="right">BODY</div>
</div>
</div>
This creates a problem because all of this content is within a larger <div> that forms the "main body" of the page, which has a background color and a border. So, all of these floated <div>'s actually stick out below the "main body", pushing out of the background color and over the border. I'm wondering, is there any way to make the containing "main body" <div> expand so that these elements are floated within it? Or am I going to have to go back to a <table> based layout? (It seems like it would have been better to use a table in this case anyway, since it's being used for the presentation of data, but I digress.) |
|||||||