|
CSS - Ie8 Parent - Child Element Issue
Please look at this page -
http://www.soarminden.com/glider-soaring-gallery.asp I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s) innerLeftColumn or LeftColumn Code: <div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4> </div> </div> Similar TutorialsI can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom 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? I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. 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 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? 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 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>
Hello all. I want to hide everything in a div with a particular id except for a specific tag. In other words, I want to be able to do the following: Code:
<style type="text/css">
#outer { display: none; }
#outer p { display: block; }
</style>
<div id="outer">
<p>This is text. </p>
<h1>This is more text. </h1>
</div>
Where "This is text. " would appear but "This is more text. " would not appear? Is this possible? I understand the inheritance that #outer p is getting the display: none property from the parent but does not mean I cannot override it? Hello All... I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer. My confusion arise as IE and FF doesn't treat equally (again!) FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF. Here is the code related : CSS Code: Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }
.all2 {
The HTML : Code: <div class="all2"> <div class="leftpanel"> ..... Left Panel Text </div> <div class="mainpanel"> .... Main Body Text </div> </div> The Doc Type is XHTML 1.0 Transitional Many thanks in advanced Hi guys wonder if i could get a hand, I have a problem with an applet from the bbcnews website - essentially my portal has dynamic content, and sometimes this is pushed against the menu bar. It works fine, until used in IE6/7, when you roll over the parent on the menu bar, the child goes under the applet, again only in IE. I have tried every type of z-index trick going to no avail - is it an issue with the JScript or css, and more to the point is there a fix? Thanks a million for you help in advance, as theres no upload script here and this portal is in a secure location i'll copy the test code below for you to generate an htm with. <--------> CODE <--------> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
z-index:5;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul></td>
<td><!-- BBCi Syndication --><noscript><a href="http://www.bbc.co.uk/news" target="_BBC"><img src="http://newsimg.bbc.co.uk/shared/bsp/hi/services/htmlsyndication/img/synd_js_error_js-inactive.gif" width="165" height="200" border="0" alt="BBCi: Javascript is not available on this browser"/></a></noscript><script src="http://www.bbc.co.uk/syndication/html/jsserver/1096038497229" language="JavaScript" style="z-index:1;" type="text/javascript"></script><!-- /BBCi Syndication --></td>
</tr>
</table>
</body>
</html>
i have a <div> inside another <div> I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top. But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge. Example of what is happening is he http://www.eionbryant.com/test.html I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down. I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around. cheers Code: <body> <div id="strip"> </div> <div id="wrap"> <div id="boxes"> </div> </div> </body> </html> Code:
body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative; }
#strip {background:#663366; width:100%; height:10px; padding:0; border:0;}
#wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }
#boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}
Here's my situation... I have a div, that's a child to a div. I want the child to be behind the parent, but a part of it sticking out from the side and people can click on the child. Because of the cms\framework I'm working with, the div i want to click needs to stay a child of this particular parent. I can get it working in IE, but that's it. Also, the parent div MUST be set to overflow:visible, for other misc reasons. Take a look at the attached image for a visual of what I mean. Is there a way of changing a parent class based on a child class like. ../[class=child]{ } This way i can change a parent class if it has this child Any ideas? Hi, I've been stuck on this for the last few days and was wondering if you could help me. I'm not even sure if using javascript is the best option to do this, but if you could help me anyway that would be great. My dilemma is I'm designing a website which has several links in the left hand navigation bar. But at the moment, the links open in a new window. I don't want that. I want them to open in the main area of the parent window. Normally if i'd used frames, opening the links within that same page wouldn't have been a problem because I could just use the target attribute. But I didn't use frames, I used CSS layouts but when I set the target attribute to _parent, the links open up across the whole page rather than just in the main section.Can some one provide some code to point me in the right direction of how to do this? How could I Force a parent div to vertically expand to size of its child div? Thanks in advance, Richard Carson http://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> I have the following code, simplified from wordpress for clarity: Code: <div class="entry"> <p><img width="800" class="size-full" src="image.jpg" /></p> <p>This is text.</p> </div> What I am trying to do is indent the text to a position 15 pixels inside the width of the image. In other words, shift ".entry p" 15 pixels right, and shift ".entry p img.size-full" 15 pixels left. The complicating factor is that some of the images are not full width, and so the img.size-full selector has auto margins to center the image. So what I need to have is something like Code:
/* indent the P tag */
entry p {
margin-left: 15px;
}
/* center the img */
img.size-full {
margin: 5px auto;
}
/* This is where I fall down. I can identify the img, but I need to
affect the margin of the p tag, not the img tag, to change the
margin. If I change the img tag, then then centering goes away */
entry p img.size-full {
?????
}
Is this possible? ...Mike 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. |
|||||||