CSS positioning Wonky in IE 6.x

[4evrblu]

http://totalphysiqueonline.com/ has a header that displays virtually identically in the latest versions of FF, Safari, Camino, Opera, Mozilla and even IE 7

However, in IE 6.x the sitetitle section is just bizarre. I can take some screen shots, but the easiest thing to do is go to http://ipinfo.info/netrenderer/index.php

Enter my URL and select IE 6 from the drop down menu. Then hit the render button, and that is what you get....a truncated page titile.

Here is the CSS code that controls that section:

/*** Header section ***/

#sitename {
color:#ffffff;
height:90px;
margin:0 20px 0 305px;
text-align:left;
background:url(images/sistine-chapel3.gif) no-repeat; /* Delete this line to remove the animated globe */

}

#sitename h1,#sitename h2 {
font-weight:400;


}

#sitename h1 {
font-size:2.4em;
z-index: 99;
margin:0 20px 0 -285px;
}

#sitename h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 5px;
}

#sitename h2 {
font-size:1.6em;
margin:25px 0 0 100px;
}


I have looked this over for hours. I have tried Z-indexing....I have had several of my friends who are far more experienced than I am tell me they have no idea what is going on. I even went to WordPress forums twice with this and no one there has a clue.

Just curious if the vaunted SitePoint community might have someone that can ferret out the issue.

[Ed Seedhouse]

Looks like you have one or more blank lines at the start of your code and before the doctype declaration. Try removing them. IE6 doesn't like anything at all before the doctype line and goes into quirks mode where it renders block sizes wrongly. I'm not sure if that applies even to blank lines, but try removing them and see what happens.

[4evrblu]

Looks like you have one or more blank lines at the start of your code and before the doctype declaration. Try removing them. IE6 doesn't like anything at all before the doctype line and goes into quirks mode where it renders block sizes wrongly. I'm not sure if that applies even to blank lines, but try removing them and see what happens.

This is a most interesting consideration, and sadly it did not fix the issue. But I love that sort of thinking. Well played! I wish it had worked though.

grrr


Hmmm
Lemme see if there are other blank lines. I will get back to you

[4evrblu]

No dice.

I cleaned up lines of space, tucked everything nice and neat, and nothing. IE 6.x is still having issues.

Seems like most everyone is in agreement that the CSS positioning is valid. In fact, it does validate.

[4evrblu]

Looks like you have one or more blank lines at the start of your code and before the doctype declaration. Try removing them. IE6 doesn't like anything at all before the doctype line and goes into quirks mode where it renders block sizes wrongly. I'm not sure if that applies even to blank lines, but try removing them and see what happens.

Ed, can you or anyone else make any other suggestions? This is making me bonkers

[Ed Seedhouse]

The site is awfully complicated for what it does, it seems to me. What's all that javascript for? And why all the z-indexes? Everything is visually on the same level so they should be unnecessary.

My best advice is to simplify it a whole lot. You should be able to do that basic layout with no positioning at all except a couple of floats.

It's basically a fairly straightforward 3 column site, it seems to me. You can do that with the right source order and a couple of floats, no other positioning needed.

As it is it's much too complicated for me to understand, let alone fix.

[4evrblu]

Hi Ed.

I really apologize. The truth is the javascript all have a valuable purpose and controls a good amount of DHTML in certain sections of the site. If you want to have some fun, just go back and check out the Beginner, Intermediate and Advanced Program Categories.

Check out the Body Buddy too!

Perhaps the only script I could maybe do without is teh Netscape resize script, as few people use Netscape anymore, but other than that its all good.

The Z-Index is used in the CSS I showed you on a lark. It was used to pull the title forward, just in case there it was a red block that was covering it in IE 6.x

But the z-index did nothing. I might as well have never used it :P

Do not worry, I am sure we will find a fix one way or another.

Thanks for trying.

As for the "floats" I tried it. At least somewhat.

float can only take on right, left and maybe static, as far as I know. I need to use positioning to get the text titles over top of the image. I think the z-indexing is the way to go, but as I recall a z-index can only reside in an element that has either absolute or relative positions. And when I tried that, things REALLY got wonky. I will keep at it

[Ed Seedhouse]

float can only take on right, left and maybe static

Only left and right, but that's all you need for three columns. You just put the two column divs first in the code and float the left one left and the right one right.

Then you put your middle column div, no positioning at all, just adjust the left and right margins to fit between the two floated elements.

, as far as I know. I need to use positioning to get the text titles over top of the image.

No, you don't. Just put the background graphic in the background with CSS and the text will naturally appear in front of it.

I think the z-indexing is the way to go, but as I recall a z-index can only reside in an element that has either absolute or relative positions. And when I tried that, things REALLY got wonky.

Stay away from absolute position for any major layout tasks, is my advice. Makes for brittle hard to maintain design. Z indexes don't work (and aren't necessary) for float based layouts anyway.

As to your use of javascript - what happens to a visitor who had javascript disabled? It's happening more and more lately.

The general rule is to use as much as possible the natural flow of the layout, and when necessary to position elements use as little positioning as possible, using floats and the odd margin adjustments.

For the type of layout you have on your page this is perfectly possible and any other approach is, IMO, unnecessarily complex and hard to maintain, and too brittle across different browsers as well.

I'll go even further and question your use of three columns for your layout. I think you are just trying to put too much on a page and it ends up just making it unnecessarily hard to use. Your site seems to lack focus - what is it really about and who is your real audience?

[4evrblu]

Ed, just out of curiosity, did you have an opportunity to look at my style sheet? How do you think I managed to get the columns into position in the first place? LOL

I used float left and float right.

It almost sounds as if you have not even looked at my style sheet.

LOL

Listen Ed, thanks for your input. I really appreciate the effort.

Have a good holiday. I am sure I will sort this one out.