Brand new, freshly minted CSS developer with IE6 issue

You're using an IE conditional comment in the head of your page, so you don't need to do this kinda stuff:

#wrapper { width: 800px; margin-right: auto; margin-left: auto; padding: 0; text-align: left; background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size :medium; line-height: normal; }

* html #wrapper {
width: auto;
min-width: 800px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size :medium;
line-height: normal;
}

/******** Basic ********/

body {
margin: 0;
background-color: #BCCBAC;
text-align: center;
}

* html body {
background-color: #BCCBAC;
text-align: center;
}

Even if you weren't using conditional comments, you wouldn't do that cos the rules you're feeding to IE6 with the * html are nearly identical to the main rules. You only need to specify the bits that are different.

IE<=6 also doesn't understand min- or max- values, so there's no point specifying them for IE either.

But the bit that really needs looking at is this:

#sidebar { position: absolute; top: 0; left: 0; width: 256px; }

* html #sidebar { /* IE6 fix */
position: relative;
top: -590px;
left: 0;
padding-top: 5px;
width: 256px;
clear: both;
}

Positioning the sidebar absolutely obviously works OK in FF and IE7 so there doesn't seem much point trying to do something different with it in IE6?

This is not helpful I realise but it ought to be mentioned that it is probably mild folly to believe that one can change overnight from old school table web layouts to CSS-P and take on a client project with a short deadline.

You have not yet encountered half the problems and complexity that using CSS to it's full extent can and will bring, it is a subject that requires a fair bit of study and experience gained over time to be able to use effectively.

Far better to spend a little time getting familier with it and all it's properties and quirks cross browser before plunging into real world usage.

P.S SGML comments are written as:

rather than:

Tyssen,

OK...That makes sense. The reason for the change from absolute to relative in the IE specific code is that if I make it absolute the sidebar dissapears altogether. The only way I cculd even see it was to make it relative.

I used an extreme negative margin like this:
* html #sidebar { /* IE6 fix */
position: relative;
top: -590px;
left: 0;
padding-top: 5px;
width: 256px;
clear: both;
}

Now, the problem I have is with the subwrapper. I noticed that it is leaking into the right side and the main wrapper margings : auto; is not working. This may be part of the original problem

Any more help is GREATLY appreaciated. This is a lot more stressful than I had thought it would be. Although I am sure it has been said 1000 times before, I am definately not an IE fan right now.

Hugo,

I know. I was up for a challenge! I just didn't realize the IE issues that existed, much less how prevelant they were.

I feel that I am almost there with this project. Once I sort these positioning problems out with IE 6, I think I am in the clear.

The question is now what do I do. I either work with a hybrid of CSS and tables, which I would think would take me almost as much time as psyching out this remaining issue. Or, I plunge ahead.

As for the comments...Sorry, it is a habit from Cold Fusion where the comment tags are indeed .

Thank you,

Chip

Probably wise to go with the flow now you've begun , I don't think I or anyone else would advocate a mix of table and css layout.

First though you need to address the issues raised by Tyssen earlier as the layout doesn't hold together at all in IE6, that is of course if you have not already done so(judge on your original site link)

I have made the mods indicated in my response to Tyssen, but other than that I feel like I am chasing my tail between position, margins and padding.

If you view the link now you will see a different picture.

I made the subwrapper grey on purpose to troubleshoot which element was giving me grief. So I narrowed it down, but I can't figure out how to put it back where it belongs.

Sorry I still see the problem rulesets and I did a forced refresh.

* html #wrapper needs to vanish altogether.

OK. I deleted the *html #wrapper code. Now how can I fix the placement?

Thank you.

As Tyssen mentioned earlier you will also need to kill the star selector rules for sidebar.

Try removing the #main width and float and just giving it a margin left to clear the left sidebar let IE see the absolute positioning, it would be better if it were floated but I assume you have the sidebar flowed after the #main element which means trickery to get it up alongside but can be done with an extra wrapper or other techniques.

Good Call on the #main width removal!

OK. The page is now WAY better in IE6 and is not messed up in FF or IE7!

Two small issues. 1) The first fly-out menu freaks out a little, but the others don't. 2) The home page looks good, but there is a small white space under the banner and to the right. Is this a wierd pixel adjustment thing?

Thank you. This has been VERY helpful. I am almost there!

Didn't notice either of the two problems mentioned but may have not be looking carefully enough.

You do have whitespace under your footer in IE6 which may just be a collapsing margin so check that you have control of your margins on elements within the footer (try setting the bottom margin to 0?)

The white space is on a sub page. Oops...Sorry. I meant to mention that in my last post. If you click on the seond menu down (HECC Education Partners) and then Overview you can see what I mean.

I also still have the first sub-menu under Degrees & Certificates acting funny.

Thank you.

The image problem might be solved if you set it to display:block.

The menu problem I still don't, see you will have to be technically more exact than 'acting funny'

No joy with the display: block setting. It looks like the header, and navbar separate and there is also extra white space to the right.

I was able to fix the menu issue with a width adjustment.

Only the above problem left!

Thank you.

Actually display:block does fix the bottom line as would vertical-align:bottom as long your applying it to the img, it's a reserved space for letter decenders (baseline) it allows for text to be arranged on a straight baseline with the decenders such a 'g' hanging below instead of pushing up the letter.

As for the rest of the problem you need to look carefully between the two pages as you have one that works and one that doesn't therefore in the code somewhere there will be a difference, your header area should be exactly the same from page to page , look for the anomily in the coding.

Awesome! It worked. I had applied the display: block to the #header and tht didn't work. I applied it to #header img and it worked!

I also fixed the ther white space in the overview page. I can't believe it was something as dumb as the italic style I inserted for a particular text section on that page. I even tried an em tag with no luck. Oh well...Small price to pay.

Thank you for your help! It works great now!

Thought you may have applied it to the header

The italic problem sounds as though you may have run foul of the 'IE Italic bug', if you google on that you will find explanations of that problem.

Hugo.