|
CSS - Child Element <ul> Absolute Position Issue
I 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 Similar TutorialsI don't know why but for some reason I thought if you give an element a position of absolute the margin is irrelevant. Not so in FF huh? Tom Please look at this page - http://www.mts-diesel.com/index.php?cPath=20_23_42 The breadcrumb trail links on the main page in FF are higher up than the same element in Chrome and IE. If anyone can shed some light it would be greatly appreciated. Thanks so much, Tom Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) 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> Please look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
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. 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. Firefox ignores the white background in the "main" <div> in the following, but IE, Opera and Safari/Win all display the white background. Is this a firefox bug, or am I missing something here? Note: The z-indexes are for when the "main" div is scrolled... Also note: I am making the <body> tag relatively positioned because otherwise, Firefox (apparently) treats the viewport as the parent to the absolute-positioned element. In that case, it renders the white background until the bottom of the window, but reverts back to black "below the fold" because bottom: 0 is interpreted as the bottom of the window. Code:
<html>
<head>
<style type="text/css">
body {background: black; color: silver; position: relative}
div#header {position: fixed; top: 0; left: 20%; height: 80px; z-index: 2; right: 0; background: gray; margin-bottom: 2px; color: yellow}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver; margin-right: 2px; color: maroon}
div#main {position: absolute; top: 80px; left: 20%; right: 0; bottom: 0; background: white; color: red; z-index: 1}
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="sidebar">
sidebar
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque rhoncus metus eget purus pellentesque auctor. Aenean dui mauris, eleifend sed, ultricies eget, commodo in, neque. Integer quis orci. Vivamus a diam sit amet nisl adipiscing aliquet. Nullam nisl justo, accumsan eu, blandit at, vehicula ut, leo. Sed porttitor tellus auctor lectus. Curabitur congue libero. Proin suscipit quam id felis. Aliquam hendrerit ligula in mauris. Quisque non eros a velit dictum ornare. Donec viverra dolor eu felis. In hac habitasse platea dictumst. Suspendisse tristique accumsan justo. Sed faucibus elit quis lacus.
</p><p>
Nullam commodo. Vivamus lobortis nibh nec dui gravida pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere, metus et porta dictum, felis quam ullamcorper quam, ac ultrices mauris nisi et odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc interdum bibendum velit. Integer viverra laoreet justo. Vestibulum bibendum ante nec dui. Nunc congue iaculis enim. Proin suscipit, lacus dignissim tempus sagittis, lacus libero bibendum velit, lacinia porttitor turpis ante sit amet neque. Nulla facilisi. Quisque rhoncus leo eu sem. Aenean sed tellus. Pellentesque pellentesque mollis diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc feugiat est at nunc.
</p><p>
Donec hendrerit sapien. Donec sodales, mauris eu gravida eleifend, nisi nunc elementum augue, vel ullamcorper augue dolor vel lorem. Donec hendrerit ante non nisi. Proin feugiat, eros sit amet scelerisque cursus, tortor eros viverra nunc, vel tincidunt sem erat nec nisi. Sed adipiscing nisl vitae enim. Nulla odio mauris, eleifend ut, dictum ac, tristique et, felis. Donec nec eros. Suspendisse potenti. Integer ac orci. Nunc sapien nisl, fringilla at, elementum at, mattis vel, magna. Vestibulum congue. Sed at mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec metus vel lorem vulputate sagittis. Aliquam leo ipsum, semper vitae, malesuada id, suscipit quis, odio.
</p><p>
Maecenas semper hendrerit arcu. Suspendisse vulputate magna eu velit. Aenean venenatis nulla eget urna. Fusce diam orci, tincidunt ac, auctor et, condimentum sit amet, elit. Vivamus mollis. Nam sagittis odio vel lectus. Nam faucibus arcu in magna. Maecenas eget mauris vel justo feugiat iaculis. Suspendisse ut massa. Integer nulla magna, interdum ut, fringilla quis, ultrices malesuada, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis sagittis eros. Nam nec tellus. Donec aliquam tortor ut metus. Aenean ligula ligula, auctor nec, luctus sed, sodales id, ante. Ut nec tellus vitae elit tristique vulputate. Cras suscipit tortor et diam. Phasellus vestibulum. Phasellus vestibulum eros sit amet ante.
</p><p>
Donec sodales pharetra ligula. Ut porta. Nulla facilisi. Donec nunc libero, nonummy sit amet, dapibus ut, eleifend sit amet, tellus. Donec blandit, lorem vitae malesuada pulvinar, massa nunc pharetra lacus, non lobortis tellus sem a odio. Ut sed leo. Etiam gravida mi nec nunc. Vivamus scelerisque lorem id magna. Aliquam ipsum est, aliquam eu, tristique a, fermentum nec, eros. Curabitur sed orci. Mauris orci nisl, molestie eu, rhoncus quis, condimentum a, nibh. In hac habitasse platea dictumst.
</p>
</div>
</body>
</html>
First off, every time I come back to try to institute CSS more in my site, the more I hate it. That said, my problem: I have a DIV box that stretches 100% across my screen. Inside of it I need two more DIVs, 'A' aligned to the left and 'B' aligned to the right. I need to be able to add another DIV (C) to the right of A under certain circumstances. The first problem comes into play that you can't just lay a DIV down without a stupid linebreak. I need to use DIVs and not SPANs because both B and C have multiple lines. I also can't do absolute locations because the page is PHP-generated and the items don't have a consistant location on the page, except as being under the same parent DIV. Now I've read around and it seems I want to use floats, and IE supports this to some degree. FF, however, seems to completely remove the children from the parent when a float is used-- despite literature stating that it should remain in the parent. This messes up my entire display as it then begins covering up other content. Question #1: Is there ANY way to avoid display corruption from the line break forced on by block elements, other than putting everything into a table? It would help many facets of my site greatly if I could create self-contained DIV objects which can be placed right after each other like images. And it would solve this problem as well. Question #2: Why would floating children be escaping the parent when w3c and w3schools, among others, all say it shouldn't? If my situation is confusing I can make up a diagram upon request. Thanks- Dave If I do something like this: .divSubHomeRtPhoto { position: absolute; left: 340px; top: 167px; width: 420px; height: 420px; } Then <div class="divSubHomeRtPhoto"> my left and top positions don't seem to take in IE 5.2 for Mac. This seems to be fairly well known, from what I read on the internet. What this means for me though, is that I have to almost do away with positioning through CSS if I want my pages to work with IE 5.2 Mac, whcih I recently discoverd I do want to work. How do other cross browser CSS writes deal with this problem? Thanks for your help CJB The question is "What is the positioning context of a div positioned absolutely (e.g., div#nav{position:absolute;}); that is, where is the 0,0 coordinate from which any offsets will be measured?" Is the answer "it will be measured from the top left"? Is it possible to position something below a division that has the property { position: absolute } and can expand to a varied length depending on what is contained with it? IE browser seems fine but mozilla display a simple table with links inside in a squished up format, not present on the web design. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>mybar.html</title>
</head>
<style type="text/css">
#elButton a {
color: #000000;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-decoration: none;
/*border:1px outset aqua;*/
/* background-color:#00ffff;*/
border-right-style:solid;
border-right-width:1px;
width: 110px;
/* padding: 3px 5px;*/
/*margin: 1px;*/
}
</style>
<body bgcolor="#ffffff">
<p>
<table style="WIDTH: 487px; HEIGHT: 26px" cellspacing="0" cellpadding="0" width="487"
align="right" bgcolor="#00eaea" border="0">
<tr>
<td valign="top" align="middle">
<div id="elButton">
<a href="#">Java Script</a>
<a href="#">Dynamic HTML</a>
<a href="#">Server Side</a>
<a href="#">Client Side</a>
</div></td></tr></table></p>
</body>
</html>
Im trying to get an image to center in a div. It works as long as one part of my CSS is commented out. The issues is the part that is breaking it, is required for another script to run that I have not added in due to its vast amount of code. Can anyone tell me a workaround.. leaving the MUST have code in place. Im willing to add anything to the code, just not remove if possible. Full Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#image {
display: table-cell;
text-align: center;
vertical-align: middle;
width:356px;
height:356px;
border:1px solid blue;
}
#image * {
vertical-align: middle;
}
/*\*//*/
#image {
display: block;
}
#image span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
#image span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<style type="text/css">
#image img {position:absolute;}
</style>
</head>
<body>
<div id="image"><span></span><img src="http://www.google.com/logos/olympics08_rhythm.gif"></div>
</body>
</html>
Code that MUST stay in the CSS Code: #image img {position:absolute;}
Just to note, the rest of the code is for the most part an exact dup of the cross-browser image center in div code here, http://www.brunildo.org/test/img_center.html I'm putting together a site using a CSS template, and hefty use of position: absolute. You can view it he http://www.goldenturmeric.com/layout.php The layout comes out great in FF 2.0 and IE 7. However, the main body of the site doesn't come out at all in IE 6. I've monkeyed around a little with changing to position: relative and a few other things and it completely throws it off. I'm sorry if I'm not doing this the right way or position: absolute is avoided or something. If so, I didn't know. Anyone's help is much appreciated. Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? |
|||||||