Layout falling apart in ie6

HTML & CSS
21

Hi,

I understand about the IE6 problems - I have a separate style sheet for this. I’m just trying to get it to work generally first.

Your suggestion about div#info_wrapper_top and div#info_wrapper_bottom didn’t do anything to fix the layout.

It’s just a copy of the code that Paul O’B provided which is why I don’t know why it’s not working.

22

Well my code worked locally and I’m 100% sure about that. THe code for hte display:inlines DO indeed work.

Your IE6 file is missing
http://example.com/css/IE6.css
And htis
http://example.com/css/IE.css

You have it selecting that. THe real place is

http://example.com/test/css/IE6.css
And
http://example.com/test/css/IE.css

You need to update these rules. FOr future reference, the …/ goes down a folder, in this case, the root directory.

<!--[if lt IE 7]>
<link href="../css/IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gt IE 5.5]>
<link href="../css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

To this

<!--[if lt IE 7]>
<link href="css/IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if gt IE 5.5]>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->

That might be it :slight_smile:
PS-the code I gave you doesn’t have to be in an IE6 sheet. The display:inlines are fine for a regular stylesheet and the widths needed to be updated anyway :slight_smile:

23

Ok I’ve updated the path to the css files in the conditional comments but this still doesn’t solve the problem.

Your comments about div#info_wrapper_top and div#info_wrapper_bottom don’t fix the layout though. If you look at the url previously provide, it’s still everywhere. There’s nothing currently wrong with the elements within div#info_wrapper_top and div#info_wrapper_bottom. It’s the sticky footer that isn’t working.

24

Hi,

My code is still working - I dot know how I can say it differently :slight_smile:

You didn’t change the branding styles.


div#branding {
    position: relative;
    height: 124px;
[B]    /*padding-top: 260px;  not needed now*/[/B]
}

You didn’t change the nav-supp:


div#nav_supp {
    width:100&#37;;
   [B] position: absolute;[/B]
    top:0;
    left:0;
    z-index:99;
}

If its not removed from the flow it will take up space and add extra height that is not wanted.

You didn’t change the nav_main IE styles to match.


div#nav_main [B]{top: 100px[/B]}/* not sure why this is 10px out but there's probably a reason*/

That’s the main culprits and as Ryan says you have a few php errors in places:


                <li id="formal">Subject 1</a>"?></li>
                <li id="suits">Subject 2</a>"?></li>
                <li id="leather">Subject 3</a>"?></li>
                <li id="boys">Subject 4</a>"?> </li>
25

Sorry about all those mistakes. I’m getting so confused on this project because there’s been so many changes. Guess I’m learning though.

All is working again - thanks for the continued help.

26

No worry - I should have highlighted the changes originally as they were hard to spot.