homepage Welcome to WebmasterWorld Guest from 54.226.235.222
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Content at top layout - IE6 annoyances
tomhumf




msg:3904089
 3:24 pm on Apr 30, 2009 (gmt 0)

Hi,

I've read a few times about using layouts with the content at the top for good search engine performance. I couldn't find any examples that suited me so have tried writing my own.

It seems to work fine in firefox and chrome. In IE6 the header and footer don't show up. I have tried overflow:hidden on them to no avail. Can anyone see what's going wrong?

Thanks

<!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=windows-1250">
<title>Perfect Layout</title>
<style>
body{
margin : auto;
text-align : center;
width:100%;
}

#wrapper{
width:1000px;
background-color:#e2e;
margin-left:auto;
margin-right:auto;
position: relative;
text-align: center;
}

#header{
height:130px;
background-color:#00f;
width:1000px;
position:absolute;
left:0;
right:0;
clear:both;
top:0px;
float:left;
}

#leftmenu{
width:250px;
background-color:#f00;
float:left;
margin-top:140px;
}

#content{
width:700px;
background-color:#0f0;
float:right;
margin-top:140px;
margin-bottom:10px;
}

#footer{
height:100px;
width:1000px;
background-color:#123;
float:left;
overflow:hidden;
}

#clear{
clear:both;
}

</style>
</head>
<body>

<div id="wrapper">

<div id="content">
<p>Great my content is really near the top of the html, search engines have a whale of a time</p>
<p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>

</div><!--content-->


<div id="leftmenu">
<p>top</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
</div><!--leftmenu-->

<div id="header">
<p>Blah Blah stuff u dont wont search engines to read first</p>
</div><!--header-->

<div id="footer">
<p>This is a footer</p>
</div><!--footer-->

<div id="clear">
</div><!--clear-->

</div><!--wrapper-->
</body>
</html>

 

SuzyUK




msg:3904261
 6:30 pm on Apr 30, 2009 (gmt 0)

Hi tomhumf,

I don't think it's so much that you've done anything wrong at least in your logic, it's IE as usual, and not just IE6, although your problem is only initially evident in 6, I managed to break 7 too as I tried to correct! IE7 still has some problems with hasLayout when relative positioning is involved so a stronger bulletproof fix would be the best option, so here goes my effort, while trying to keep in line with your coding logic:

<!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=windows-1250">
<title>Perfect Layout</title>
<style>
html, body{margin: 0; padding: 0;
text-align : center;
}

#wrapper{
background-color:#e2e;
width:1000px;
margin: 0 auto;
position: relative;
}

#content{
width:700px;
background-color:#0f0;
float:right;
margin-top:140px;
margin-bottom:10px;
}

#leftmenu{
width:250px;
background-color:#f00;
float:left;
margin-top:140px;
}

#header{
background-color:#00f;
height:130px;
width:1000px;
position:absolute;
left:0;
right:0;
top:0;
}

#footer{
height:100px;
width:1000px;
background-color:#123;
clear: both;
}
</style>
</head>
<body>

<div id="wrapper">

<div id="contentwrap">
<div id="content">
<p>Great my content is really near the top of the html, search engines have a whale of a time</p>
<p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--content--></div>

<div id="leftmenu">
<p>top</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--leftmenu--></div>
<!--contentwrap--></div>

<div id="header">
<p>Blah Blah stuff u dont wont search engines to read first</p>
<!--header--></div>

<div id="footer">
<p>This is a footer</p>
<!--footer--></div>

<!--wrapper--></div>
</body>
</html>

things I did and why:

1. I moved the HTML comments inside the divs they belong to
I did this because they were triggering another iE6 bug (duplicating characters) - some of the word 'footer' was repeating underneath the footer

2. I removed the 'clearing' div entirely
- it was in the wrong place, and the footer itself can be used as the clearing div for the two floats above it

3. removed the float off the footer
- this brought back the footer in IE6/7, Yes at some point I'd lost the header & footer in IE7 too. You already have a height and width on the footer so I can't see why it needs to be floated too.

4. added clear: both; to the footer to replace the clearing div

5. finally, nothing else I tried brought back the header, until I added a wrapper div around the content (the two floated divs) this didn't need any styles applied to it nor cleared.. how weird

I know it's something to do with IE getting the z-index/stacking order wrong when hasLayout is involved, so I couldn't fix with z-index alone, but quite why a wrapper divs works, I'm not altogether sure. I vaguely remember that sometimes a "wrapper" also works to solve this "stacking" issue on a bigger scale too, and one of the reasons it's still recommended to use a wrapper div for your entire page content (as you've done) in the first place, Oh well (a content wrapper might turn out to be a useful styling hook too hehe)

I posted the whole code as I may have tidied/changed other things too. e.g. I removed a float off one of your Absolute Positioned divs, can't remember which one now. A div can't be floated and positioned at the same time, AP wins ;).
anyway if I missed explaining something, or you can't figure why I did something else, just shout!

don't ya just love IE!

hth
Suzy

swa66




msg:3904263
 6:33 pm on Apr 30, 2009 (gmt 0)

I'd start by looking at what you have in there and what it's good for.

I hope you like criticism ...

e.g.:

body:
- why set auto margins when you set the width of the content equal to to viewport ?
- why not reset margins and padding ? (you risk your body being too large for the viewport)

wrapper:
- inherits the text-align from body, why repeat it here ?
good: you gain position here due to the position:relative: children doing absolute positioning will be relative to the wrapper.

header:
- setting both left and right will be ignored by IE6, unless you give it a helping hand in the form of IE7.js .
- setting left and right and width only leaves margins to solve the problem, but they are by default set to 0, not auto. Take care not to force browsers to ignore settings you make.
- why floated ?
- what it is going to clear ?
I'd leave out the right, clear and float

content and leftmenu are both floated and appear to be able to sit next to one another, good.

footer:
- why float it ?
-> instead add the clear:both to make it clear the floats above it (the header is absolutely position, so it's not in the flow at all)
- no need for a width (divs get the full width unless they are floated)
- not sure what you want from the overflow, but if there's just one line it'll never go out of the 100px height unless you have riduculous user font settings, in which case you're better off with a min-height (tripped back to height in the IE6 conditional comment)

clear:
not needed, footer can do it already as long as you don;t float it.

A this will simplify your layout considerably, odds are the IE bugs you trigger will be different or even absent (quite a few relate to floats).

I'm not trying to make you look bad, on the contrary, I'm trying to help you forward by first cleaning up the code for the standards browsers before you look at legacy IE versions.

edit: clarification: I wrote this before I read what Suzy posted above, but you'll find a few similarities ;)

swa66




msg:3904269
 6:41 pm on Apr 30, 2009 (gmt 0)

If you have that contentwrap: I'd try to give it the top margin to leave space for the columns underneath, is easier to maintain that way should you want to reorganize how the columns are at a later stage.

SuzyUK




msg:3904276
 6:50 pm on Apr 30, 2009 (gmt 0)

funnily enough Swa I tried that, (in trying to make the contentwrapper remotely useful :)) but it wouldn't work, it caused various different issues in IE, FF, Chrome..

haven't time to figure out the real why just yet, figure it's the proper handling by FF, but as the issue affects the header in FF but reaffects the footer in IE I was happy just to solve the stacking issue.

[edited by: SuzyUK at 6:52 pm (utc) on April 30, 2009]

SuzyUK




msg:3904285
 6:58 pm on Apr 30, 2009 (gmt 0)

Trying to make it useful part 2.

you could use the extra hook to group like properties for maintenance, even if you can't apply the margin to the contentwrapper itself you can use the hook to group the selectors: e.g.

#contentwrap #content,
#contentwrap #leftmenu {
margin-top: 140px;
}

tomhumf




msg:3904850
 10:28 am on May 1, 2009 (gmt 0)

Hi and thank you both for your in-depth feedback.

The reason for me using the clearing div and float on the header and footer was to make sure the wrapper enclosed all the children with FF and Chrome.

It's great to see that can be achieved by adding a clear:both to the footer. I just kinda threw everything I found at it to try and make it work, but have obviously ended up with some useless stuff.

SuzyUK - I hadn't noticed the duplicating characters with the comments, but I often use them so I don't get lost and will continue to use this method in the future.

swa66 - I love criticism! thanks for your comments, I really love to reduce excess code.

"why not reset margins and padding ? (you risk your body being too large for the viewport)"

I can see my use of margins was wrong when dealing with a fixed width layout. I have been writing fixed width sites because of the complications with making it look good for various screen sizes. It's maybe time I address this...

I took left:0; and right:0; out of the header and I still seems to stay in place in all browsers I checked. I think I put these in because it was floating off the page, probably due to the unnecessary floats and clear.

I noticed you didn't suggest to remove the left attribute, is better to keep this in?

Thanks again, I'm excited about using this as a base for new sites and will try a variable width version.

tomhumf




msg:3904869
 11:13 am on May 1, 2009 (gmt 0)

I've briefly looked at a variable width layout. I would like the wrapper to be a maximum of 1000px, as I think the line length etc will be too long for larger screens.

It seems the only way of setting max-width, and min-width in IE6 is by using javascript. Is this the case?

I think this is the reason I gave up on liquid layouts before, I don't want it to break if java is turn off.

tomhumf




msg:3904934
 1:55 pm on May 1, 2009 (gmt 0)


[webmasterworld.com...]

I'm going to try this out and will post my new template sometime.

tomhumf




msg:3905038
 3:53 pm on May 1, 2009 (gmt 0)

Sorry to spam this thread so much...

I've got a liquid layout based on your suggestions previously. It seems to work ok in FF and Chrome. It seems I need to specify width:100% to make the header span across the wrapper, but not in the footer. Maybe this is because the header is absolutely positioned?

I have kept background colors in addition to images so you can see what's going on.

In IE6, it seems to work in 1024x768, but for lower preview sizes (using Pspad's preview tool) the header, footer and wrapper disapear.

Also, if I resize the window in IE6 the browser crashes/stalls.

Maybe I haven't implemented the java correctly?

<!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=windows-1250">
<title>Liquid Layout</title>
<style>
html, body{margin: 0; padding: 0;
text-align : center;
}

#wrapper {
min-width: 600px;
max-width: 1000px;
width: 90%;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1000? "1000px" : "auto");
position: relative;
background-color:#321;
margin: 0 auto;
}

#content{
width:75%;
background-color:#0f0;
float:right;
}

#contentwrap #content,
#contentwrap #leftmenu {
margin-top: 140px;
margin-bottom: 10px;
}

#leftmenu{
width:25%;
background-color:#f00;
float:left;
}

#header{
height:130px;
width:100%;
position:absolute;
top:0;
background-image: url('topslice.jpg');
}

#footer{
height:100px;
clear: both;
background-image: url('bottomslice.jpg');
}
</style>
</head>
<body>

<div id="wrapper">

<div id="contentwrap">
<div id="content">
<p>Great my content is really near the top of the html, search engines have a whale of a time</p>
<p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--content--></div>

<div id="leftmenu">
<p>top</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--leftmenu--></div>
<!--contentwrap--></div>

<div id="header">
<p>Blah Blah stuff u dont wont search engines to read first</p>
<!--header--></div>

<div id="footer">
<p>This is a footer</p>
<!--footer--></div>

<!--wrapper--></div>
</body>
</html>

tomhumf




msg:3905061
 4:40 pm on May 1, 2009 (gmt 0)

I have replaced this:

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1000? "1000px" : "auto");

with this:

width:expression(document.body.clientwidth < 600? "600px" : document.body.clientwidth > 1000? "1000px" : "1000px");

Seems to be working in all browsers so far...I gotta go to the pub now, let me know any thoughts

Cheers!

SuzyUK




msg:3905075
 5:23 pm on May 1, 2009 (gmt 0)

Hi Tom, sounds like you're fired up with enthusiasm :)

you're not spamming your own thread, it's great to hear the feedback of what you're trying out.

I'm a little busy just now to try out your enhancements, but I'm sure when time permits (pub sounds good right now!) - I and some others will provide thoughts and ideas, an I'm glad it's working out for you :)

have a good weekend!

[edited by: SuzyUK at 5:24 pm (utc) on May 1, 2009]

tomhumf




msg:3905464
 9:53 am on May 2, 2009 (gmt 0)

I was a bit premature in thinking that worked.

The conditions for java are now offset slightly to prevent IE freezing, and the 'else' value is now 100%.

I'm almost sure it does what I want now, it validates too.
I'm sure it isn't perfect though :)

<!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=windows-1250">
<title>Liquid Layout</title>
<style type="text/css">
html, body{ margin: 0; padding: 0;
text-align : center;
}

#wrapper{
min-width: 778px;
max-width: 1000px;
width: 100%;
width: expression(document.body.clientWidth < 780? "778px" : document.body.clientWidth > 1002? "1000px" : "100%");
position: relative;
background-color:#321;
margin: 0 auto;
}

#content{
width:74%;
background-color:#0f0;
float:right;
}

#contentwrap #content,
#contentwrap #leftmenu {
margin-top: 140px;
margin-bottom: 10px;
}

#leftmenu{
width:24%;
background-color:#f00;
float:left;
}

#header{
height:130px;
width:100%;
position:absolute;
top:0;
background-color:#00f;
background-image: url('topslice.jpg');
}

#footer{
height:100px;
clear: both;
background-color:#00f;
background-image: url('bottomslice.jpg');
}
</style>
</head>
<body>

<div id="wrapper">

<div id="contentwrap">
<div id="content">
<p>Great my content is really near the top of the html, search engines have a whale of a time</p>
<p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--content--></div>

<div id="leftmenu">
<p>top</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p><p>asddas</p>
<!--leftmenu--></div>
<!--contentwrap--></div>

<div id="header">
<p>Blah Blah stuff u dont wont search engines to read first</p>
<!--header--></div>

<div id="footer">
<p>This is a footer</p>
<!--footer--></div>

<!--wrapper--></div>
</body>
</html>

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