homepage Welcome to WebmasterWorld Guest from 54.196.196.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Header/Navigation alignment in IE
netdude78




msg:3739884
 12:49 am on Sep 7, 2008 (gmt 0)

i cannot , for the life of me, figure out why this header/navigation div wont align on top of everything else in IE6+. it works fine on the main site, but on the subfolder (which is a zencart store), the header gets messed up in IE6+.

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]

 

csuguy




msg:3739890
 1:15 am on Sep 7, 2008 (gmt 0)

what about the css for the mainWrapper? Can you post that too plz. I don't think that image is allowed, so it'll probably be removed.

Ryan

netdude78




msg:3739893
 1:52 am on Sep 7, 2008 (gmt 0)

thank you for responding csuguy

--------------------------------

#mainWrapper {
width: 100%;
vertical-align: top;
margin-left:auto;
margin-right:auto;

}

csuguy




msg:3739905
 3:00 am on Sep 7, 2008 (gmt 0)

If your pages all have a set width, I would modify the wrapper like so:


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

netdude78




msg:3739922
 3:59 am on Sep 7, 2008 (gmt 0)

what can i say? youre a genius, worked perfectly. quick last question though, 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.

netdude78




msg:3739938
 5:02 am on Sep 7, 2008 (gmt 0)

sorry, almost forgot. footer css is below, and its currently still displaying at the very top of the page. i figured bottom:0; would fix it, but it didnt.

-----------------------------
.footer {background: #60647e; width: 864px; padding:10px 0px 10px 0px;position:absolute;top:0px;left:0px; z-index:999;display: block;}

alt131




msg:3739949
 5:59 am on Sep 7, 2008 (gmt 0)

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 */
}

netdude78




msg:3739950
 6:05 am on Sep 7, 2008 (gmt 0)

alt131, thank you for responding.

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

alt131




msg:3739952
 6:31 am on Sep 7, 2008 (gmt 0)

That was fast ;)

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.

csuguy




msg:3739972
 8:38 am on Sep 7, 2008 (gmt 0)

I agree with alt - please provide the full structure (w/o content preferably) so we can help you out with that. What you might try is find out which is going to be the longest element (probably content) on the page. At the very end of that element - stick the footer div. Use absolute positioning and use a neg left value to move it to the edge of the main container.

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

netdude78




msg:3740067
 4:06 pm on Sep 7, 2008 (gmt 0)

thank you both. removing position absolute did not work either. below is the html divs. everything is aligned properly up to content_bg

--------------------------------------------------------------

<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">

netdude78




msg:3740092
 5:59 pm on Sep 7, 2008 (gmt 0)

i tried setting the blocks to be float:left; - and while it looked good in FF (even the footer followed suit without setting it to float) , in IE the entire document moves to be left aligned.

csuguy




msg:3740117
 7:15 pm on Sep 7, 2008 (gmt 0)

did you put a float on the mainWrapper? if so take that off. Also, in your code there were several unclosed divs - that could be a problem too.

Please post what you currently have for your css.

netdude78




msg:3740128
 7:34 pm on Sep 7, 2008 (gmt 0)

hey csuguy, thanks for coming back to help! i didnt put a float on the mainwrapper, just everything contained within it, but i switched everything back to absolute positioning.

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;}

netdude78




msg:3740129
 7:38 pm on Sep 7, 2008 (gmt 0)

here is the ending html, if you need it (follows <div class="margin"> )
-------------------------------------------
<div class="copy"></div>
<div id="siteinfoIP"></div>
</div>
</div>
<div><br class="clear" /></div>
</div>

</div>
</body></html>

alt131




msg:3740199
 12:07 am on Sep 8, 2008 (gmt 0)

I haven't followed your link as they are not allowed, so flying blind. To stop the "guessing" I've set up a test page and css based on my understanding you want a fixed-width centred layout, and the (problem) footer to lie below the content. This should be easy - and should not required absolute positioning, or complicated floats to achieve ;) - but helps if the basics are right.

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:


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.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:

</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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved