|
CSS - Auto Height Background Not Working With Nested Divs In Mozilla
I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?
Thanks, Carlos Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
Similar TutorialsHey everyone. Ran into a little snafu with CSS in firefox and NN last night. What I had, basically, was: Code: <DIV style='position:relative; margin-top:90px;'>
<DIV style='position:relative; margin-top:14px;'>
<img src='someimage.gif'>
</DIV>
<DIV style='position:relative; margin-top:8px;'>
<img src='someimage2.gif'>
</DIV>
</DIV>
the margin-top:14px was having absolutely no effect. The 8px one worked, but the 14px one only moved when I set it to over 90px, which would be more like absolute positioning, no? Now of course this could be rectified by just setting the top margin of the outter div to 104px and getting rid of the 14px one alltogether, but I'm sure there'd be instances where I'm using a php include for the inner divs or somthing and that wouldn't be an option. Can anyone offer me any thoughts or clarity on this? It worked fine in IE. Thanks. Hi, I think this might requiere an IE hack buti have nested divs inside a div on http://gohedonist.com/mempage.php?id=19 but for some reason instead of the divs bein constainted inide the larger div they go all the way down the screen. This is works fine in FF. The problem is located at http://gohedonist.com/mempage.php?id=19 (select Submissions from the dropdown box on the right). Thanks for any help in advance. I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom]. Within the container, I have 2 main content elements: 1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable]. 2. the main content div is beside it. The container automatically adjusts to the height of the entire content in both divs. I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible? Kravvitz....I know hello! My name is Marco, I'm italian, I hope nobody will be hurted by my english. Consider this code: Code: <html><head><style>
body
{
text-align: center;
}
#wrap
{
width: 100%;
background: yellow;
height: 400px;
}
#inside
{
width: 800px;
position: relative;
margin: 0px auto;
background: red;
}
</style></head><body>
<div id='wrap'><div id='inside'>
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
</div></div>
</body></html>
if you try to downsize the width of the browser window (to 100px, for example) the yellow background will move to left I hope the problem is clear exposed...thank you Hi Guys, I'm building a page, and the body has been given a background color. I have a container DIV, and within it are several divs that hold individual elements. I need the background of the container div and everything in it to remain white, regardless of the color of the body background. <!--- Body tag ---> body { background: #FF00AA; color: #000000; font: .8em arial, helvetica, sans-serif; margin: auto; padding:0px; } <!--- container div----> #pages { background-color:#FFFFFF; width: 900px; } <!--- nested container divs ---> #pages title { display: inline; width: 375px; float: left; padding:0 .25em .5em 0; } #pages categories { display: inline; width: 20%; float: left; padding:0 0 0 0; } But this isn't working.. What am I doing wrong here? I just need to make sure EVERYTHING's background is white when it's placed within the container div (pages). 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 Guys I am currently trying to make a website, the problem is that its not quite working..... I have a main div that holds everything inside it but when i set its height to auto its not staying the correct length. Basically i want this main div to stretch out longer every time new content is added (dynamically). Why is it not staying as long as the content thats contained within it? Anyone know why this is happening and how i can fix it ? Help?! Code: #main {
height: auto;
width:868px;
margin-left:15px;
margin-top:15px;
background-color:#FFFFFF;
margin-bottom:3px;
}
Thanks Let me start by saying I'm new to CSS and web developement in general. So I'm probably missing something simple. I have an ASP page that has a treeview along the left, and a tab control to the right of it. I put everything in div's, and floated left the treeview and tab div's. I put a div around it all to have a border. I set that div to be height:auto (or 100%), and it doesn't expand at all. I can give it a true height, but that's not really what I want. Also, it I resize my page really small (manually), the tab div drops below the tree div. Here is the code. Can anyone point me in the right direction to accomplish what I'm trying to do? Thanks! Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/App/Master/AmcMaster.Master" CodeBehind="CoreWorkload.aspx.vb" Inherits="Core.UI.CoreWorkload"
title="Core Workload" %>
<%@ MasterType VirtualPath="~/App/Master/AmcMaster.Master" %>
<%@ Register tagprefix="controls" src="~/Controls/CoreWorkloadTv.ascx" tagname="CoreWorkloadTree" %>
<asp:Content ID="Content1" ContentPlaceHolderID="AuthContent" runat="server">
<asp:UpdatePanel ID="CoreWorkloadUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="coreWorkloadDiv" style="border-style: solid; border-width: thin; height: auto; padding-top: 5px;">
<div id="treeDiv" style="width:150px; height: 100%; overflow:auto; float:left;" >
<controls:CoreWorkloadTree id="wbsTree" runat="server"></controls:CoreWorkloadTree>
</div>
<div id="tabDiv" style="padding: 10px; float: left; width: 80%; height: 100%; ">
<ajaxtoolkit:TabContainer runat="server" ID="Tabs" Height="600px" Width="100%" >
<ajaxToolkit:TabPanel runat="Server" ID="SummaryPanel" HeaderText="Summary">
<ContentTemplate>
<br />WBS Summary data goes here...
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="Server" ID="DetailPanel" HeaderText="Detail">
<ContentTemplate>
<br />WBS Detail data goes here...
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxtoolkit:TabContainer>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Hello! I'm hoping you guys could help me with a small problem.. I'm trying to get my images to keep their aspect ratio with this CSS, #photo-inner img { margin: 0 0 10px; padding: 0 0 10px; max-width: 718px; width: expression(this.width > 718 ? 718: true); height: auto; } Works perfectly in Firefox, Safari.. But IE don't want to play along. Any tips? // T I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? Hi All, I have the following html: Code: <div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=3" alt="My Biz" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=3">
My Biz
</a>
<p>
my biz
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
<div class="businessItem">
<div class="bizIcon">
<img src="GetImage.axd?type=1&business=4" alt="My Second Business" />
</div>
<div class="bizInfo">
<a href="business.aspx?business=4">
My Second Business
</a>
<p>
My second business
</p>
</div>
<div class="bizContact">
<a href="www.myweb.com">www.myweb.com</a><br />
<a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br />
90294767
</div>
</div>
And the following CSS that applies: Code: div.businessItem
{
background-color: #66cc66;
margin-bottom: 10px;
width: 100%;
padding: 10px 10px 10px 10px;
}
div.bizIcon
{
float: left;
width: 64px;
margin: 0px 10px 0px 0px;
}
div.bizInfo
{
float: left;
width: 256px;
}
div.bizContact
{
float: left;
width: 256px;
}
now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning). I have a div: .gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;} and inside I have: .galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;} .spacer{clear:both;} Used to give height to the container div. The idea is to create and even sized box for varying jpgs. How do I get the inside divs to space themselves out evenly across the space? AND the get the jpg to align itself in the middle of its containing div? Thanks. First off - I'm not even sure if its technically allowed or correct but I am nesting 3 <div>'s in one container <div> (I assume this is ok - quite positive) So when positioning nested <div>'s I am running into problems. Here is the link http://www.nextwavehosting.net/new (looking at the bottom bar with the website thumbnail, info, and the word test) Here is a snippet of code... The container... Code:
div.bottomInfo {
position: absolute; top: 510px; left: 15px;
width: 723px;
height: 190px;
z-index: 6;
background-color: #EDEBE6;
}
The nested <div>'s Code:
div.featured {
position: relative; top: 15; left: 252;
width: 150px;
height: 114px;
z-index: auto;
}
div.featInfo1 {
position: relative; top: 20; left: 252;
width: 150px;
height: 35px;
z-index: auto;
}
div.featInfo2 {
position: relative; top: -32; Left: 670;
z-index: auto;
}
the first nested <div> is positioned exactly how it should... the 2nd <div> is correct horizontally but vertically i would assume that it is still being positioned relative to the container... meaning that the second <div>'s top: 20; should be more like top: 140; to position it just below the first <div> yet the top: 20; works... the 3rd one is way off and is nearly impossible to position correctly... Any helpful tips or advice on this one? So, I have a div for content that contains three other divs for a three column display, like this: Code:
<div id="content">
<div id="col1" class="column">filler filler filler</div>
<div id="col2" class="column">filler filler filler</div>
<div id="col3" class="column">filler filler filler</div>
</div>
now my CSS looks like this: Code: #content {
top:10%;
height: auto;
background:#009999;
border-width:thin;
border-style:solid;
border-color:#003333;
overflow:hidden;
}
.column {
position:absolute;
top: 0%;
width: 30.66%;
display:block;
}
the problem is that the content div isn't resizing to fit the column divs. It's just a tiny thin strip at the top. It is also not hiding any of the column divs, it shows all of them. If I change height to, say, 200px it resizes to that value, and if I put text directly into that div (as opposed to the text in the column divs) it resizes to fit that. Any help/ideas would be greatly appreciated, thanks. Not sure about this one- maybe someone can help shed some light on it? I have a <div> that contains a form. This div is dynamically-sized and floated left. What I want to do is place a nested <div> inside it so that it will cover the form below it. What's happening is that if I add the nested <div>, it pushes the form in it's container <div> down, which is obviously not what I want. I have tried using z-index on this nested <div> but with no success. Here is the code I'm using: Code:
<div id="formdiv" style="display:block; padding-right:15px; padding-top:10px; border-right:#A0A0A0 1px dotted; float:left; width:auto; height:100%;">
<div id="overlaydiv" style="top:0px; left:0px; width:100%; height:100%; background-color:#FF0000; z-index:500;"></div>
<form>
...
</form>
</div>
There is other <div> tags before and after the 'formdiv', which are part of the page layout, but do not need to be covered by the 'overlaydiv'. I should note that 'formdiv' is itself inside a container <div>. I have tried various combination of CSS settings, but they don't give the same result. position:absolute; covers EVERYTHING within the uppermost container <div>, obviously not what I want. I've tried putting the form into it's own <div>, but I get the same result- the form just gets pushed below the 'overlaydiv'. Anyone have any ideas? Thanks, - skubik Hello all, I've been scratching my head on this one for a bit. First of all, here's the site I'm working on: http://dev.discoverahost.com If you'll note, the background for the content is currently blank. I'm trying to get a background to cover that area. Here's the basic structure for that page: Code: <div id="main_header"> </div> <div id="main_navigation"> Home :: About :: Link :: Such and Such </div> <div id="content_wrap"> <div id="image_below_nav"> </div> <div id="content_main_header"> </div> <div id="content_main"> Lorem Ipsum blah blah blah </div> </div> Note: That's not all the code. You can look at the souce for the full thing. The background I'm trying to apply I want to go on the wrapper background (content_wrap). I've got it all defined in the CSS file, located he http://dev.discoverahost.com/css/style.css The problem is that the wrapper isn't expanding vertically to include the background, even though I've got plenty of text inside of another nested div. Now it works if I put content outside of these divs ... which I really don't want to do. Maybe I've got my structure all wrong for doing this kind of thing, but any and all help is very much appreciated. Thanks! - Adam I am having a problem using nested hidden divs. I'd like to know if what I am doing is even possible. I have one div that is set to "display: none". Inside this div I have another set to "display: none". When I change the style of the outer div to "display: block", the inner div appears as well. Is there a way to keep the inner div hidden?? This could be argued that it belongs in a JavaScript forum but I think the core of the problem lies in where the information should go so I shall post it here. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #0f0f0f; } /* end #base */
#main_block {
background: #0000ff;
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content {
background: #ffffff;
border-left: 1px solid #0000ff;
border-right: 1px solid #0000ff; } /* end #main_content */
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
border: 0;
margin: 0;
padding: 0;
text-align: right;
border-top: 1px solid #ff0000;
height: 243px;
width: 266px; } /* end #top_main_content ul */
#top_main_content ul li {
color: #00ff00;
width: 266px;
border-bottom: 1px solid #ff0000; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #00ff00;
width: 266px; } /* end #top_main_content ul li a */
.indent { padding-right: 1.5em; }
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #ff0000;
border-top: 1px solid #ff0000; } /* end #top_main_content #rotating */
#default {
position: absolute;
visibility: visible; } /* end #default */
#a {
position: absolute;
visibility: hidden; } /* end #a */
#b {
position: absolute;
visibility: hidden; } /* end #b */
#c {
position: absolute;
visibility: hidden; } /* end #c */
#d {
position: absolute;
visibility: hidden; } /* end #d */
#e {
position: absolute;
visibility: hidden; } /* end #e */
#f {
position: absolute;
visibility: hidden; } /* end #f */
#g {
position: absolute;
visibility: hidden; } /* end #g */
#h {
position: absolute;
visibility: hidden; } /* end #h */
#i {
position: absolute;
visibility: hidden; } /* end #i */
</style>
<script language="javascript">
function change_graphic(to_visible) {
var num_elements = 10;
var elements = new Array(num_elements);
var i = 0;
elements[i++] = "default";
elements[i++] = "a";
elements[i++] = "b";
elements[i++] = "c";
elements[i++] = "d";
elements[i++] = "e";
elements[i++] = "f";
elements[i++] = "g";
elements[i++] = "h";
elements[i++] = "i";
var temp = "";
for(i = 0; i < num_elements; i++) {
document.getElementById(elements[i]).style.visibility = "hidden"; }
document.getElementById(to_visible).style.visibility = "visible"; } // end function change_graphic(path)
</script>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content" onmouseout="change_graphic('default');">
<ul>
<li onmouseover="change_graphic('a');"><a href="#"><span class="indent">Link A</span></a></li>
<li onmouseover="change_graphic('b');"><a href="#"><span class="indent">Link B</span></a></li>
<li onmouseover="change_graphic('c');"><a href="#"><span class="indent">Link C</span></a></li>
<li onmouseover="change_graphic('d');"><a href="#"><span class="indent">Link D</span></a></li>
<li onmouseover="change_graphic('e');"><a href="#"><span class="indent">Link E</span></a></li>
<li onmouseover="change_graphic('f');"><a href="#"><span class="indent">Link F</span></a></li>
<li onmouseover="change_graphic('g');"><a href="#"><span class="indent">Link G</span></a></li>
<li onmouseover="change_graphic('h');"><a href="#"><span class="indent">Link H</span></a></li>
<li onmouseover="change_graphic('i');"><a href="#"><span class="indent">Link I</span></a></li>
</ul>
<div id="rotating">
<div id="default"><img src="images/default.gif" alt="" /></div>
<div id="a"><img src="images/test_image_a.gif" alt="" /></div>
<div id="b"><img src="images/test_image_b.gif" alt="" /></div>
<div id="c"><img src="images/test_image_c.gif" alt="" /></div>
<div id="d"><img src="images/test_image_d.gif" alt="" /></div>
<div id="e"><img src="images/test_image_e.gif" alt="" /></div>
<div id="f"><img src="images/test_image_f.gif" alt="" /></div>
<div id="g"><img src="images/test_image_g.gif" alt="" /></div>
<div id="h"><img src="images/test_image_h.gif" alt="" /></div>
<div id="i"><img src="images/test_image_i.gif" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I have is a set of links that when hovered will change the contents of the rotating div to reflect information about that particular link. As the code stands now, whenever any other item is moused over, the div will reset to the default div. What I would like to happen is whenever the top_content div is mousedoff (new word?), the content resets to the default. Thus I should be able to hover over a link, change the content of the rotating div, and move from that link directly to the content and mouse around over there all I want without changing back to the default div. To me, what I have should work in that I am thinking of nested divs as a parent/child relationship but that is obviously not how the browser is interpreting it. Any ideas on how I can achieve this? The JavaScript portion has been tested and works correctly. Edited: This code also pushes the side menu into the border in Opera. This problem was addressed and fixed in a previous thread but I broke it again. if i create a div box with some transparency and then create another div insde it then the second div takes on the opacity of the containing one. how can i stop this? <div class = "f"> <div class = "s"> hello </ div> </div> the css code: .f{ background: 669999; width: 500px; height: 300px; position: absolute; top: 15px; left: 80px; z-index:1; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } .s{ background: 55ffcc; width: 400px; height: 200px; position: absolute; top: 15px; left: 20px; padding: 40px; } Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin |
|||||||