Forum Moderators: not2easy
here is the simplified html to it - navigation is the problem div.
here is a link to a screenshot of the issue (i hope this is ok to post) < sorry, no screenshots - see Forum Charter [webmasterworld.com] >
-----------------------------------
<body id="indexBody">
<div id="mainWrapper">
<div class="navigation">
<div id="navmain">
<ul id="navlist">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-->
<div class="menu">
<div class="main">
<div class="clear"></div>
</div>
</div>
--------------------------------------
here is the applicable CSS for it
--------------------------------------
body{
padding:0;
margin:0;
background:#191d39 url(../images/bg_stretch.gif) repeat-x;
width:100%;
vertical-align:top;
font-family: Helvetica Neue, Helvetica, Arial, Geneva, sans-serif;
color:#1f1f1f; line-height:13px; font-size:11px;
}
.main {width:766px; margin:auto;}
.navigation {background: url(../images/fl_head.gif) no-repeat; text-align: center; width: 864px; height: 100px; margin-top: 30px; margin-right:auto; margin-bottom:0px; margin-left:auto;}
.navigation .left {float:left; padding: 18px 0 0 0;}
.navigation .right {float:right; padding-right:30px;}
.navigation .links {text-align:right; padding:26px 0px 12px 0px; color:#6D6D6D;}
.navigation .links a {color:#FFF;}
------------------------------------------
aligns perfect in FF, just not IE6+. the only way ive found to get it to align is to use position:absolute;left:200px;. i originally thought the doctype was the issue (as the main site, which works fine in both browsers, is strict, and the zencart store was transitional), however changing this to strict did not help the issue.
any and all help would be greatly appreciated. and any other info you need, or code posted, please let me know.
id also like to take a quick second and say thanks to suzeuk. she welcomed me warmly to this site, and explained what i did wrong in my previous post, and i really appreciate it. you dont find that kind of kindness often.
[edited by: tedster at 9:28 am (utc) on Sep. 8, 2008]
Ryan
--------------------------------
#mainWrapper {
width: 100%;
vertical-align: top;
margin-left:auto;
margin-right:auto;
}
body
{
text-align:center; /*for IE*/
}#mainWrapper
{
position:relative;
width: 800px; /*or whatever the width is*/
margin: 0 auto;
text-align:left; /*for IE*/
/*remove vertical-align:top; it does nothing*/
}
Now set all of your positioning based upon the top left corner of the wrapper. It will all automatically be centered.
For the Navigation it would look like this:
.navigation
{
position:absolute;
top:0px;
left:0px;
}
Of course, you may have more than one thing using the navigation class, so you may want to use an id to specify the positioning information. Like "mainNav".
Tell me how that works for you.
Ryan
-----------------------------
.footer {background: #60647e; width: 864px; padding:10px 0px 10px 0px;position:absolute;top:0px;left:0px; z-index:999;display: block;}
ive managed to get all the following divs aligned based off top/left, but how would i set the footer? the content area varies in height, due to it being a shopping cart.
Unfortunately a normal result when using absolute positioning. Not sure where you will have placed div#footer amongst the nested divs, but it might look something like this:
<div id="mainWrapper">
...
<div class="main"> </div>
...
<div class="footer">My Footer</div>
</div> <!--end mainWrapper-->
Most of the css positioning becomes unecessary as the footer will naturally drawn after the previous element. (In the fabricated eg, that is div.main)
.footer {
background: #60647e;
width: 864px;
/*padding:10px 0px 10px 0px;*/
padding:10px 0; /*shorthand */
/*position:absolute;
top:0px;
left:0px;
z-index:999;
display: block; last 4 lines not required */
}
i removed the lines like you stated, so that its just
.footer {background: #60647e; width: 864px; padding:10px 0px 10px 0px;position:absolute;}
however, the footer still appears up top in ie6+ and FF3
last 4 lines should have read last 5 lines
That is, all the lines that have been commented out (between the /* */)
Reason: Ordering position:absolute requires a position to be specified as well. If none is specified the element does not know where to position itself, so it usually sulks at top left.
If removing the position:absolute does not work, post some of your html or at least enough for me to have a fair chance of guessing where you placed the footer.
On of the things you might also try is floats. Rather than using absolute positioning on all of your components - you can float them left or right within the wrapper. Then the footer will appear at the bottom of the page regardless of content height. This, I think, is the preferred method - but if the first one is easier for you go for it. We'll help either way.
Ryan
--------------------------------------------------------------
<body id="indexBody">
<div id="mainWrapper">
<div class="navigation">
<div id="navmain">
<ul id="navlist">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-->
<div class="menu">
<div class="main">
<div class="clear"></div>
</div>
</div>
<div class="content_head">
<div class="content_bg">
<div class="main">
<div class="footer main">
<div class="left"></div>
<div class="right">
<div class="margin">
Please post what you currently have for your css.
also, the divs are closed, i just trimmed away all that to make less for me to post.
this is my css as it stands now
---------------------------------------
body{
padding:0;
margin:0;
background:#191d39 url(../images/bg_stretch.gif) repeat-x;
width:100%;
vertical-align:top;
font-family: Helvetica Neue, Helvetica, Arial, Geneva, sans-serif;
color:#1f1f1f; line-height:13px; font-size:11px;
text-align:center;
}
#mainWrapper {
position:relative;
width: 864px;
margin: 0 auto;
text-align:left;
}
.navigation {background: url(../images/fl_head.gif) no-repeat; text-align: center; width: 864px; height: 100px; margin-top: 30px; margin-right:auto; margin-bottom:0px; margin-left:auto; position:absolute;top:0px;left:0px; }
.content_head{
background: url(../images/fl_banner.jpg) no-repeat;
margin: 0 auto 0 auto;
width: 864px;
position:absolute;
top:130px;
left:0px;
height: 241px;
}
.content_bg {background: url(../images/content_bg.gif) center repeat-y;width: 864px;margin: 0 auto 0 auto; position:absolute;top:372px;left:0px;}
.main {width:766px; margin:auto;}
.footer {background: #60647e; width: 864px; padding:10px 0px 10px 0px;}
1. Validation [validator.w3.org] helps pick up basic errors. The following test page validates and identifies (and adds) a close for every element, plus some changes for syntax, and removal of an odd partial comment. None of these things may have been directly causing the problem, but they don't help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Title</title>
<link rel="stylesheet" type="text/css" href="mystylesheet.css" >
</head><body id="indexBody">
<div id="mainWrapper"> mainwrapper - purple<div class="navigation"> Navigation
<div id="navmain"> navmain -red
<ul id="navlist">
<li>navlist</li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!--end navlist-->
</div> <!--end navmain--><!--Remove this partial comment <!-->
<div class="menu"> menu
<div class="main" > main
<div class="clear"></div>
</div> <!--end main-->
</div> <!--end menu--><div class="content_head">content_head - dashed black - 241px
<div class="content_bg">content_bg - orange
<div class="main">main lime<div class="footer main">footer main - purple
<div class="left">Left
<div class="right"> Right
<div class="margin"> Margin
<div class="copy"></div>
<div id="siteinfoIP">siteinfo </div>
</div><!--end margin-->
</div> <!--end right-->
</div><!--end left--><!--<br class="clear" /> this is xhtml-->
<br class="clear"></div> <!--end footer main-->
</div> <!--end main-->
</div> <!--end content_bg--></div><!--end content_head-->
</div> <!--end mainwrapper-->
</body>
</html>
2. The statement of colours etc helps identify elements given the nested structure. Here's the test css (just the minimum required to view the layout):
body{
padding: 0;
margin: 0;
/*background:#191d39 url(../images/bg_stretch.gif) repeat-x; commented out for testing visibility*/
width: 100%;
/*vertical-align: top; remove - adds nothing */
font-family: Helvetica Neue, Helvetica, Arial, Geneva, sans-serif;
/*color: #1f1f1f; commented out for test visibility*/
line-height: 13px;
font-size: 11px;
text-align: center;
}#mainWrapper {
/*position:relative; not required at this stage*/
width: 864px;
margin: 0 auto;
text-align:left;
border:2px solid purple; /* added for testing */
}.navigation {
/* background: url(../images/fl_head.gif) no-repeat; commented out for testing*/
border:1px solid red;/* added for testing */
/*width: 864px; remove - already set on mainwrapper*/
text-align: center;
height: 100px;
/*margin-top: 30px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto; removed for shorthand */
margin:30px auto 0 auto; /* use shorthand */
/*position: absolute;
top: 0px;
left: 0px; remove - not required*/
}.content_head{
/*background: url(../images/fl_banner.jpg) no-repeat; commented out for testing*/
border:2px dashed black; /* inserted for testing */
/*margin: 0 auto 0 auto; remove - not required */
/*width: 864px; remove - set on #mainwrapper*/
/*position:absolute;
top:130px;
left:0px; remove - not required */
height: 241px;
}.content_bg {
/*background: url(../images/content_bg.gif) center repeat-y; commented out for testing*/
border:1px solid orange; /* inserted for testing */
/*width: 864px; set on #mainwrapper*/
/*margin: 0 auto; remove - not required*/
/*position: absolute;
top: 372px;
left: 0px; remove - not required*/
}.main {
border:1px solid lime; /* inserted for testing */
width: 766px;
margin: auto;
}.footer {
/* background: #60647e; commented out for testing */
border:1px solid violet; /* inserted for testing */
/*width: 864px; remove - set on #mainwrapper*/
padding: 10px 0px 10px 0px;
}
3. Header Difficult to identify which element is the "header" - but all elements are now locked inside the centred #mainwrapper, so that problem should be resolved.
4. Footer My guessing where elements were intended to close could be wrong - and that will affect the solution. But, if footer is div.footer main, then the test code shows it is not naturally flowing below the "content" because of the nesting:
div.footer needs to be removed from that nest for it to extend the full width of div#mainwrapper and naturally lie after all the "content". On the code provided (and with the elements closed per my "guess"), I'd suggest locate it immediately above div#mainwrapper so can be drawn at the foot of the page, regardless of how much content there is. Plus remove the class .main - it only adds unnecessary centring and a width that is over-ridden. Like so:
content_head - height at 241px
-----content_bg - drawn from top left of content_head
---------main - centred, maximum width of 766px
-------------footer main - takes left edge from centred main, then must expand beyond main's right edge because of 864px width.
</div><!--end content_head-->
<div class="footer">footer - purple
<div class="left">Left
<div class="right"> Right
<div class="margin"> Margin
<div class="copy"></div>
<div id="siteinfoIP">siteinfo </div>
</div><!--end margin-->
</div> <!--end right-->
</div><!--end left-->
<!--<br class="clear" /> remove - this is xhtml-->
<br class="clear"><!--insert html-->
</div> <!--end footer-->
</div> <!--end mainwrapper-->
5. No absolute positioning, no floats! Usually not required to achieve a simple centred layout. They may have initially worked because they remove elements from the "flow", and sometimes that hides basic errors or code decisions, that - as you've discovered - reappear in another form later. On the code provided, I wonder if elements of the design should be floated, but that can be achieved by floating them within their own container divs - and isn't required to remedy the footer issue you described.
6. Code decisions are personal, but initial impression is "div-itis" and "class-itis" - a div is a division of a page - say header, content, footer. I wonder if the code could be simplified by styling other html elements (eg, p) within those main divisions instead, and that may well reduce the number of classes too.
Happy coding
