CSS - Tricky Nested <ul> Positioning In Ie 6-7

I'm fairly new to CSS and I'm really getting stuck on how to make a column on a web page behave the way that I'd like it to.

I want to have a column that is composed of three parts: a header image, a footer image, and a middle section that expands in height to match the content height. These three pieces make up the "background" of the column. Now I want to overlay content on top of it and have the column expand in height to suit.

I can accomplish this fairly easily if I restrict my content to the middle portion. This isn't what I want though. I want the content to overlap the header and footer images.

This diagram describes what I'm trying to do:

+----------------------------------------+
|........................................|
|..Fixed height header image.............|...Content
|........................................|...text
+----------------------------------------+...to
|........................................|...overlay
|........................................|...all
|..Expanding region (solid fill color)...|...three
|........................................|...regions
|........................................|...with
+----------------------------------------+...the
|........................................|...center
|..Fixed height footer image.............|...region
|........................................|...expanding
+----------------------------------------+


This is what I'm doing in my html:

Code:

<div class="contentArea">
     <div class="contentTop"></div>
     <div class="contentStretch"></div>
     <div class="contentBottom"></div>
     <div class="main-page-content">
         My Content Here
     </div> 
</div>

This is in my style sheet:

.contentArea{
border: none;
height:auto;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


.contentTop {
background: url('../images/contentTop.jpg') no-repeat left center;
border: none;
height: 276px;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}

.main-page-content{
border: none;
line-height: 100%;
padding: 0px;
width: 515px;
height: auto;
position:relative;
left:265px;
top:-610px;
}


.contentBottom {
background: url('../images/contentBottom.jpg') no-repeat left center;
border: none;
height: 317px;
line-height: 100%;
padding: 0px;
width: 785px;
vertical-align:bottom;
}

.contentStretch {
background: url('../images/StretchPic.jpg') repeat-y left center;
border: none;
line-height: 100%;
padding: 0px;
width: 785px;
float:left;
}


As you can see, I've tried to overlay and move the main content upwards by -610 pixels to get it to sit on top of the previously placed divs. This appears to work to position the content, but the underlying images do not behave!

I've been at this for days and I'm at the point where I need help! Any suggestions?

Ron

this is really for a counter strike source server MOTD (which lets you use HTML/CSS)

First of all for the MOTD i want to use a graphic on it, there are 2 versions of it. One that fits nicely on a 800x600 screen, and one that doesnt (meant for 1024x768+)

unfourtantely the bigger one looks alot better. but I do not want it to go off the screen for gamers with smaller screen resolutions.

so bassicaly what i want to do is use a different graphic depending on what's happening (if the person has less than 1024x768 screen res or if the user has 1024x768 or above). Bassicaly it's a super duper tricky fluid layout.... thing....

Can this be done or will I just have the face the music?

I have a menu that needs to be pixel perfect.
It uses ID's for each menu item with a specific width and background positioning property when the user hovers over the each menu item. This is fine so far.

It is getting tricky now because I need to use a drop down menu. Using the Superfish js, it uses a class (sfHover) appended on the parent ul when the child li is hovered. That would be fine if it were a mere background colour but in this case I need to control background positioning.

eg
li#main-nav-3 a:hover{ width:83px; background position:-227px 0;}
...
<li id="main-nav-3"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...

on rollover:

...
<li id="main-nav-3" class="sfHover"><a href="#">Attractions</a></li>
<li id="main-nav-3" =><a href="#">Business</a>
<ul>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
<li><a href="#">dummy link</a></li>
</ul>
</li>
...


I just wish you could write li#main-nav-3.sfHover a:hover {new background position} to solve this but you can't.

Anyone else faced a similar problem?

Link to the problem page:
http:sidouglas.net/cmx/tourism/
The rollovers are : Business a nd About NZ.

Hi!

Let's say we have this situation:

Code:

 <div>
<div class="second"> 
</div>
</div>

Is there a way to grab in CSS the first div with the help of the class second?

I mean, something like this:

div .second (now I get the second div but I want the first).

I don't think it is possible... that's a real pity. Im I wrong?

Thanks!

Okay, I'm trying to create dynamically sized blocks that can be pretty much and width and height, while maintaining these fancy corners I'm using. If you look closely, each of the corners have a little inner curve in them... Here is how I did it in HTML/CSS....

1. I spliced it up so there is an image for each of the four corners (10x10), two background images for the top and bottom bars (1x10) and two background images for the left and right bars (10x1).

2. Created the structu
[html]
<div class="block-top">
<div class="block-tl"></div>
<div class="block-tr"></div>
</div>
<div class="block-content">
<div class="block-ml">
<div class="block-mr">
<div class="block-center">
<p>this is some content</p>
</div>
</div>
</div>
</div>
<div class="block-bottom">
<div class="block-bl"></div>
<div class="block-br"></div>
</div>
[/html]

3. Created the CSS
[css]
.block-top, .block-bottom {
height:10px;
line-height:0;
font-size:0;
}
.block-tl, .block-bl {
float:left;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-tr, .block-br {
float:right;
height:10px;
width:10px;
line-height:0;
font-size:0;
}
.block-center {
padding:0 10px;
background-color:red;
}
.block-content {
clear:both;
}

.block-top {
background-image:url(../images/block-light-TM.jpg);
}
.block-tl {
background-image:url(../images/block-light-TL.jpg);
}
.block-tr {
background-image:url(../images/block-light-TR.jpg);
}
.block-ml {
background-image:url(../images/block-light-ML.jpg);
background-repeat:repeat-y;
background-position:left;
}
.block-mr {
background-image:url(../images/block-light-MR.jpg);
background-repeat:repeat-y;
background-position:right;
}
.block-bottom {
background-image:url(../images/block-light-BM.jpg);
}
.block-bl {
background-image:url(../images/block-light-BL.jpg);
}
.block-br {
background-image:url(../images/block-light-BR.jpg);
}
[/css]

In all browsers except IE6 it displays fine, except for one little problem. If I put anything in the content area that has a margin, the margin puts spacing above and below the whole block-content area for some reason. I don't understand that at all, because the margin'ed element is within all those nested divs. I thought it should then just expand that inside div to fit?? Nope...

In IE6 the ML and MR backgrounds don't appear at all.

What am I dong wrong here? Hope this wasn't too complicated to understand.

NOTE: I have zero padding and margin on all the elements as well.

Hey all,

I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here!

Notes: I'm a bit of a css beginner and I'm using Wordpress on my site.

I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website).

Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post.

So how can I style the link without creating a link class??

Appreciate anyone's thoughts on this,

Cheers!

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Thanks for taking the time to read my question

If I have

<div class="main"> something here
<div class="sub1"> something here that has more height than the above div</div>
</div>

Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main.

Does it have to be display: block; or float: left; ?


Brad

Hi everyone.

I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate.



Current CSS:
Code:

.interior #sidebar ul{
	padding:20px 0 5px 0px; 
	list-style:none;
}
.interior #sidebar ul.outerUL {border-bottom:1px solid white;}
.interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;}
.interior #sidebar ul.innerUL{padding:5px 0;}
.interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;}
.interior #sidebar ul li.outerLI a{
	border-top:1px solid white;
	padding:0 0 0 20px;
	color:#003371;
	width:100%;
}
.interior #sidebar ul li.middleLI a{
	padding-left:25px;
	color:#3f699d;
}
.interior #sidebar ul li.innerLI a{
	padding:2px 0 2px 30px;
	color:#0f8b53;
}
.interior #sidebar a {text-decoration:none;}

Current HTML:
Code:

            	<div id="sidebar">
                	<ul class="outerUL">
                    	<li class="outerLI"><a href="#">Our Misssion</a></li>
                        	<ul class="middleUL">
                        	<li class="middleLI"><a href="#">Quality</a></li>
                            	<ul class="innerUL">
                            	<li class="innerLI"><a href="#">Dedication</a></li>
                                <li class="innerLI"><a href="#">Perseverance</a></li>
                                </ul>
                            <li class="middleLI"><a href="#">Choice</a></li>
                            <li class="middleLI"><a href="#">Value</a></li>
                            </ul>
                        <li class="outerLI"><a href="#">Parkland Timeline</a></li>
                        <li class="outerLI"><a href="#">Management Bios</a></li>
                    </ul>
                </div>

I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div.

well if i dont put any css firefox does this with nested link:
Code:

link1
link2
    sublink1

IE doesnt indent the sublink.

so is there any hack available?

PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad?
cheers

I would be very grateful for any help offered. The following html and css are displaying very differently between IE7 and Firefox 2. The HTML is Strict verified and the CSS has also been verified. Please help me!

I don't mind you telling me an idiot. Just please constructively explain how I'm an idiot and how I can stop being an idiot. Thanks.

HTML Document
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head><title>
	Kaua'i Historical Society Membership Maintenance
</title><link type="text/css" rel="stylesheet" href="Kauai.css" /></head>
<body>
    <form method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMjAyNDM1NzdkGAEFEGN0bDAwJExvZ2luVmlldzEPD2QCAmT6FXaep7s2kkgUAi6bmGTUd7hIOw==" />
</div>

        <div id="Header">
            <a href="(URL address blocked: See forum rules)" title="Kaua'i Historical Society">
                <img src="images/mastheadBar.gif" style=" border-style:none;" alt="Kaua'i Historical Society" /></a></div>
        <div id="Content">
            
    <div class="containerparent">
        Manage members
        <div id="membercontainer">
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlCreateMember" title="Create Member Record" href="CreateMember.aspx"><img title="Create Member Record" src="images/businessman_add.png" alt="Create Member Record" style="border-width:0px;" /></a><br />
                Create member</div>
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlFindMember" title="Find Member Record" href="FindMember.aspx"><img title="Find Member Record" src="images/businessman_find.png" alt="Find Member Record" style="border-width:0px;" /></a><br />
                Find member</div>
        </div>
    </div>
    <p>
        &nbsp;</p>
    <div class="containerparent">
        Manage pledge drives
        <div id="pledgedrivecontainer">
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlCreateDrive" title="Create Pledge Drive" href="CreateDrive.aspx"><img title="Create Pledge Drive" src="images/businessman_add.png" alt="Create Pledge Drive" style="border-width:0px;" /></a><br />
                Create pledge drive</div>
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlFindDrive" title="Find Pledge Record" href="FindDrive.aspx"><img title="Find Pledge Record" src="images/businessman_find.png" alt="Find Pledge Record" style="border-width:0px;" /></a><br />
                Find pledge record</div>
        </div>
    </div>
    <p>
        &nbsp;</p>
    <div class="containerparent">
        Manage pledge levels
        <div id="pledgelevelcontainer">
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlCreateLevel" title="Create Pledge Level" href="CreateLevel.aspx"><img title="Create Pledge Level" src="images/businessman_add.png" alt="Create Pledge Level" style="border-width:0px;" /></a><br />
                Create pledge level</div>
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlFindLevel" title="Find Pledge Level" href="FindLevel.aspx"><img title="Find Pledge Level" src="images/businessman_find.png" alt="Find Pledge Level" style="border-width:0px;" /></a><br />
                Find pledge level</div>
        </div>
    </div>
    <p>
        &nbsp;</p>
    <div class="containerparent">
        Manage letters
        <div id="lettercontainer">
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlGenerateThankYou" title="Generate Thank You Letters" href="GenerateThankYou.aspx"><img title="Generate Thank You Letters" src="images/businessman_add.png" alt="Generate Thank You Letters" style="border-width:0px;" /></a><br />
                Generate thank you letters</div>
            <div class="box">
                <a id="ctl00_ContentPlaceHolder1_hlGenerateReminder" title="Generate Reminder Letters" href="GenerateReminder.aspx"><img title="Generate Reminder Letters" src="images/businessman_find.png" alt="Generate Reminder Letters" style="border-width:0px;" /></a><br />
                Generate reminder letters</div>
        </div>
    </div>

        </div>
        <div id="Menu">
            
                    Welcome
                    <span id="ctl00_LoginView1_lnUser">fred</span>.<br /><br /><span style="font-size:xx-small;">Admin enabled</span>
                        
        </div>
        <div id="Search">
        Search here</div>
    </form>
</body>
</html>

CSS File
Code:

body
{
	margin: 0px;
	padding: 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #333333;
	background-color: white;
}
h1
{
	margin: 0px 0px 15px 0px;
	padding: 0px;
	font-size: 28px;
	line-height: 28px;
	font-weight: 900;
	color: #cccccc;
}
p
{
	font: 11px/20px verdana, arial, helvetica, sans-serif;
	margin: 0px 0px 16px 0px;
	padding: 0px;
}
#Content > p
{
	margin: 0px;
}
#Content > p + p
{
	text-indent: 30px;
}

a
{
	color: #09c;
	font-size: 11px;
	text-decoration: none;
	font-weight: 600;
	font-family: verdana, arial, helvetica, sans-serif;
}
a:link
{
	color: #09c;
}
a:visited
{
	color: #07a;
}
a:hover
{
	background-color: #eeeeee;
}

#Header
{
	margin: 50px 0px 10px 0px;
	padding: 17px 0px 0px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height: 73px; /* 14px + 17px + 2px = 33px */
	border-style: solid;
	border-color: black;
	border-width: 1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height: 11px;
	background-color: #eeeeee; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.  Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.  IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style  declaration. The incorrect IE5/Win value is above, while the correct value is  below. See (URL address blocked: See forum rules)/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family: inherit;
	height: 14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body > #Header
{
	height: 14px;
}

#Content
{
	position: absolute;
	top: 100px;
	left: 150px;
	padding: 0px;
}

#Menu
{
	position: absolute;
	top: 100px;
	left: 20px;
	width: 100px;
	padding: 10px;
	background-color: #eeeeee;
	border: 1px solid #000000;
	line-height: 17px; /* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: medium;
}

#Search
{
	position: absolute;
	margin-left:8px;
	top: 100px;
	left: 500px;
	width: 225px;
	padding: 10px;
	background-color: #eeeeee;
	border: 1px solid #000000;
	line-height: 17px; /* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: medium;
}
/* Again, "be nice to Opera 5". */
body > #Menu
{
	width: 100px;
}

/* Again, "be nice to Opera 5". */
body > #Search
{
	width: 100px;
}

#membercontainer
{
	margin-left: 15px;
	margin-right: auto;
	width: 18.75em;
}

#pledgedrivecontainer
{
	margin-left: 15px;
	margin-right: auto;
	width: 18.75em;
}

#pledgelevelcontainer
{
	margin-left: 15px;
	margin-right: auto;
	width: 18.75em;
}

#lettercontainer
{
	margin-left: 15px;
	margin-right: auto;
	width: 18.75em;
	text-align:center
}
#membercontainer .box
{
	/*border: 1px solid black;*/
	background-color: #ffffff;
	color: navy;
	float: left;
	line-height: 1.5;
	margin: 0.5em;
	text-align: center;
	font-size: xx-small; /*height: 1.5em;   width: 1.5em;*/
}

#pledgedrivecontainer .box
{
	/*border: 1px solid black;*/
	background-color: #ffffff;
	color: navy;
	float: left;
	line-height: 1.5;
	margin: 0.5em;
	text-align: center;
	font-size: xx-small; /*height: 1.5em;   width: 1.5em;*/
}

#pledgelevelcontainer .box
{
	/*border: 1px solid black;*/
	background-color: #ffffff;
	color: navy;
	float: left;
	line-height: 1.5;
	margin: 0.5em;
	text-align: center;
	font-size: xx-small; /*height: 1.5em;   width: 1.5em;*/
}

#lettercontainer .box
{
	/*border: 1px solid black;*/
	background-color: #ffffff;
	color: navy;
	float: left;
	line-height: 1.5;
	margin: 0.5em;
	text-align: center;
	font-size: xx-small; /*height: 1.5em;   width: 1.5em;*/
}

/*#membercontainer, #pledgedrivecontainer, #pledgelevelcontainer .box.selected {
  background-color: orange;
}*/

.containerparent
{
	font-size: medium;
	font-weight: bold;
	color: navy;
	padding: 5px;
	border-style: solid;
	border-color: navy;
	border-width: 1px;
	width: 18.75em;
}

Is it psosible to have IF statements with CSS?

Example:

IF table.length = 500px
then
bg.image = xx

else if

table.length < 500px
bg.image = xx


Thanks

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(...)"> <html xmlns="(...)"> 

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="stylesheet,css" />  
<title>Test page.</title> 
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script> 
</head>  

<body>  
<div id="main"> 

<!--- <object type="application/x-shockwave-flash" data="../Graphics/Site/site-banner-top,swf" width="800" height="300"> </object> !--> 
	
<div id="maintop" ></div>  
   	
<div id="mainbody">  		
     <div id="testleft"> 			
          <div id="leftpaneltop"></div> 			
          <div id="leftpanelbody"><p> test</p>  </div> 			
          <div id="leftpanelbottom"></div> 		
     </div>  
		
     <div id="test_right"> 			
          <div id="rightpaneltop"> </div> 			
          <div id="rightpanelbody"> test</div>
           <div id="rightpanelbottom"></div> 		
      </div>          	

</div>  	

<div id="mainbottom"></div>  
</div>   

<script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script>
 </body> 
</html>

css:

Code:

@charset "utf-8"; /* CSS Document */  

body{ 	
   background-color:#569753;  	
   padding:0px; 	
   width:800px; 	
   margin-top:0px; 	
   margin-left:10%; 
}  

#main{ 	
   background-image:url(../Graphics/Site/body-bg,png);
   background-repeat:repeat-y; 	
   width:800px; 	
   position: relative; 	
   padding:0px; 
} 

#maintop{ 	
   background-image:url(../Graphics/Site/body-top,png); 	
   width:800px; 	
   height:50px; 	
   position:relative; 	
   margin-top:0px; 
} 

#mainbody{ 	
   background-image:url(../Graphics/Site/body-bg,png); 	
   background-repeat:repeat-y; 	
   position:relative; 	
   width:800px; 	
   margin-top:50px; 
} 

#mainbottom{ 	
   background-image:url(../Graphics/Site/body-bottom,png); 	
   position:relative; 	
   width:800px; 	
   height:50px; 	
   padding:0px;  
} 

#leftpaneltop{ 	
   background-image:url(../Graphics/Site/panel_left_top,png); 
   background-repeat:repeat-x; 	
   background-color:#99cc99; 	
   position:relative; 	
   width:200px; 	
   height:25px; 
} 
#leftpanelbottom{ 	
   text-align:left; 	
   background-image:url(../Graphics/Site/panel_left_bottom,png); 	
   width:200px; 	
   height:21px; 	
   padding:0; 	
   position:relative; 
}

leftpanelbody{ 
   font:Verdana, Geneva, sans-serif; 	
   width:200px; 	
   text-align:left; 	
   text-shadow:#000; 	
   color:#FFF; 	
   margin-top:auto; 	
   position:relative; 
} 

#testleft{ 	
   background-color:#569753; 	
   position:relative; 	
   padding:0; 	
   margin-left:10px; 	
   width:200px; 	
   height:inherit; 
}  

#test_right{ 	
   position:relative; 	
   padding:0px; 	
   margin-left:30%; 	
   margin-top:-200px; 	
   background:#000; 	
   width:508px;
 }
 
#rightpaneltop{ 	
   background-image:url(../Graphics/Site/right_panel_top,png); 	
   background-color:#000; 	
   width:508px; 	
   height:37px; 	
   margin-top:0px; 	
   position:relative; 
}
 
#rightpanelbody{
   background-image:url(../Graphics/Site/right_panel_middle.png); 	
   width:508px; 	
   position:relative; 
} 

#rightpanelbottom{ 
   background-image:url(../Graphics/Site/right_panel_bottom,png); 
   position:relative; 	
   width:508px; 	
   height:25px;  
} 

p{ 	
   font:Verdana, Geneva, sans-serif; 	
   font-size:12px; 	
   font-style:normal; 	
   color:#FFF; 
} 

Hope the above scripts can be viewed easily. I just started using css, and for some reason I can't get this simple template to function in Mozilla Firefox. I don't know how nested divs behave, but it's really frustrating. The problem is that i have two main divs within one encompassing div. The encompassing div is supposed to expand in height based upon the height and/or position of the nested two divs, but it only expands based one of these nested divs. These nested divs have divs inside them too.

This only happened in mozilla firefox. In IE it works. I'm not using floats or anything.

I don't have it up on a site, but if necessary I'll post a pic of the rendering.

Thanks in advance.

Hi All,

I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue.

Please look at my html and the css code below:

Code:

div class="node">
<div class="taxonomy"></div>        
<div class="content"> 		
<p>Photo Gallery Body Here</p> 
<div class="field field-type-filefield field-field-image">    
 <div class="field-items">             
<div class="field-item odd">                    
<a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1"  width="125" height="125" /></a>        </div>                         
</div> 
</div> 	
</div> 
</div>                                
</div>                             
</div>

Code:

.node .field .field-type-filefield .field-field-image .field-items .field-item .odd 
{ 	
border: 1px solid #fff; 	
width: 125px; 	
height: 125px; 	
margin-top: 35px; 	
margin-right: 28px; 	
float: left; 
}

The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site.

How do I target this specific class properly?

Thanks!

I am trying to figure out how to use the clear functionality nested within divs. I am already using floats to position 3 columns for the layout, but would like to use the clear functionality to help with form placement in the second column. The problem is, even though it is nested with a div dedicated to the center column, it still uses the right and left column to judge clears...thus its all pushed below the right and left column. Any ideas?