Inman Position Clearing Problem

MitaDC

12-16-2006, 10:07 PM

Hey guys,

Trying to use the Inman position clearing method to get my footer to drop down but I can't seem to get it to work. Can somebody take a look at my site and tell me what is wrong? Code also below

fairway.a-lantech.com

HTML:
<!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>Welcome to Fairway Floor and Design Center</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="color.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="branding">
<a href="index.html"><h1>Fairway Floor</h1></a>
<h2>Abby Carpet</h2>
</div>
<div id="nav_main">
<ul id="nav_links">

<li id="nav_home"><a href="#">Home</a></li>
<li id="nav_about"><a href="#">About Us</a></li>
<li id="nav_staff"><a href="#">Our Staff</a></li>
<li id="nav_brands"><a href="#">Major Brands</a></li>
<li id="nav_choice"><a href="#">Right Choice</a></li>
<li id="nav_carpet"><a href="#">Carpet</a></li>

</ul>
<ul id="nav_sub">
<li id="abby_carpet"><a href="http://www.abbeycarpet.com" target="_blank">Visit Abbey Carpets</a></li>
<li>|</li>
<li id="host_cleaning"><a href="http://www.hostcarpetcleaning.com" target="_blank">Visist Host Carpet Cleaning</a></li>
</ul>
</div>
<div id="content" class="c clear_children">
<div id="content_main" class="pc cc_tallest">
<h2>Cool Summer Savings at Fairway Floor</h2>
<p>Let the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you want.</p><br />
<p>Come on in and see why we are the #1 choice for quick and easy one stop shopping for Homeowners and Contractors alike.</p>
</div>
<div id="content_sub" class="sc">
<ul id="content_sub_ul">
<li>Carpet</li>
<li>Vinyl</li>
<li>Ceramic Tile</li>
<li>Wood Floors</li>
<li>Window and Wall Treatments</li>
<li>Laminate Flooring</li>
</ul>
</div>
</div>

<p>Copyright (C) 2006 Fairway Floor Design Center</p>
<p>Website Designed by: <a href="http://www.a-lantech.com" target="_blank">A-LanTech Computers</a></p>
<script type='text/javascript' src="si-clear-children.js"></script>
</body>

</html>

CSS1

/* Normalizing margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, input, p, blockquote, th, td
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6
{ font-size : 100% }

/* Removes list-style from lists */
ol, ul
{ list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Remove list-styles from lists */
table
{ border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset, img
{ border : 0; }

/*Left-aligns text in caption and th */
caption, th
{ text-align : left; }

/* Removes quotation marks from q */
q:before, q:after
{ content : ''; }

/*footer fix*/
.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */

html {
text-align: center;
}

body {
width: 800px;
padding-top: 35px;
text-align: left;
margin-top: 0px;
position: relative;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#branding {
width: 100%;
height: 167px;
}
ul#nav_links li {
display: inline;
}
ul#nav_links {
position: absolute;
top: 0px;
left: 200px;
margin: 0px;
height: 40px;
}
li#nav_home a, li#nav_about a, li#nav_brands a, li#nav_staff a, li#nav_choice a, li#nav_carpet a, li#nav_contact a {
height: 30px;
width: 99px;
display: block;
float: left;
text-align: center;
padding-top: 10px;
padding-bottom: 0px;
border-left-width: 1px;
border-left-style: solid;
text-decoration: none;
}

div#nav_main {
position: relative;
height: 40px;
}
ul#nav_sub {
position: absolute;
top: -167px;
right: 0px;
padding-right: 10px;
}

#branding h1 {
background-image: url(images/fairwaylogo.png);
background-repeat: no-repeat;
width: 220px;
text-indent: -9999px;
position: relative;
top: -18px;
z-index: 10;
left: -20px;
height: 185px;
}
div#content_sub {
width: 190px;
position: absolute;
padding-top: 1em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
left: 600px;
}
div#content {
position: relative;
width: 100%;
}

ul#nav_sub li {
display: inline;
font-size: 10px;
}

div#content_main {
width: 600px;
left: 0%;
position: absolute;
padding-top: 1em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
li#nav_home a:hover, li#nav_about a:hover, li#nav_brands a:hover, li#nav_staff a:hover, li#nav_choice a:hover, li#nav_carpet a:hover, li#nav_contact a:hover {
border-left-width: 1px;
border-left-style: solid;
text-decoration: none;
}
ul#nav_sub li a {
text-decoration: none;
}
ul#nav_sub li a:hover {
text-decoration: underline;
}
ul#cards_credit {
position: absolute;
top: 10px;
}

CSS2:

#branding {
background-color: #382159;
}

body {
background-color: #F0F5FA;
}
div#nav_main {
background-color: #5582A7;
}
li#nav_home a, li#nav_about a, li#nav_brands a, li#nav_staff a, li#nav_choice a, li#nav_carpet a, li#nav_contact a {
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
text-decoration: none;
color: #FFFFFF;
}
ul#nav_sub li a {
color: #FFF;
}

li#nav_home a:hover, li#nav_about a:hover, li#nav_brands a:hover, li#nav_staff a:hover, li#nav_choice a:hover, li#nav_carpet a:hover, li#nav_contact a:hover {
display: block;
text-align: center;
text-decoration: none;
border-right-color: #666666;
border-left-color: #666666;
background-color: #CDC7D5;
color: #000000;
}
ul#nav_sub li {
color: #fff;
}

Thanks!

Mita

koyama

12-16-2006, 11:44 PM

Hi MitaDC

I'm not sure I can help you with this one as I have not tried this method.

Anyway, I tried to save your page and the script wasn't there! Maybe a silly question, but are you sure have the script you are linking to?:confused:
<script type='text/javascript' src="si-clear-children.js"></script>

trigger_tre

12-16-2006, 11:50 PM

I could be wrong but I dont see why you need to use javascript just to have the footer drop down to the bottom of the page?

Why not wrap the main body and the footer in seperate div tags then just add a clear: both; to the main body tag so that the footer will always be below it?

-trigger

MitaDC

12-17-2006, 06:25 PM

Here is the link for what I am trying to do:
http://www.shauninman.com/post/heap/2006/05/22/clearance_position_inline_absolute

I tried clear : both but it doesn't work, I'm thinking because I am using absolute positioning.

There isn't a JS file that it really links to which confused me, but I downloaded the source from the above link and in his examples there's not a JS file either, just the link for one??

Anyways, thanks guys, will keep looking for a solution

MitaDC

12-17-2006, 07:03 PM

Found the JS file for it, still not working for me though :S

Cheyenne

01-02-2007, 09:13 PM

Hey I'm having the same problem...
Did you ever figure out what wasn't working with the .js file?
I got this tip out of the "Transcending CSS" book by Andy Clarke and am wondering what we're doing wrong; my footer's still bonkers.

mineral

01-09-2007, 07:48 PM

Hi Mita

I also got the Inman position clearing tip out of Transcending CSS.
I might be wrong, but could this line be missing in your CSS1 footer fix?

.pc,.sc{ position: absolute; top 0; left 0;}

Mineral

stewdabaker

01-11-2007, 04:00 PM

I am also trying to use the Inman position clearing fix, that I learned from transcending CSS by Andy Clarke, I also looked at the example page and linked code at http://www.shauninman.com/post/heap/2006/05/22/clearance_position_inline_absolute and cannot get my footer to drop as is says it should be doing. I do not have this online, only on my local machine, so I can't provied a URL, sorry. I've placed the code in <pre> tags in hopes this form will take it so you can see the code and help me out. I appreciate any help you can be at pointing out my miscode.

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="included/stylesheet/canaNEW-stylesheet.css" />

<title>Chico Avenues Neighborhood Association (CANA) - Home</title>
</head>

<body id="CANA">


<div id="branding">
<h1>Chico Avenues Neighborhood Association (CANA)</h1>
<blockquote>Help us work to improve the quality of life in our community, and enhance one of Chico's classic neighborhoods!</blockquote>

<p id="greeting">Welcome</p>
</div>

<div id="content" class="clear_children">


<div id="nav_main">
<h2>Site Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Meetings</a></li>
<li><a href="#">PhotoGallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Board</a></li>
</ul>
</div>


<div id="content_main" class="cc_tallest">
<h1>Chico Avenues Neighborhood Association (CANA)</h1>
<p>Help us work to improve the quality of life in our community, and enhance one of Chico's classic neighborhoods!</p>

<h2>Mission Statement</h2>
<p>The Mission of the Chico Avenues Neighborhood Association is to:</p>
<ul>
<li>Protect and enhance the livability and historic character of the neighborhood;</li>
<li>Promote communication and coordination with governmental, private, and public entities to strengthen our neighborhood;</li>
<li>Provide a forum for and to be a catalyst for the discussion of neighborhood and community planning issues;</li>
<li>Serve as an educational vehicle by communicating pertinent issues to the residents of the neighborhood; and</li>
<li>Maintain and improve a sense of pride and identity in the community.</li>
</ul>
<p>Read a copy of the organization's <a href="resources/Bylaws.pdf">Bylaws</a> and <a href="resources/IncorporationArticles.pdf">Articles of Incorporation</a>.</p>

<h2>CANA Boundries</h2>
<p>The Association spans the neighborhood that is enclosed by the following boundaries:</p>
<ul>
<li>The North side of Big Chico Creek,</li>
<li>The South side of Lindo Channel,</li>
<li>The West side of Mangrove Avenue, and</li>
<li>The East side of the Union Pacific Railroad tracks, within the City of Chico, CA.</li>
</ul>
<p>See a map of the Chico Avenues Neighborhood Association boundaries:</p>
<p><a href="CANAmap.asp"><img src="images/AVASC_Coverage_small.jpg" alt="map of Chico Avenues Neighborhood Association boundaries" /></a></p>
</div>
</div>


<div id="site_footer">
<h4><a href="#CANA" title="top of the page">CANA</a></h4>
<p><a href="mailto:sjo022669@yahoo.com?subject=CANA web site">Contact the Webmaster</a></p>
</div>

<script type="text/javascript" src="si-clear-children.js"></script>
</body>
</html>
</pre>

<pre>
@import url(color.css);

/* Begin Normalization */

/* Normalize Margins, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td{
margin: 0; padding: 0;
}

/* Normalize font-size for headers */
h1, h2, h3, h4, h5, h6{
font-size: 100%;
}

/* Normalize list-style from lists */
ol, ul{
list-style: none;
}

/* Normalize font-style and font-weight */
address, caption, cite, code, dfn, em, strong, b, th, var{
font-style: normal; font-weight: normal;
}

/* Normalize list-style */
table{
border-collapse: collapse; border-spacing: 0;
}

/* Normalize border on fieldset and img */
fieldset, img{
border: 0;
}

/* Normalize text in caption and th by left-align */
caption, th{
text-align: left;
}

/* Normalize quotation marks from q */
q:before, q:after{
content: '';
}

/* End Normalization */

html{
text-align: center;
}

body{
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
}

div#content{
position: relative;
width: 100%;
}

div#nav_main{
position: absolute;
left: 0;
width: 30%;
}

div#content_main{
position: absolute;
left: 30%;
width: 70%;
}

div#branding, div#nav_main, div#site_footer{
width: 100%;
}

/* =si_clear_children */
.pc, .sc{position: absolute; top: 0; left: 0;}
.clear_children, .cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/* PREVENTS MISSING CHILDREN IN IE WIN 5.0 */
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
</pre>

<pre>
html{
background-color: #708090;
}

body{
padding-top: 50px;
}

div#branding{
height: 200px;
background: transparent url(../../images/mockheaderbackgroundtemplat.jpg) no-repeat 0 0;
}

div#branding h1{
font-size: 2em;
text-align: center;
margin-top: 75px;
font-style: italic;
}

div#branding blockquote{
position: absolute;
top: -9999px;
}

p#greeting{
position: relative;
top: 15px;
left: 40px;
margin: 0;
font-weight: bold;
font-style: italic;
}

div#content{
background-color: #fff;
}

div#nav_main{
position: relative;
z-index: 1;
height: 400px;
background: transparent url(../../images/IMG_01962.JPG) no-repeat 0 0;
}

div#nav_main h2{
position: absolute;
top: -9999px;
}

ul#nav_left{
position: absolute;
top: 3px;
left: 28px;
margin: 0;
width: 460px;
}

ul#nav_left li a{
font-weight: bold;
margin-right: 10px;
padding-right: 10px;
}

div#site_footer{
position: relative;
width: 100%;
height: 20px;
background: white;
}

div#site_footer p{
text-align: right;
font-size: .75em;
}

/*
div#content h1{
position: absolute;
top: -60px;
left: -80px;
width: 588px;
height: 253px;
background: transparent url(../../images/chico_mall.jpg) no-repeat;
text-indent: -9999px;
}
*/
</pre>

mineral

01-15-2007, 08:40 PM

Hi there.

I couldn´t read the whole thread, but want to write how I fixed the absolute positiong.
As I wrote i had the tip from Transcending CSS, but it didn´t quite work for me.

Here how i solved it, maybe it will help someone. ;)

CSS

/* =si_clear_children*/
.pc,.sc { position: absolute; top: 0; left: 0;}
.pc { width: 50%; left: 0; }
.sc { width: 50%; left:50%;}

.clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
.cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */

#content{
position:relative;
width: 100%;
}
#content_main{}
#content_sub{}

html

<div id="content" class="c clear_children">
<div id="content_main" class="pc cc_tallest">
</div>
<div id="content_sub" class="sc">
</div>
</div>

and the script before the closing body tag.
This example will seperate the content into 50:50% divs.

Against the article in the book, I left the CSS in content_main and content_sub empty, and thenceforward it worked. The id css only needed for further padding etc.

BridgetS

04-13-2008, 03:48 PM

Mineral,

Thanks for posting your solution. That worked for me as well.

stmclain

08-07-2008, 10:32 PM